Step by step tutorial to implement a typographic style header using Photoshop and 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 PhotoshopA 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 codeHTML 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 backgroundTo 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.
