Header for Web Hosting Layout
Learn the basics of making this clean style web hosting header with navigation.

author:
  Ryan
title:
  Header for Web Hosting Layout
date:
  Tue 23 November 2004
category:
  Web Layout and Design
credits:
 


New Document

Make a new document, I used 700x200. Press CNTRL+D to reset your pallete colors. Start off with any color of background, I used white.





Use Marque Tool

Starting with the Rectangular Marque Tool we want to make a selection like below:
Make a new layer. Now fill in this selection:





Apply Blending Options

Apply these blending options to this bar layer:






Now you should have something like this:





Use Selection

Make another new layer and make a selection with the Rectangular Marque Tool like below:



Fill it in with your desired color. I used a nice dark blue:


Apply a stroke style to this layer.


*NOTE* You want to align all the white lines so everything lines up perfectly! So nudging of the layers will help you straighten everything up.



Edit Color

Make another new selection like below:


Make another new layer. Now fill it in with your desired color. I used a medium dark grey.
Also apply the same stroke style to this layer aswell!



Add Background Graphics

Now make a new layer just above the white background layer. Use this layer and drag in other work and other headers you have done that you can use in this tutorial. Or you can design your own graphic again without using your other resources. This is what I came up with:


It is best to try and search google for hosting server images on white backgrounds and then just take the white away :D.



Create Buttons

Now using the Line Tool we want to make some lines in the navigation (buttons).Make the line width 1px. Also make a new layer before making the line!


Keep duplicating this layer and make more buttons:


Notice the lines werent all setup right and theres a half small button at the bottom. Try and fool around to get the buttons almost perfect size:


Now that I fixed my button problem lets move on! :D



Insert Logo

This is the part where I leave you to do the rest with your imagination! Well and ofcourse inspiration of my final effect :D. Now add your logo to the left and your hosting company name and bam you got yourself a nice clean header. This tutorial was inspired by a template featured on Template Monster. I just wrote on how to do the navigation layout like the TM template i saw. Rest is all me baby :D



For questions and help regarding this tutorial,
please post a message at the forums.
Want your link here?