Create a Winning WordPress Header Design for $1

Thanks for asking and yes, I did just change my photo blog WordPress header design this evening! However, I do have a bone to pick with my regular readers…why didn’t you tell me the old logo stunk?

Header design in today’s world is totally over rated. People understand how important a good header design is and how valuable it is to their blog and this is why I am going to outline some very important facts telling you exactly why logo design should not cost more than $1.

Let’s face it, most of the blogs we start will end up in the far reaches of the internet, abandoned and forgotten like this year’s resolutions. However, this is just the reason why I advocate a do it yourself approach to design. No, everyone in the world is not creative, talented and skilled , but chances are if you made this far in my post, you have interest and ability in Photoshop, photography, and possess more creative flair than you probably give yourself credit for.

This afternoon, while burning a vacation day, I decided to hold an “above the fold” focus session, with myself. It’s easy to get so preoccupied with creating new content, that we fail to take care of the assets we’ve already made…this framework of the site. After printing a copy of my front page, I proceeded to Stumble’ other sites and do a side by side comparison. It didn’t take very long to realize the header design and top part of my front page were in need of some rework.

Armed with 20 ounces of lukewarm coffee and pen and pencil in hand, I began work sketching out a header design to include all the features I like in a blog post. Since I am a big tag cloud fan, why not create a tag cloud header design? Great! I had a plan and it was time to get started..

(…can’t begin to tell you how much I’ve enjoyed my new dual monitor setup I got back in October!…just had to throw that out there.)

Moving on…I had my concept of what I wanted the design to look like and now it was time to decide on what to keep from my existing “above the fold”. This part was easier than expected…

trash the tacky clip art logo…no second thoughts…
the affiliate ads which no one looks at…gone….
a menu bar and header links, too much…lose the menu bar….gone
the oversized RSS logo at the top of the sidebar , definitely too big

Now that I was clear on what I didn’t like about my old design, it was time to layout the new header. The new tag cloud design should include:

main navigational elements from menu bar; contact, about, forum, etc
also, some newer focus points; Twitter contact, email subscription, Randomizer 1.0 and a link to our “20 Awesome Photography Blogs” project
replace rectangular box header with a graphic against a transparent background…just like the way the header elements flow with the existing background in using this technique. Be sure to save artwork as a GIF or PNG…I chose PNG 24

The next step was to locate a suitable image for the design. When I need an image for a presentation or for a project like this, Dreamstime is a great place for search for affordable pictures. I selected a couple images to work with, but before deciding on which to purchase, I copied the images ( with watermark) into Photoshop CS3, and played around with them for awhile. This is was my final choice (total cost - $1):

In working with this image for the final layout, I decided to distress it a bit, so it wouldn’t appear to be too perfect. I used the background eraser tool in Photoshop CS3 to clear out the background and reduced the opacity a little to have the white pixel effect. Next, I created a layer for each tag name to appear in the header, and moved them around in search of the right balance, while adjusting font size and color. Finally, I dropped in a reduced RSS feed logo and saved the composition as a PDF and PNG.

Creating slices in Photoshop is a very straightforward process, but you need to goof around a bit first. After making your slices, and adding in the associated URLs, you’ll need to save your project. Under File, you’ll need to select Save for Web & Devices, and new screen pops up. In the upper righthand corner, you will be presented with format options…I selected PNG24 ( because I read it in an article earlier in the morning).

Once you press save, a html document and folder containing all the sliced photos (named ‘images’) will be created. At this time, you can upload the photos folder to your server. In my WordPress layout, I moved the ‘images’ folder (it’s a good idea to change the name of this folder to something other than ‘images’, since a folder named ‘images’ already exists in your WordPress structure) from my desktop to wp-includes>images folder.

Back on your desktop, locate and open the newly created html document with Notepad or whatever you use to edit page source code. Upon reviewing this code, you will note the table structure created from your sliced composition. You will need to edit the location of each “img src” to reflect the new location of your images. The location was originally set for my desktop, so I had to edit the file to accurately reflect the new server location. It sounds worse than it really is…took me all of 3 minutes. If you happen to screw up or omit one of the entries, you’ll know soon enough. Save your edit html document.

Finally, you’ll need to copy the html table you just worked on and insert it into your WordPress header file, and save. The first time I refreshed my blog, I quickly noticed that one of the images was missed. A quick review of the inserted html table code revealed I had overlooked correcting the image location. Note - do not paste the entire html document into your header file…only the table structure.

And there you have it….I really didn’t mean to create a lengthy post here, but thought you may be interested in the process of creating a simple header for your blog. Yes, I only spent $1 and a few hours tweaking, but it was a fun and always a learning experience. Since most bloggers will want to change their design several times a year, it is cost effective to learn a little about the process and try to out yourself….just be sure to make a copy of your header file before playing around. If you totally mess it up, copy and paste the old one back in and you’re good to go!

If you are interested in trying this or have additional comments or questions, please share your thoughts!