SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials Photoshop Web Layout Professional Header Design for your Website

Professional Header Design for your Website

TutorialsHot Web Layout Sep 24, 2009

Background design

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

image 1

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.

image 2

image 3

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):

image 4

(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).

image 5

image 6

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).

image 7

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

image 8

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

image 9

image 10

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.

image 11

image 12

image 13

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.

image 14

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'.

image 15

*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:

image 16

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.

image 17

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

image 18

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:

image 19

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.

image 20

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

image 21

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%.

image 22

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:

Professional Header Design for your Website

   
subscribe to newsletter