Saturday, August 22, 2009

Neat & Simple Website Header Tutorial

The header plays a vital part in a website, because it's where the Logo, Main Menu & other essential components of the blog/website are placed. It's what the visitors notice first, and its aesthetics create the initial impression of what your website is about. In this tutorial, i'll share some tips on how to create a neat & simple header that's suitable for both corporate and personal websites.

1. Create a new file, then add a new layer (Ctrl+Shft+N) name it Base.

Click the Rounded rectangle tool (U), and the settings should be the same as the ones highlighted below. Then Create a rectangle with the appropriate width.

2. Right click on the Layer & select Blending Options, or just double-click. Then check the options for Gradient Overlay & Stroke, below are the settings:

3. Create another Layer on top of the Base layer (name it Highlight) and Select the Ellipse Tool (U).
The ellipse will serve as the highlight of your base layer. Make sure the settings are the same as ones highlighted below:

Set Blending Mode to Overlay and Opacity to 30%. Right-click on the Layer and duplicate it, Select the Move Tool (V) and tilt the duplicated layer, do this one more time and you should end up with something like this:
4. Create another Layer and select the Rectangular Marquee Tool (M), and make a rectangle that covers 3/4 of the base layer .

Select the Gradient Fill Tool (G) and choose the Black&White Gradient. Click on the middle of the marquee & drag it downwards, after that set the Blending Mode to Overlay.

5.Place the Logo on the left side, select the Text Tool (T) and type the contents of your menu. Right-click on the text layer and click Blending Options, check Outer Glow and copy the settings below.

6. Create another Layer for the input field, select the rounded rectangle tool & make a search field. Take note of the settings below, make sure your foreground color is White.

7. Again, create a new layer, choose a light foreground color (i chose yellow), You'll just need to create a smaller rectangle for the Search Button, right-click on the Layer & copy the settings below:

8. As a final touch for the header, I used the image below and blended it with the Base Layer, make sure the image is placed on top of the Base Layer and below the other Layers (Highlight, Text & Search Field).

Determine a good placement for the image and set the blending mode to Luminosity.You should get an effect similar to the one below:

9. Just trim the edges by using the Eraser Tool (soft brush).

And now you have your very own sleek header!


Post a Comment

Blog Widget by LinkWithin Your Ad Here