21

Sleek Dark Navigation

Web Layouts

Step 1

Firstly create a new document – the size I’ve chosen to use is 600 pixels wide and 210 pixels high. Although if you are turning this into a web layout, you might want to have it larger. Fill the background with a dark radial gradient, I’ve used the two colours #282c30 and #1b1b1b.

Step 2

On a new layer make a selection of 550 pixels by 50 pixels in the middle of the document. The easiest way to make this selection is to use the rectangular marquee tool and use the fixed size option.

Step 3

Select the gradient tool and fill the selection from top to bottom with a linear gradient using the colours #161616 and #0a0a0a.

Step 4

Now apply an outer glow to this layer using these settings. Right click the layer and go blending options to adjust the layer styles.

Step 5

We are now going to be adding a shine effect to the navigation bar. On a new layer make a selection on the top half using the rectangular marquee tool (fixed size of 550 pixels by 25 pixels).

Step 6

Fill the selection with a linear gradient from white to transparent. Set the opacity to 10%.

Step 7

Now we are going to be adding a highlight to the bottom of the bar to give it some colour. Make a selection of 550 pixels by 3 pixels at the bottom of the bar.

Step 8

Fill the selection with the colour #74ab00. To fill a selection simply go Edit > Fill with colour.

Step 9

Using the text tool add in some text to act as links. The font I’ve chosen for this is Verdana.

Step 10

Lastly, we’ll be adding a hover effect for one of the links. Create a new layer. Using the rectangular marquee tool make a selection around one of the links.

Step 11

Fill the selection with a linear gradient from white to transparent. Set the blend mode to Overlay and the opacity to 75%. To learn how to turn this .psd file into an html file read this tutorial.