Navigation Bar Buttons

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:


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.


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


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


Click OK


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.


Now Ctrl + Click the layer with the Blending Options applied


Go to Select » Modify » Contract and select 2px


Then Select » Inverse


Then press Delete


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