Header Design

Step 1.

Start a new document that is: 770 x 150 and fill the background layer with: #A7A78B

Step 2.

Create a new layer. With the rectangular marquee tool, make the following selection:

Fill this selection with: #859B50

Double click this layer, and apply the following blending options:

Gradient Overlay:

Result:

Step 3.

Next set your foreground to #DDE3D5, get out the pencil tool and change the size to 3 pixels:

and draw the following line all the way across the page:

Step 4.

Create a new layer, and with the rectangular marquee tool make the following selection for the navigation buttons:

Now go to "Select->modify->smooth" with a setting of: 11 pixels

Fill this selection with: #DBDAC8

Double click this layer, and apply the following blending options:

Inner Glow:

Gradient Overlay:

Stroke:

Result:

Step 5.

Next add the text to your buttons. Here's what I used: Verdana Bold, 10 pt, #6F6A64

Step 6.

Next get out the pencil tool again, set it to 2 pixels, and your foreground to white (#FFFFFF)

And draw small dividers between each of your buttons:

Step 7.

Next set your foreground color to #511424 set the pencil tool to 1 pixel. We're going to make some small arrow icons under the buttons.

Zoom in real close by pressing the CTRL and the '+' key on your keyboard to zoom in good and close. Using the pencil tool draw this arrow one click at a time.

There's 1 dot on top, 3 dots in the second line, and 5 dots at the bottom of the arrow.

Result:

Step 8.

Next I applied the logo and company name in the top left corner of the header.

At this point the layout is pretty much done, just continue to refine and add some details. Here's how mine ended up looking after adding a little content, and a "Tech" image.

Click to enlarge

I hope you've enjoyed this tutorial, and that you've learned some new tricks & ideas.