Professional Dark Navigation Bar

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:

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

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.

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%.

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.

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 separator layer selected press Delete.

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

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