Professional Dark Navigation Bar

Posted on Tue, 2006-08-01 15:00

This tutorial with guide you through how to make a professional looking 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 I am using 400x60 with a resolution of 72 pixels/inch with Colour Mode set to RGB Colour 8 bit.
2.

Using the rectangular marquee tool create a rectangle that covers the whole width but leaves around 2 or 3 pixels on the top and bottom (so around 54-56px in height).
3.

Select the gradient tool and set your gradient to this:

Gradient Settings

Draw a gradient from the top of the select to the bottom, like this:

Gradient
4.

Select the rectangular marquee tool again and draw a rectangle from the top of the image and cover about 55-60% of your first gradient rectangle. This should cover the whole width.

On a new layer, fill this with white, #ffffff. Set the blend mode to Overlay.

Shine

This divides are navigation in to 2 rows, first row for the main links, the second for our sub links.
5.

Select the rectangular marquee tool and draw a 3px line across the whole width and place it at the top edge of your gradient. Fill the selection with black on a new layer. Set the blend mode to Overlay. Then repeat for the bottom of the gradient. Merge the 2 layers and set the opacity to 50%.

top and bottom
6.

Add your link text. I am using Tahoma 14px with blend mode set to Overlay for the main links and Tahoma 12px with blend mode set to Overlay for the sublink.

Text
7.

Add a colour to your background layer. I am going to use #2f3c56.
8.

Select the single column marquee tool and make one anywhere on the image. Press and hold Ctrl + Alt + Shift and click the preview of the white layer that is on top of the gradient.

Create a new layer then select a black to transparent gradient. Draw a gradient from the top of the select to the bottom of the selection. Press Ctrl + D to deselect the selection. Press V (or the move tool), then hold Shift and press Up once.

Now duplicate the layer by pressing Ctrl + J. Then go to Edit » Transform » Flip Vertically. Move the new transformed layer down so there is a small space between where the gradients meet. Merge the 2 layers and change the opacity to 50%.
9.

Ctrl + Click the white shine layer within the layers panel and then press Ctrl + Shift + I. This will invert the selection. With the seperator layer selected press Delete.

Duplicate and move the layers till you get something like this:

seperators

You can also add seperators to the sublinks too if you wish.