Article written

  • on 10.01.2008
  • at 09:25 PM
  • by Admin
  • with 55,544 views
  • 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading ... Loading ...

Fresh Orange Gradient Menu 10

In this tutorial we’re going to design a nice orange gradient menu!

1. Create a new document (800*100) and fill the background with #ffffff using the paint bucket tool.

buttoni1

2. Now use your rounded rectangle tool and select another front color (I used #ff8a00) and draw a shape like this. The radius should be around 10px to give the menu 4 rounded corners…

buttoni2

3. Now it’s time to adjust the blending options, we’re going to add a lot of effects so pay attention and follow these steps closely! These are easy but it’s also easy to forget something… So here we go! Go to (layer – layer style – blending options).

buttoni3

buttoni4

buttoni5

buttoni6

buttoni7

4. Now just add some text to this orange gradient menu (lucida sans unicode, 12px, #ffffff front color). After you’ve inserted your links for the menu just add a drop shadow with the following settings shown in the screenshot below!

buttoni8

5. And there you go! You have designed a nice orange gradient menu for a website, banner or header!

buttoni9

Please Login or Register to download the source files.

subscribe to comments RSS

There are 10 comments for this post

  1. It seems that the text is a little fussy, i think you should set the anti-aliasing of the text to strong to solve that.
    But i must say it’s a nice menu bar :)

  2. Admin says:

    You’re right, it does look better… Hopefully everybody reads the comments :) !

  3. haxan says:

    Nice,… really bold colors. Suits best with white and black both.

  4. Thanks for this very nice tutorial. I like that you went step by step and made sure nothing was left out, thanks.

  5. Vinayak says:

    amazing.. too good !!

  6. Ashish says:

    Great Effect

  7. tutorial blog says:

    Thank for post. Very useful!

  8. kapernicus says:

    Great tutorial!

    One question. How did you choose the stroke color?

  9. Great tutorial thanks for sharing

Please, feel free to post your own comment

* these are required fields

PhoNuts is powered by WordPress.
Back to Top