Professional header design for your website

This photoshop cs3 tutorial will teach you how to make a nice-looking and professional header for your website easily.

the end result is:

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: