Step 1

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?