How to make a Navigation Bar in photoshop.

Ok, I was bored so I thought I might as well post this. Tables are good for navigation bars, but they can get boring after a while. Thats why photoshop is good for not just graphics, but site navigation bars.

Ok, first make a 130 by 20 image with a black background. and call it navheader.

Make a new layer and call it line1.

Now make a line on the right side with the line tool 8px all the way down the side of the right. And add a layer mask. Your line can be any color, just make sure its not anything close to black or grey.

Now pull out the gradient tool and set it to black forground, white background.
Drag and keep going til' you find something like this.


Go to view >> fit on screen.

Select layer "line1" and "select" the line area. and hit ctrl+c. Now hit ctrl+V.
Select layer 1 and name it line2. And do edit >> free transform >> rotate 90* ccw. Move line2 til its touching the top of the picture. Now go edit >> free transform >> distort. And pull it all the way across but touching line1, not across line1, touching. Now.

hit move to apply to transformation. ok, now go to edit >> free transform >> and distort again. and do as follows.

Pull the top right corner of line2 all the way across line1. This should make the effect of line1 making a left turn. And if not. You better read over this again.

Now. The header of the nav bar is complete. you can put what ever text you desire in the middle. Like navigation, and give some blending effects. What ever you desire. Now save it as navheader.jpg.

Make a new image with 130 width, 13 height with a background of black. Pixels of course and hit ok.

Now for a easy part. Hit ctrl+v, and move the line to the right side. Thats the easiest part I think. Hit save, and save it as tdbg.jpg.

Ok, now to make a cap for the bottom. Make a new image 130, 15 black background.

Now hit "OK" and press ctrl+v. And move it to the right side. distort it til it is all the way across the right side. Now hit ctrl+v again... and go edit >> free transform >> rotate 90* ccw. Move it to the bottom. And go view >> fit on screen.

now distort the last line you created until it is streched out across the top bot not across the line on the right side. Just "touching". Now hit move and apply the distort.

Now edit >> free transform >> distort. And do as follows.

Pull the bottom right corner of line2 all the way across line1 on the bottom. This should make the effect of line1 making a upwards turn. And if not. You better read over this again.

Ok, the images are complete now. save the last image as "navend.jpg"

Now for the navigation table itself.

Add the following code for the beggining of the nav bar.



That just basicly makes the header and the whole table itself.

now add this for the links itself.


That made the td for the links. Now for the cap.



Ok, were done. Phew, to see what result I got. Go to.
Clan-Forge.net

This has been a MeAt production.

get the rid of those popups otherwise nobody will ever vist ur site there very annoying.