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

Navigation Menu


In this tutorial I will show you how to create a simple navigation menu. So make a new document sized 500x100 and fill it wit a light grey. Now make a new layer and make a selection like mine and again fill it with the same color you used on the first layer

image 1

Step 1. Now add the following layer styles:

Drop Shadow:

image 2

Stroke:

image 3

This is what I got:

image 4

Step 2.

Now we need to make a new layer between the first to like in the image below:

image 5

Pick up the Polygonal tool: and using the shift button and the mouse draw a shape like mine:

image 6

image 7

fill the shape with any color. I used a light blue:

image 8

Go to layer>duplicate layer and move the layer next to the previous one and repeat the step until you have all the buttons:

image 9

Now merge all the shape layers together by pressing Ctrl+E and add the following layer settings:

Inner Shadow:

image 10

Outer Glow:

image 11

And add your text:

image 12

You are pretty much you can add bullets or anything else to enchance the menu. Look what I added:

image 13

And with a possible rollover:

Navigation Menu
Click to enlarge


Author's URL: PSDartist
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Navigation Menu"

Captcha