Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts

    Help with gradient headers

    Can someone tell me where I can find out how to make these on photoshop/gimp?
    Here are some examples of what I'm trying to make:


  • #2
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Hi koss,

    In GIMP:

    1.Open a new image of whatever size.

    2.Use the rectangle select tool and create your canvas.

    3.Create a new layered named rectangle.

    4.Fill the rectagle you selected with your color of choice on the new layer.

    5.Create a new layer, name it gradient, (there should still be "ants" around your rectangle)

    6. With the gradient layer selected, click your gradient tool.

    7. Make sure the settings are on linear, change the options from "FG to BG" to "FG to Transparent"

    8. Make your foreground color white.

    9. While on your graident layer, use the graident tool and drage from the top middle of your image to wherever you wish, probably about 3/4 the way down. Hold CTRL to make sure the gradient is set straight.

    10. go to SELECT, and click SELECT NONE.

    11. Choose your gradient layer and lower the opacity to desired level.

    *Optional Step* 12:create a new layer and add a noise or pattern and lower the opacity very low.

    13. right click on the gradient layer (should be above the rectangle layer) and click merge down.

    14. Your done

    Hope I didnt miss a step, i suggest you just mess around with all the tools above to because you can create some really nice effects with gradients and noise/filters/patterns.

    Best Regards,

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • Users who have thanked FWDrew for this post:

    kosstr12 (08-14-2008)

  • #3
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Thanks for the fast reply Drew! I'm going to try this right now, and I'll tell you how it works out.

  • #4
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Sounds good and your welcome

    Just realized some of the gradients above arent coming directly from the top, needless to say, just drag from the left, right, bottom, whatever area you wish to be the lightest and the gradient to start from. Again be sure to hold ctrl for a straight gradient.

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • The Following 2 Users Say Thank You to FWDrew For This Useful Post:

    kosstr12 (08-14-2008), oesxyl (08-14-2008)

  • #5
    Regular Coder kosstr12's Avatar
    Join Date
    Apr 2007
    Location
    Woodstock, Georgia
    Posts
    428
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by FWDrew View Post
    Sounds good and your welcome

    Just realized some of the gradients above arent coming directly from the top, needless to say, just drag from the left, right, bottom, whatever area you wish to be the lightest and the gradient to start from. Again be sure to hold ctrl for a straight gradient.

    Drew
    Woo! It worked! Thanks Drew;]

  • #6
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Glad to hear it, all the best

    Drew
    Dev-Tips.com || Employee at the Envato Network || My Portfolio

  • #7
    New Coder
    Join Date
    Jul 2008
    Location
    Newcastle, UK
    Posts
    92
    Thanks
    3
    Thanked 7 Times in 5 Posts
    Are you still looking for the Photoshop version?

    Moodle.

  • #8
    New Coder
    Join Date
    Jul 2008
    Location
    Newcastle, UK
    Posts
    92
    Thanks
    3
    Thanked 7 Times in 5 Posts

    Gradients in Photoshop

    PHOTOSHOP GRADIENTS - BY MOODLE

    1. On the sidebar; click this button:


    2a. Then, under the File, Edit taskbar, there should be something like this:

    2b. Click on it, and it should bring you a pop-up box

    3. The popup box should look like this:

    Press the boxes with a little arrow sticking out of them; and once done, should bring up a box like this:


    4. Modify the colour, by dragging the circle, or by entering a hex code next to the hash.

    5. Press OK on the popup

    6. Repeat step 2b, 3, 4 and 5.

    7. Press OK on the gradient, once you are happy with it.

    8. You will then get a crosshair! Drag the crosshair to make a line, drag it at any angle and any length. The length and angle effects the gradient.



    Hope this helps the OP & anybody else!

    Moodle.

  • The Following 3 Users Say Thank You to Moodle For This Useful Post:

    effpeetee (08-17-2008), oesxyl (08-14-2008), woohoosims (08-15-2008)

  • #9
    New Coder
    Join Date
    Aug 2008
    Location
    Toronto, ON
    Posts
    36
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Try visiting tutorial sites and just plow through random tutorials - doing this will teach you a lot of techniques - even if this includes thing you currently don't want to do - it will give you a solid ground and help you to see how things are made.

  • #10
    New Coder
    Join Date
    Jul 2008
    Location
    Newcastle, UK
    Posts
    92
    Thanks
    3
    Thanked 7 Times in 5 Posts
    Isn't that what CodingForums is for?
    Beyond Moodle


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •