Search Sites?   Want Web Forms?   Looking for Databases?   Need SEO advice?    Register | Login | Forum | Submit Tutorial

Webmaster tutorials, guides and more!

Web 2.0 Style Header and Navigation

Views Today: 15, Total Views: 74110, Submitted by: Python on 27-06-2006

This tutorial will show you how to create a Web 2.0 style header with navigation bar. This type of design can be used on a variety of types of website as it is fairly clean but is also very effective and attractive.

Ok so lets begin...

Firstly open up a new document 760px wide by 100px high. Now select the Rounded Rectangle tool by pressing U on your keyboard. At the top of your screen set the radius to 20px. Now draw the following shape - make sure you leave some room at the bottom because our navigation bar has got to go here.



Now hold down Ctrl and click on the layer called Shape 1. Go to Layer >> New Layer and call it \"header\". Now click on the gradient tool and set yours something similar to this:



Now hold down Shift and click and drag within the selected area from top to bottom. Right-click on the Shape 1 layer and delete it.

Now right-click on the header layer and go to Blending Options. Use the following settings:

Stroke
Size: 2px
Position: outside
Blend mode: Normal
Opacity: 20%
Color: Black (#000000)

Then click OK. You should now have something like this:



Now press U again on your keyboard to select the Rounded Rectangle tool. Set the radius to 8px and draw on the following shape:



Now hold down Ctrl and click on the Shape 1 layer which was just created. Go to Layer >> New Layer and call it nav. Click on the gradient tool and set your gradient to the following:



Hold down Shift and click and drag, from top to bottom within the selected area. Right-click on the Shape 1 layer and delete it. Right-click on the header layer and click on Copy Layer Style. Then right-click on your nav layer and click on Paste Layer Style.

Now using your mouse simply drag the nav layer beneath the header layer.

Now create a new layer and call it header cover. Drag this layer above the header layer. Select the rectamgle marquee tool and select about half of your header gradient. Then fill it in with white using the paint bucket tool.

Go to Filter >> Blur >> Gaussian Blur and set the radius to 5 pixels. Then click OK. Change the opacity of the header cover layer to 15%.

You should now have something like the following:



Right-click on the header layer and go to Blending Options. Then select pattern overlay.

This part is down to personal preference however im using a custom pattern which has a diagonal line through it with its opacity set at 6%. You can pick a predefined pattern or create your own. This tutorial however doesnt cover the creation of custom patterns.

Now click OK.

Select the Text Tool and click on your header. Type in the name of your website and use the Character panel to change its settings. You can also right-click on this layer and apply some blending options to make it stand out more.

Then use your text tool and click on your navigation bar. Type in the links you want. For this I have used white text.

Now select the Single Column Marquee Tool and click in between the title of your links. Make sure you have got the nav layer selected and then press delete on your keyboard. This will make tiny dividers in your navbar. You should repeat this to divide up your navigation bar as many times as needed.

Here is my final result:


Click For Full Version

And thats it.

Hope you enjoyed the tutorial!

Post A Comment

If you want to comment on this tutorial you must first register or login.