This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Sunday, March 9, 2008

How to design a sexy header for your site using CSS

Yesterday I received a lot of positive messages about the new template of my site. Expecially for the new header (in particular the green bar on top of the page). Some of my readers asked to me to dedicate a post about how to realize a similar "graphic composition", so I decided to publish a post with the "process" I use in general to design graphical sections for my web sites.

First approach: be simple.
The most important rule is: be simple. Avoid complex CSS structure beacuse in most cases it is not necessary. Woork header is composed from three DIV elements:

- Logo layer
- Navigation bar
- Green site introduction section

Each element has a fixed width but how navigation bar and site introduction section fit the page size. So you need other two liquid layer (width=100%) which will contain your navigation bar and introduction section. You can schematize this layout in this way:



Another solution to avoid container layers is applying a background picture to the <body> section using css, but I prefer working with pure layer instead of images to have more control on the design. In fact if you use a background image for the body, if you decide to change for example height or color of the navigation bar you have every time also changing the background image.


Design the header with Photoshop
A good practice is trying to design first your header in Photoshop to have an idea about how it will look. Replicate with Photoshop the header structure and choose some colors for its elements until you are not satisfied for the result:


When you think your header is ok you can start to convert the picture into HTML and CSS code. Before you leave Photoshop, create an image to apply to site introduction section background. This is a small image like this:

HTML and CSS code
HTML code for your header is very simple:

<div id="logo"></div>
<div id="navbar-container">
<div id="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<!-- Other links here...-->
</div>
</div>

<div id="int-site-container">
<div id="int-site">
</div>
</div>

... and CSS code is:

/* Reset Body Property */
body{border:0; margin:0; padding:0;}
#navbar-container{background:#000000;}
#int-site-container{
background:url(img/int-bg.png) left top repeat-x;
height:166px;
}
#logo, #navbar, #int-site{
width:800px;
margin:0 auto;
}
/*------------------*/
/* LOGO */
#logo{height:54px;}

/*------------------*/
/* Nav Bar */
#navbar{
height:26px;
line-height:26px;
}
#navbar a:link, #navbar a:visited, #navbar a:hover{
color:#FFFFFF;
font-weight:bold;
margin-right:20px;
text-decoration:none;
}

Create Rays of Light for introduction section background
To improve the look of my header I choose to add a background with a simple graphical element: some rays of light. To create this effect, create a triangle using Photoshop Pen Tool. Copy this object and rotate the new object of 20 degrees (set the rotation point to left-bottom):


Repeat this action until you designed a semi-circle. Select all element and create a smart object (selecting all "ray of light" layers and clicking on right mouse button -> create smart object). Then create a selection on the orange background and paste into the selection the smart object with your "rays of light". Set the Fill percentage to 19% and apply Color Burn filter to "rays of light" layer. The result is like this:


...and now free your creativity adding graphical element to your site introduction section. On my site I chose a simple typographic style adding a tag cloud of the main topics which my readers can find on woork.


If you are looking for nice fonts to download for free, I suggest to try on dafont.com, a great resource to find inspiration and all fonts you need.
Now, last step, add the image background you created into your CSS code:

#int-site{background:url(img/site-intro.png) left top no-repeat; height:166px;}

It's all!

Download to see the result

I hope this post can help you to find inspiration from "simplicity" to design your site.

blog comments powered by Disqus
Jabba said...

#int-site{background:url(img/site-intro.png) lef top no-repeat; height:166px;}

i didnt try this, but i think this is error: "lef"

Anonymous said...

Your posts are so simple! Pure GENIUS!!! Thanks for sharing your knowledge.

Antonio said...

@Jabba: thanks! Fixed!

Peter said...

Ver nice!

Anonymous said...

Pretty good, but it's better if you use text-replacement techniques so that the header doesn't just have a meaningless, textless div but an actual header for the title of your website.

Ann said...

Very cool. I'm a developer, not a designer, so posts that demystify Photoshop are always a pleasure. Thanks!

slacko said...

grazie, molto utile

Jermayn said...

Nice tut and I quit elike your header as well, its different which is always good in a medium were it all tends to be the same. Good on ya!

n/a said...

Excelent!

Can you share the .psd file? Ant name the font name?

Thanks

brian said...

for the text replacement suggestion..

couldn't one just add a separate div#txtr with all the same graphical text typed out, then:

#txtr { position:absolute; text-indent:-9999px; } ?

Or does google penalize this sort of thing?

Anonymous said...

what is the name of the typeface you use in the callout speach bubbles? (Navigation Bar) (Site Introduction)

Antonio said...

@anonymous: typeface is Anarchistic

Dennison Uy - Graphic Designer said...

Vrey nice. I was really expecting a CSS tutorial but there's a lot of really good Photoshop manipulation in the article for the non-graphic savvy folk.

Andrew Strachan said...

Excellent tutorial Antonio. I'm afraid there's an error in the CSS in the download though. The #navbar-container declaration reads

#navbar-container{background:#000000};

it should be

#navbar-container{background:#000000;}

Just so you know.

Anonymous said...

Just as a quick aside you could have used the registration point shape in Photoshop to get the rays of light much more quickly. Nice to see another way of doing it but using the PS shape tool and the default shapes that come with PS you can do this a lot quicker.

Anonymous said...

thank you very much

Shigaepouyen said...

Hello !

I like this post : very useful & very simple !!

Have a nice day,

JC.

punyaNEWBIE said...

oh my god, i very like ur post and it's really simple. wow...

Adilson said...

Bravo! Lupetti,
Well done.
All are very nice and very usefull.
Auguri, Adilson, Brasil

Anonymous said...

Download not working on display demo

Anonymous said...

someone said: "Your posts are so simple! ..." I think that's because people advance to easy at other platforms or language codes and dont pay to much attention to the details. Your post are so clean, I'm amaized. Good job! keep it up!

Sergiu Naslau

ps: nice job with the woork handbook (maybe you would be intrested into a collaboration in the future)

Neha said...

Can you tell me the name of the two fonts which you have used on orange header.

Rahul said...

This is really good header tutorial. I think you should also do the "how to make a sun burst" too. That also should do quite good.

allwyn said...

hey thanks a ton for posting this.. I havent read the post yet but its just wht i was looking for ..i.e creating a sexy header ..u have no idea how much i fiddled with the head for my blog using ms-paint as am not familiar with photoshop and css ..and the best part is i landed up on your site from google product ideas page where some1 suggested ur blog for blogs of note category and the sad part is i dint get ur post when searching on google for blogger header creation ...stupid of google not to include ur page there ..
thnks a lot tc and keep up the gud work!

Angelily said...

Thanks for the helpful post! I'm still at a very basic level of CSS and this was a really good, straightforward way of explain how to create a header! Thanks again!

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News