Professional header design  for your website

Professional header design for your website

Torn paper effect with the RSS feed button design

This part of the header design tutorial is optional and it’s up to you if you want to include it or not.

Using the technique you learnt in the torn paper effect tutorial, apply it on the right side of the header.

The following images will show you what selections you should do, what colors are the layers and what effects to apply on each layer.

top paper effect selections

The effect on the bright layer (the layer you made first) is inner glow:

inner glow

base color of layer number one is #f7f2e6.

base color of layer number two is #ac2a2a.

end result for this step should be around the following image:

how to design a header- result till now

Final touch ups for the whole header design

for final touch ups in headers design, I really recommend to do the following steps:
Choose the single row marquee tool, zoom the window to about 1000% (press on Ctrl and + to zoom - Photoshop cs3 only) and click 1px above the black pages bar layer.

single row marquee tool

then, open a new layer, set the foreground color to #e6e0d5 and paint the selection with the paint bucket tool (G).

single row marquee selection

duplicate this layer and move the duplicated layer to the top of the red pages bar layer.

set the opacity of the duplicated layer to 20%.

single row marquee selection

For the final result, add some text, rss icon image (simple google images search will bring you that) and simple reflection text.

Here’s my final result:

nice-looking and professional header design

If you liked this tutorial, then please stumble and Digg this page.
Thanks, TutorialsHot admin.

12 Responses to “Professional header design for your website”

Thanks, I know nothing about Photoshop and I just needed to make a header for my new website bestofmoney.info and others to come !

Comment by bestofmoney.info on February 3, 2008 @4:18 am

Hi, great tutorial however when I got to the part to select feather 20px wouldn’t let me select 20 and got an error “No pixels are more than 50% selected. This selection edges will not be visible” I tried changing the feather to 15px got the same error, finally tried with 10px and worked but couldnt achieve the expected results.
Thanks

Comment by Paula on February 19, 2008 @3:56 pm

Paula - the solution for your problem is quite simple- make a bigger selection with the 20px feather.
It will work fine

Comment by TutorialsHot Admin on February 24, 2008 @2:39 am

Hi, i am new to photoshop and i have a question, is there any difference when doing this tutorial using photoshop cs3 and photoshop cs2?

because my one is photoshop cs2..

thanks.

Comment by team83 on February 29, 2008 @3:11 am

[...] Read the article. [...]

Comment by Design a professional website header on March 21, 2008 @11:20 am

Hi, thanks for the tutorial…I am learning to develop websites. Could you tell me how each of the tabs (like Home, About Us, etc.,could be made “clickable”, when I use it in my web layout? Thanks a lot!

Comment by Prasitha on April 22, 2008 @6:40 am

Great effect

Comment by Micky on May 21, 2008 @3:04 pm

Its nice..

Comment by Vignesh on May 29, 2008 @1:40 am

really cool piece of tutorial. hope to see more. thx!

Comment by decimus on June 26, 2008 @3:41 am

I get stuck on the “(feather - 20px), make a selection like the next image and then paint it in the same red color you used for the pages bar layer.”
How do I paint that circle I just created with the elliptical marquee tool?

Comment by Greg on July 19, 2008 @11:27 am

[...] Professional header design for your website [...]

Professional Header Design Tutorial…

This Photoshop CS3 tutorial will teach you how to make a nice-looking and professional header for your website easily.
……

Comment by AllTuts on October 2, 2008 @12:33 am

Leave a Reply