Navigation Bar Buttons

Posted on Sat, 2005-12-10 19:37

This tutorial with guide you through how to make a navigation bar for your site. This tutorials takes in to account that you have a reasonable knowledge of Photoshop:

1.

Make a new document. For this tutorial you can use 800x50 with a resolution of 72 pixels/inch with Colour Mode set to RGB Colour 8 bit. But for the purpose of this tutorial i will just show you how to make the buttons for the navigation bar. You can use a bigger canvas for many buttons, or do each button individually.
2.

Make a box that takes up most of the area, but leave a border around your button.
3.

Right click the layer and click Blending Options. Use these options for your button. The colours are a variable.

(Click for larger version)

 

Colour: Black (#000000)

 

(Click for larger version)

 

Colour: #99FFFF

 

(Click for larger version)

 

Colour: #003399

 

(Click for larger version)

 

Highlight: White (#FFFFFF)

Shadow: #000099

 

(Click for larger version)

 

(Click for larger version)

 

(Click for larger version)

 

(Click for larger version)

 

Colour: #66CCFF to #0066CC

 

(Click for larger version)

 

Colour: #000000

4.

Click OK
5.

Now to make the white gradient, use the Eliptical Marquee Tool and draw an elipse covering the top half of the button and draw a Gradient from White to Transparent on a new layer.
6.

Now Ctrl + Click the layer with the Blending Options applied
7.

Go to Select » Modify » Contract and select 2px
8.

Then Select » Inverse

9.

Then press Delete
10.

Add the text for the button, and there you have it. You can play with the text, putting it above the gradient or below or in a different colour