Can’t get that header navigation the way you want? Well I’ll explain you how to create a simple and effective header in a few steps which won’t take long to understand.
This is what we’ll get in a few moments.

Step 1, header image

So we start off by making a document. I’m creating a 800×600 resolution, but ofcourse you use whatever resolution you to think is best for your website. Pick a color and fill your background layer. I used a light gray color, #ececec. We’re going to make a Guide-go to View > New Guide…-and fill in the following options. It will be clear in just a sec why this could be handy.

I set a dark blue color (#15396f) in my foreground color and pick up the Rectangle Tool (U). Simply drag your rectangle from above the document to the guide. As you’ll see, it will directly snap onto the guide.

If you’ve done that you can make the guide disappear again by switching of the Extras (View > Extras), or simply Ctrl+H (Mac+H). Add a little shadow underneath the rectangle. Go to the Blending Options of the layer and fill in the following options on Drop Shadow.

Set a lighter color in your foreground, I picked a light blue (#3376d4). Get your Gradient Tool(G) and pick the foreground color to transparent gradient.

Create a small gradient somewhere in the middle of your document. We’re going to free transform (Ctrl/Mac+T) it, so we’ll get a gradient on the header. And than mask it. Hope these images will make some things clear.

Transform

Select, holding Control (Mac) and click the vector mask of the shape.

Mask

You can also copy the vector mask from the Shape layer, just hold alt while dragging the mask from the shape layer to the gradient layer.

Masked it will look like this

Step 2, header text

Take your Horizontal Type Tool (T) also known as the Text Tool and a white color in foreground color. I used Myriad Pro on 24pt and a Smooth anti-aliasing.

I added a few Blending Options to make it look like the real Photoshop logo.

Step 3, home button

Put your Guide back on (Ctrl+H). Make a small rectangle where you’ll text of the button will fit in.

Get the Fill Opacity on 0%.

Do a Gradient Overlay and drag the gradient a little away from the rectangle like this.

Pick your Text Tool (T) again and set the following options. Verdana on 10pt, None Anti-Aliasing and a gray color for example #a1a1a1.

Use the Alt key and your left and right arrow to get always 1 pixel between a letter.

Step 4, more buttons

Duplicate the gradient-shape and the text layer. Drag it away to the right where the home button stops and change the text to -for example- ‘about’. Select from the left of the button to the front of the text with the Rectangle Marquee Tool (M) and drag that selection to the end of the text. Pick up your Direct Selection Tool(A) and pick up the anchor points of the shape with the gradient at the right, move them until they hit the end of the selection.

It all looks difficult, but it really isn’t. Just repeat step 4 until you think you’ve got enough buttons for your website.

Step 5, highlight a button

You can do this by simply making a white 1 pixel line on the top of a button. Pick the Line Tool(U).

And this will be the result if you’ve done everything correct!

Hope you enjoyed. Don’t forget to Digg it, tag it with del.icio.us or Like It with StumbleUpon!