http://northbeachnet.comA Wordpress, PHP/MySQL Web Developer's Blog

Flexible Header Graphic Design

Tuesday, September 29th, 2009 by MikeLT

Ok, I got a little sidetracked. Anyway, I wanted to talk about how I am using the graphic images in the header in a separate post because imagery is a very important part of any Wordpress theme design, and should be discussed in its own context. For me, a pretty picture is worth a thousand words, and is probably what draws us all subconsciously to examine a theme design in more detail in the first place.

A talented graphic artist can do wonders with a photo, collection of photos, vector drawings, animations, special effects and more. Stunning pictures and even movies can be made with today’s sophisticated software, predominantly Adobe’s Photo Shop and Flash.

I use Fireworks MX, and while I’ve looked at other software options, I am just more comfortable with fireworks because I’ve used it for so long. I’m not that great at graphic design and wouldn’t expect to make a living at it, but I am having fun when I do it!

Regardless of what software you use, the principals of graphic artistry remain pretty much the same.

It is beyond the scope of this post (beyond my scope too!) to get into the intricacies of Graphic Design, but since we are discussing a flexible liquid layout, it would seem to behoove us to examine the use of images flexibly incorporated into the design.

In the case of this site, I started with two images, logo.gif and headpic.jpg. Headpic is actually a collection of three images that I can move around as I see fit because I have the original .png file (this will come in handy later on).

If you will notice, the colorful background image in header.jpg (its fiber optics!) fades out as it extends to the left. The reason for this is that as the screen width shrinks, the two images are pushed together. Making the left side of the right image fade into transparency allows for the two images to coexist side by side without one overwhelming the other. This would be true even if the left side was not an image, rather the default Wordpress theme header text.

To make this work, I positioned the two images absolutely on two different layers in the CSS stylesheet. The logo is the background image of the header class, and will always be in the same position relative to the header box.

The headpic graphic however is the background image of the body, and is statically positioned in relationship to the body, or entire screen space. Note that by being on the body layer, headpic is by no means restricted to the confines of the header box, and could conceivably cover the entire display. I choose to place the image in the general area of the header.

The CSS

body {
margin: 0px;
padding: 0px;
background-image: url(images/headpic.jpg);
background-repeat: no-repeat;
background-position: 94% 20px;
}

#header {
width: auto;
height: 160px;
margin: 20px 2% 0em;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
background-position: 4% 2em;
}

When you get down to an 800 pixel resolution, I guess you could say this graphic design breaks. I’ll deal with that later, right now I’m designing for 1028 to 1280 resolutions.

There are as many ways to design headers graphically as there are graphic artists. This is just one trick I learned somewhere along the way. If any of you out there have any graphic design tricks you would like to share, that would be great!

You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.