Date added: 07 May 2007
Listed in: Website Layouts
Submitted by: Python
Views today: 1
Total view: 742

This tutorial will show you how to create a basic but great looking web site navigation bar in Photoshop.

1) Open up Photoshop and create a new document 500px by 30px. You should however adjust the width setting to the width of your web page.

2) Create a new layer by going to Layer >> New Layer. Call it bg.

3) Press Ctrl + A on your keyboard. This selects everything.

4) Use the gradient tool and fill it with a gradient of your choice. This is what im using:



5) Right click on the bg layer and go to Blending Options. On the left hand side select Gradient Overlay

6) Click on the gradient to get the gradient settings up. Create the following gradient and click OK:



7) Then use the following settings for the Gradient Overlay:



8) Click OK. You should then have something similar to:



9) Now use the text tool and put on your links. You can use the space bar to seperate them out. Make sure to leave enough room in between for the spacer.



10) Then select the column marquee tool. You can get to this by clicking and holding down on the Marquee tool in the windows panel. A small drop down will then appear where you can select it.

11) Make sure that you have the bg layer selected and then simply click in between each of your navigation links and press delete on your keyboard. Here is the result: