Firstly, create a new document 500 by 200 pixels. Select the gradient tool and set your foreground colour to #363636 and your background colour to #252525. Appy a radial gradient by left clicking in the top left quarter and dragging to the lower right corner.

Step 2

Secondly, we’ll be starting with the base of one of the buttons for the navigation. Create a new layer (Layer > New > Layer). Select the rectangular marquee tool and make a fixed size selection of 100 by 40 pixels.

Step 3

Now fill the selection with a linear gradient (using the gradient tool) using the colours #68ad40 and #4c8c2c.

Step 4

We’re now going to be adding a couple of effects to the button using layer styles.

Layer > Layer Styles > Inner Glow.

Layer > Layer Styles > Gradient Overlay.

Layer > Layer Styles > Stroke. The colour I’ve used here is #427a25.

Your button should now be looking something like this. Nice and shiny :-)

Step 5

Next up, we’ll be adding some lighter and darker areas on the button to give it some texture. Select the burn tool and I’ve used a soft 45 pixel brush, Highlights range and a 30% exposure. Click around the sides of the button so you get something like this.

Step 6

Now select the dodge tool and here I’ve used a 14 pixel soft brush, Highlights range again and an exposure of 10%. Click around the bottom this time.

Step 7

Move the button to the left of the canvas then duplicate the layer three times and line them up like so.

Step 8

Create a new layer and make a selection below the navigation about 40 pixels high and fill with a linear gradient from #cacaca to transparent using the gradient tool.

Step 9

Go Edit > Transform > Perspective and drag one of the bottom corners outwards while holding down the ctrl key. Hit enter to set the transformation.

Step 10

Lower the opacity of the shadow layer to 10%.

Step 11

Lastly, add in some text links using the text tool. The font I’ve chosen for this is Tahoma, Regular, 15pt, Smooth, #ffffff.

And you’re finished.

Create a new document, I’ve chosen the size 500 by 400 pixels. Fill the background with a radial gradient with a light grey (#2c2c2c) and dark grey (#151512) colours.

Step 2

Secondly, we’re going to be making the white background for the navigation bits to sit inside. On a new layer (Layer > New > Layer) select the rounded rectangle tool and set the radius to 10 pixels. Make a selection of 250 by 300 pixels in the middle of the document and fill (Edit > Fill) with white.

I’ve added a faint outer glow (black) to the layer to make it stand out a little bit more.

Step 3

Thirdly, we’ll be adding a header to the navigation menu. Create a new layer and select the area of the white background and fill with the colour #151512.

Move the selection down 40 pixels (Shift + Down four times) and hit delete on your keyboard to delete whatever was in the selection leaving a header background.

Step 4

Here I’ve added the title for the navigation menu – the font I’ve used is Delicious. I’ve also added a white to transparent gradient overlay layer style to give it a minor glossy effect.

Step 5

Now we’re going to be adding a little green gradient underneath the header to give some colour to the menu. On a new layer make a selection underneath the header (similiar to the one we used to delete the unwanted fill) and fill with a linear gradient from #a7cd1e to #77a80e – left click at the top of the selection and drag down just 10 pixels instead of to the bottom.

Now move the selection down 5 pixels (hit Down five times) and hit delete.

Step 6

Select the text tool and add in some text links. The font I’ve used for this is Verdana with a line height of 30 pixels (you’ll need to use this so it’s easier shortly). The colour I’ve used is #383838.

Step 7

Next up is the dividers between the links. Using the rectangular marquee make a selection of 250 by 1 pixel between the first two links and fill with the colour #ebebeb.

Duplicate the divider layer and move it down 30 pixels (Shift + Down three times) this is when using the line height of 30 pixels comes in useful because you know how many pixels to move it down :) Repeat this for all of the links (leave the last one).

Step 8

Now I’ve added a rectangle behind one of the links so it looks like it is active / mouse is hovered over it. To do this I created a new layer underneath the text layer and made a selection of 250 by 30 pixels behind one of the links and filled it with the colour #f7f7f7.

Step 9

Using the techniques I showed you earlier on, create a nice little footer for the menu – a dark underneath and a green gradient on top (see the psd file if you have any troubles).

Step 10

Now because Photoshop doesn’t seem to be very good with corners when you have a layer on top of another and it’s on a curved corner, we’ll just fix the corners up by selecting the white background and erasing the corners.

And you’re finished.

First of all, create a new document – the size I’ve used for the purpose of this tutorial is 600 by 190 pixels (but I had a larger file size for my design concept for PSDLounge). Fill the background layer with white (Edit > Fill).

Step 2

Create a new layer (Layer > New > Layer) and select the rectangular marquee. Make a selection of 600 by 120 pixels at the top. Apply a linear gradient from a light blue to a darker blue. The light blue colour I’ve used is #2d7fb7 and the darker colour is #004e8e.

Step 3

Now we’ll be adding some highlights to the header. Keep the area selected, and on a new layer apply a radial gradient from white to transparent – like below.

Set the blend mode to soft light.

Step 4

Now we’ll be making another highlight with less intensity. On a new layer make another radial gradient from white to transparent on the right of the banner.

This time, set the blend mode to overlay and the opacity to 25%.

Step 5

Select an abstract brush you have or head over to brusheezy and find one you’d like to use. Still with the selection you made earlier (so that we don’t get overlapping bits over the soon to come navigation) add some brushings in a light blue colour (lighter than before).

Lower the opacity of the brush layer to 25%.

Step 6

Next up is the text. The font I’ve chosen for the header (and headings in the sidebar) on PSDLounge is Delicious. It’s nice and clean and seems to go well with simple designs.

As you can see above the font colour I’ve used is white and I’ve also added some layer styles – an outer glow and a faint grey to white gradient overlay (you can have a closer look at the sample .psd file if you want).

Step 7

Now we’ll be making the navigation, on a new layer make a selection of 600 by 40 pixels underneath the header. Fill the selection with a linear gradient from #151515 to #0a0a0a.

I’ve also added a faint gradient overlay to give it some depth and an outer glow to make the change from the black colour to white less dominant. If you are adding the outer glow, make sure that you move the navigation layer below the header layer so that the outer glow doesn’t go over the header.

Step 8

Lastly, add in some text for the links on the navigation background. The font I’ve chosen for this (after considering Verdana but deciding against it in the end) is Arial.

And there you have it, a modern web 2.0 header – wasn’t hard was it?