Clean Navigation Bar

1) Create a new document, pick any size you want. I used 330 x 300 for this tutorial.

2) Make a new layer. Use the Rectangular Marque Tool and make a square selection like below:



Use these gradient colors or choose your own:



Fill it in with your gradient tool, drag from the top to the bottom.

3) Make yet another new layer but make sure its under the gradient layer we just made. Use your Rectangular Marque Tool again and make a thin grey rectangle like below:



I used #D0D0D0 for the grey color.


4) Now the basics are done. Select the Line Tool and look closely below, we want to make to types of lines, one a dark grey and one a light grey.



This will
make the navbar more clean and give it more style.

Note make a new layer before doing the first line, when doing the second light grey line do it on the same layer so they are merged together. We want to Duplicate this layer after the 2 lines are done and go to Edit>Transform>180 Degrees and nudge the lines to the bottom to get the lines in the navbar looking like above. The Greys I used were:

Dark Grey: #C1C1C1

Light Grey: #F2F2F2


5) Now we still want to use the line tool to make lines running verticle now to break the nav buttons up. So repeat step 4 again to get something like this:



Noticed I changed the background color, any grey will do aslong as its a light grey :D. Anyways back to the lines, finish the lines then duplicate the layer and get a set of buttons like this:



Add your text and bam your done, nice easy clean style nav bar ready to use on your sites.