Professional Header Design for your Website

Background design

First of all, you need to create a new photoshop document. copy the values exactly like shown in the image below:

Next thing you should do is the background header design.

It will be quite easy. go into the color picker window for the foreground color and set the color code to #e6e0d5.

Then, go again to the color picker but this time for the background color. set the color code to #cec5af.

Now, go to the filter menu from the top bar, render and then choose the clouds filter. the foreground color and the background color MUST be set as shown above so you'll get the result like here (resized):

(note that this result can be achieved also by playing around with the burn tool and the dodge tool).

Pages bar and buttons design

Choose the rectangular marquee tool (M) and make a new selection of the pages bar.

Make sure that the Feather value is 0px and the it's a 'new selection' (see next image).

Open a new layer (Shift+Ctrl+N - photoshop cs3) and paint the selection in black (#000000) using the paint bucket tool (G).

Open again new layer (Shift+Ctrl+N - photoshop cs3), choose the rectangular marquee tool (M) and make a new selection but with a bit smaller height. paint this selection in red (#ac2a2a) using the paint bucket tool (G).

Choose the rectangular marquee tool (M), make a new selection that will be on hover state live on web.

Now choose the gradient tool (G), copy the exact next values and pull the gradient line like the following image:

Open a new layer (Shift+Ctrl+N - photoshop cs3 version only!), choose the elliptical marquee tool (M), copy the values of the top bar from the image below (feather - 20px), make a selection like the next image and then paint it in the same red color you used for the pages bar layer.

Change this layer mode to multiply.

Choose the rectangular marquee tool (M), set the feather value to 0px, then make a new selection and press Delete.

Create a clipping mask using the shortcuts 'Ctrl+Alt+G' (works only in Photoshop CS3).

One more possible way to create a clipping mask is to go to 'layer > create clipping mask'.

*make sure that the multiply layer is on the top and the red pages bar layer is one layer below it before making the clipping mask.

Now, duplicate this layer two more times (left click on the layer > duplicate layer).

The result till this step should be like the following image:

Torn paper effect with the RSS feed button design

This part of the header design tutorial is optional and it's up to you if you want to include it or not.

The following images will show you what selections you should do, what colors are the layers and what effects to apply on each layer.

The effect on the bright layer (the layer you made first) is inner glow:

Base color of layer number one is #f7f2e6.

Base color of layer number two is #ac2a2a.

End result for this step should be around the following image:

Final touch ups for the whole header design

For final touch ups in headers design, I really recommend to do the following steps:

Choose the single row marquee tool, zoom the window to about 1000% (press on Ctrl and + to zoom - Photoshop cs3 only) and click 1px above the black pages bar layer.

Then, open a new layer, set the foreground color to #e6e0d5 and paint the selection with the paint bucket tool (G).

Duplicate this layer and move the duplicated layer to the top of the red pages bar layer.

Set the opacity of the duplicated layer to 20%.

For the final result, add some text, rss icon image (simple google images search will bring you that) and simple reflection text.

Here's my final result: