This is a very easy trick that anyone can implement. It takes only some image editing, a little bit of attention and patience and some template files editing.
1. You realized your blog needs a header image
A header image means branding. It speaks to your readers in a symbolic manner. Readers land on a page of your blog, see the image, interpret it and associate it with the information you provide. The result is a rich cognitive experience; ideally, it should be like watching a beautiful documentary.
2. Determine the image’s width (and height)
Before creating your header image, you need to know how wide it should be. First, you’ll need to look into header.php template file and spot the header’s selector. Ususally, it is <div id="header">; it might also be <div id="logo"> or <div id="banner">. (NB Some theme authors use class selectors instead of an id, soyou might find something like <div class="header">.) After having identified the selector, look into style.css file and spot it. If it’s an id, it looks like #header (it may appear inside of an expression such as (html) body #wrapper (or #container) #header (or #logo / #banner). Then look for the width declaration (for instance width:940px;).
There might be ne width declaratioon associated with the selector. In this case, you should check if the element’s width was determined by some other selector. This is the case for many designs based on a grid. So go back to header.php and see if there’s another expression after the header’s selector, e.g. <div id="header" class="grid_16">; this means that the element’s width is declared by the class selector, so, in style.css, look for something like .grid_16 { width:940px; }.
It this still ain’t the case for the theme you use, then the header’s width must be inherited (if it’s true, you’ll see a display:block declaration under the header’s selector), so check the header’s parent’s width (generally, it is # / .wrapper or # / .container).
Ok, now you’ve determined the width. What about the height? Some themes declare a height for the header, but most of them don’t (unlike printed pages, a web page can virtually be infinite). Even if there’s a height declaration, e.g. #header{width:940px;height:160px;}, your image dimenssions don’t hav to comply to it. But if you intend to create a higher image, don’t forget to modify the declaration in the stylesheet, or even deete it). Otherwise, if the selector has an overhlow declaration, the browsers will “cut” the header image.
Practically, the main constraint regards the width of your image. Acording to the type of blog you run, the image may be smaller or higher. There was / is a full screen header trend (Matt’s blog is the most beautiful example), but this type of image won’t be suitable for any kind of blog. If your blog is personal, or about an artistic project, a design portofolio or about a product that needs to be branded, then a full screen header i a very elegant way to catch the reader’s attention. But if your blog provides larga amounts of information or calls to some action, then the header image should be moderately high. You’ll just need to find the right proportion between the branding necessity and the usability (in our documentary analogy, ballance the beautiful images and the information you offer).
I insisted on this matter because a web page is perceived as a whole, so it’s elements must fit together.
3. Create the image
I said, in the beginning of this article, that a header image speaks in a symbolic manner. This is the most important thing you should remember. It doesn’t (quite) matter whether you’re a Photoshop / Corel Draw / Illustrator / GIMP / Inkscape master or you only use Microsoft Paint; just express yourself or spread your message. Of course, being familiar with a powerful image editing software is desirable, but, if you’re not, you could try to get satisfactory results by other means. I know people who create images using Word documents (screenshots) and Paint; others use Powerpoint. Although it is unusual, I think it’s a good practice, for it will help you develop a visual taste and will eventually make you wish you’d have better image editing skills.
So, to conclude this section, the header image creation process should be determined by three axes:
- a semiotic axis, your message to the world; the image will say something about you or about your blog;
- an artistic axis, the visual form of your message;
- an architectural axis, the smooth integration of the image into the layout; this axis transcends the image, but you should also remember to keep a ballance within the image.
4. Add the clickable header image
At this point, you have a proper header image. First, you’ll need to publish it somewhere on the web, preferably on your blog. If you’re not comfortable with using CPanel (or any other software your hosting provider chose to give you access to the server), just use the WordPress inbuilt image uploader. Create a new post, upload the image (you don’t need to write anything), copy the image’s url (it will look like http://www.example.com/wp-content/uploads/2009/05/header.png) and press the “Save all changes” button.
Upload a header image
Now let’s write the HTML that will display the image:
The next step: making the image clickable:
NB Please remember to replace the example urls with the actual one, set a proper alt tag and provide the actual values of the width and height tags.
Finally, insert the image. Edit header.php and spot once again the header’s selector. You’ll probably see something like this:
<h1><a href="<?php echo get_settings(‘home’); ?>"><?php bloginfo(‘name’); ?></a></h1>
<h2><?php bloginfo(‘description’); ?></h2>
</div>
NB The headings and even the code may vary; this is only an example.
Select the two PHP lines (the ones beginning with h1 and h2, or with h2 and h3 in other themes) and replace them with the clickable image code we’ve already written. For SEO reasons, you might want to nest the code inside of a heading. The final code should look like this:
<h2><a href="http://www.example.com/" title="some title"><img src="http://www.example.com/wp-content/uploads/2009/05/header.png" alt="your blog name or some words describing it" width="960" height="200" /></a></h2>
</div>
and that’s almost it. Your blog’s header image is now visible and clickable.
5. Clean the image’s look and get a consistent feel
There are very good chances that your brand new header image had an odd border (in IE6 it’s really ugly). To get rid of it, edit style.css and add this line:
Save. Refresh. The border is gone.
Now take a very attentive look at the overall result. Not just at the header, but at the entire page. See if the theme’s colors fit the image’s colors. If they don’t, you should use a tool that generates color schemes from an image Color Palette Generator is a nice one, but you can find plenty on the web). Now, that you have a consistent color scheme (provided you have used matching colors when creating the image), you can modify the colors of your blog’s theme.
PS I should also write a tutorial on how to set a backgroun image for the header of your blog.
Published on the 22nd of May, 2009, in tips and tricks · Print
Share this article