Zymic

Now bring up the blending options for this layer. Gradient Overlay and then edit the gradient:

Now drop shadow:

Now Bevel & Emboss, then press OK.

Hold CTRL and click the button layer to make a selection. Then make a new layer (above the current layer), grab the rectangular marquee tool, hold ALT and cut the selection in half as shown below:

Fill the selection in with white, set the mode to overlay and low the opacity to a low % until it looks similar to below.

Now duplicate the button layers, placing them EVENLY next to each other as shown below. To duplicate either go [ Layer > Duplicate Layer ] or even quicker simply drag the layer in the new layer button in the layers pallet.. either way works. Don't try and cram in an extra button on the right, there's meant to be a gap to the right of the last right button.

Make a simple selection using the circular marquee tool. Before I forget, save your work.. :P

Open up the blending options! =] Outer Glow:

B&E:

Gradient Overlay:

Stroke and press OK:

Should look like this:

It's duplicating time!

Now lets add some text to the buttons. Grab the text tool, I used a font called "Ethnocentric", it's available in our font section (high tech category). Use your knowledge of simple gradient overlay styles and a simple stroke to produce something similar to below:

I decided to add a bit more detail, I added a simple pixel pattern by making a layer below the header file. Click to enlarge to get a best view, this step isn't necessary but it looks good. I then added the text " :: Site Map ::" to fill the right hand space. Again I used a font in our font section (pixel category).

Now hold CTRL and click the "header base" layer. A selection should be made:

Hold ALT, grab the rectangular marquee tool and cut half the selection. Make a new layer and grab the gradient tool, make a gradient similar to below:

Set the blending mode to "overlay" and opacity to 46%. I then added some finishing touches to the header, as you can find in the below image (enlarge it). This is your chance to add anything extra like I have done. Ok, 38 steps just for the header.. i'd suggest you take a long break :P like i'm about to do (tutorial writing like this doesn't extremely motivate me, especially the size of this one so far!).

We will now progress and make the header into separate images and begin the HTML layout code. Make a selection around the header (exactly around the header, zoom in to make it easier). Once selected go to [ Edit > Copy Merged ] and paste it in a new document.

Your new document should now look like below.