Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Professional Menu

Professional Menu


Step 1. Make a new document sized 200x400 and fill it with a grey color:

image 1

Set your background and foreground colors to : E8E8E8 and DDDDDD like in the image:

image 2

Now grab the gradient with the following settings:

Click to enlarge
Click to enlarge

Create a new layer and make a selection like below:

image 4

And go from top to bottom with the gradient. You will have something like this:

image 5

Add a drop shadow with the following settings:

image 6

You can also add your text on top now and a Inner shadow on it:

image 7

Now make a new layer behind the second layer with the first shape on it and again with the same gradient go from top to bottom until you have something like below:

image 8

Step 2. Grab the rectangular marquee tool with the settings in the image :

Click to enlarge
Click to enlarge

And make a selection like below:

image 10

Repeat the steps until you fill all the image:

image 11

Now add a simple dropshadow with the following settings:

image 12

Step 3. Make another layer behind this one and make a selection and fill it white and lower opacity to 20% then add the text.(i also added small numbers under the text to make it look better and small arrows.

image 13

image 14

And with a rollover sample:

Professional Menu Tutorial: Final Result



Author's URL: Photoshop-Tutorials.us
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Professional Menu"

Only registered users can write comment

No comments yet...