WebHost company header template

Rate this tutorial:
  • Currently Note: 3/5
  • 1
  • 2
  • 3
  • 4
  • 5

Tip: Check Your works at least on three most popular browsers.

opera msie

This tutorial will show You how to create WebHost company header.

Create new 770x200 px document and fill it with #aac8da color. This will be our future Hosting Company header space.
Now we have to find good image for our future work. Good place with lots of nice images is sxc.hu. I've picked this image:
http://www.sxc.hu/photo/202295
(You have to register but it's FREE and realy worth of it).
Place this image on New Layer and using Free Transform (Ctrl + T) (holding Shift for proportions) place it like on image bellow.


Place image


Add a Layer Mask to our image. Then using soft large brush we have to feather left site of this image with our background. You can find Layer Mask in Layers Pallete (bottom). Make sure that after adding this mask, You have it sellected. Black brush - erasing image, White - restoring.


Layer Mask


Now let's make a place for logo and slogan for our Hosting Company header. Use Rounded Rectangle Tool (U) with 5px radius and white color, and draw a shape like this on New Layer.


Logo space


Apply Blending Options for this layer, and after that, use Move Tool (V), and using arrow keys (on Your keyboard) move this shape 1px up (to hide top stroke).


Blending options


Now we can add some text and logo. Logo is just standard photoshop shape which You can get using Custom Shape Tool (U).


Hosting Company logo


Now the menu buttons. Again use Rounded Rectangle Tool (U) with white colour and draw the button.


button


It's time for verry useful end nice photoshop "trick" which will make our work much faster. Click right mouse button on our logo background layer, and select Copy Layer Style, then click on our button layer and select Paste Layer Style.


style copy and paste


Add text. Use #566882 color.

Hosting text


Now duplicate button layer (Ctrl + J), and move it right. Make it twice more and add text on those buttons.


Hosting Company buttons


Time for right side. Draw another white shape using Rounded Rectangle Tool (U), and again Paste Layer Style for this layer (this same which we pasted for buttons). We will add icons there.

Icons: hosting icons  home icon  mail icon


icons


Now let's make two more buttons on right site. Again Rounded Rectangle Tool (U) and draw Two shapes on two separate layers, paste this same Layer Style, and use this same font as for menu buttons.


Another Hosting buttons


Last thing will be some more text. I've used two colours: red (#ff0000) and #566882. White 3px outside stroke was applied too.

text settings


Final result - Hosting Company header. (Click to enlarge)


Hosting Company Header

Comments

ecks

2007-11-20

simple and nice
i like it

Sajid

2007-11-21

Very nice...I made it :)

pratham

2007-12-17

fantastic

pinky

2007-12-17

too bad i dont liked

sai

2007-12-18

i think that's too simple ;)

cadas

2008-01-01

cadas my man

Arvind

2008-01-24

Really Really a simply work

Troy

2008-03-02

As somebody who used to review free hosts, I think it's funny that all the free host headers seem to look the same. Maybe more people are reading this tutorial :)

satish

2008-05-07

very intersting

kole5

2008-12-22

HVALA!!Thanx!!