Freepsd

In this tutorial I will show you how to create a simple web header using Photoshop.

Lests begin by creating a new document 800px by 600 px

You can do this by either file>new or by pressing Ctrl-N.

Now we have our canvas to work on let’s begin by shaping where we want out header.

Press Shift – Ctrl – N this will create a new layer

Select the Rectangular marquee tool and then set the style to fixed width 800px by 200px and select the top left hand corner of your canvas as shown below.

Now select the paint bucket tool and with the color #c0c0c0 fill in the selection as I have done below.

Now press Ctrl-D this will deselect you selection and now you will be left with the grey section that we will be working in for your web header.

I have chosen the image below to add a bit of graphics to our header you can copy and paste it into your tutorial if you like as well.

Now that we now have a nice graphical back ground we can now start to build in the rest of our header text and art work.

Lest start adding our logo and Title of our site.

Select the custom shape tool and choose your logo image you like. I have chosen the Seal for this design.

select your placements for your logo as I have done below don’t need to worry about what the fill color is as we will change this later when we optimize the logo.

Double click on the shape layer to bring up the layer styles options panel.

Click the gradient section then double click on the gradient bar and set your gradient to these colors.

Now still in the Layer Styles panel we need to select the Stroke Settings: 1px Inside and the color is #D27D00. Once you have done that click Outer Glow and leave the settings as is then click ok.

Your logo should now look something like mine below.

Now let’s add some text.

Select the text tool and choose your favorite font. mine is Century Gothic for this design. With a font size of 24pt ,color white & set to bold. Place you text just over the logo as I have done below.

Ok now let’s give the text some highlighting as it doesn’t look to good at the moment.

Double click on your text layer until the Layer Styles Options panel show up. click on drop shadow and we will use the standard setting then click on stroke 1px outside and the color is #1e58e0 it will end up looking like mine below.

In the next Section we will start to add the page links

1. johnny says:

   30 December, 2008 at 10:43 am

   Thanks for good post
2. imobi says:

   1 January, 2009 at 3:40 pm

   hello…

   not bad……
3. liger says:

   3 January, 2009 at 12:24 pm

   hi…

   agree…
4. Timur I. says:

   27 January, 2009 at 2:01 pm

   Great! Thank you very much!
   I always wanted to write in my site something like that. Can I take part of your post to my blog?
   Of course, I will add backlink?

   Sincerely, Your Reader
5. Nicholas says:

   8 February, 2009 at 11:03 pm

   Hi Timur no problem
6. Heena says:

   1 April, 2009 at 12:32 pm

   hi,

   i’ve created a header like yours. I am not a web designer I am just astudent. How do I get the links to work in the tabs.

   Thanks
7. Carlos says:

   17 January, 2010 at 12:32 am

   You ARE a Magician!!!

   Thinks so beautiful and easy to do with your help.
   Thank you very much for all