Taking Control of Your Blog Design with a Header Image, Part 1

By Tom Collins

Back in January, I had the good fortune of connecting with pet blogger Deborah Flick, first via Twitter about the Twitter widget and then over at her Boulder Dog blog. We got into a discussion about the attractive photo she then had as her header image, which turned out to be an image from her Wordpress theme. By the time I visited again, Deborah had replaced the header image with a spectacular winter scene she photographed herself here in sunny Colorado:

When I complimented her on the new header, she mentioned wishing she could have included the part with her dog running toward her, "but, cropping to fit the dimensions of the header forced me to cut them out ;-( "

At the time, I replied how she could have "fudged" the photo to put the dogs back in. When she wrote, "Thank you for the suggestions! I wish I knew what to do with them. :-)" So I volunteered to do another tutorial. Deborah kindly agreed to be my "example" and sent me the original image. But as you may have noticed, the BlogPaws Team has been a bit preoccupied with BlogPaws 2010! 

I couldn't wait any longer, though, so here's how I "fudged" Deborah's original photo to put the dogs where they belong, front and just a bit off-center ... 

Here's the photo Deborah started with:

All I did was select the part of the photo with the dogs, using the "marquee" tool in my Adobe Fireworks image editing software:
 

Then I copied that section and pasted it onto a copy of Deborah's header image. Using the "eraser" tool, I feathered the upper left and right corners of the pasted-in dog image to let the underlying edges of the snowy path show through and here's the result:

Before

After

Now, before you say you don't have Fireworks, or Photoshop, or the skills to use them, in Part 2, we'll explore an alternate method to accomplish a similar result with tools and skills just about everybody has. Then, in Part 3, we'll look at a range of free or inexpensive image editing software that can enable you to produce results anywhere in between — and a little bit about why I think it's so important for bloggers to acquire these kinds of digital communication tools and skills.

Comments

[Aneil]

Great tips Tom! Along similar lines, if you are looking for some really easy customization and options for your blog I recommend the wordpress Thesis theme. Unfortunately, they do charge for it but I have found the functionality to be quite useful. Its also got some killer SEO features built right in. And no, I'm not an affiliate. :)

[Marg]

That will be great information. I would really like to know how to do all that.

[Yvonne]

What's a marquee tool? Is there a way to see these 'tools' in a grid or image? Is this tool only good with Fireworks? Just wondering... love all the tips and tricks, but need a bit more explanation. Thanks!

[Deborah Flick]

Hello Tom

You're right! I don't have Fireworks or Photoshop or the skills to use them :(

So, I definitely look forward to your next installment ;)

I love seeing Sadie and Romeo in the header and can't wait to try your upcoming suggestions.

Thank you so much.

[Twinkie]

Love the information.
Twinkie

[twitter.com/Tom_Collins]

Hi Aneil,

From all accounts, Thesis is a great add-on to WordPress. But that's exactly why I love TypePad so much: all the SEO and a vast array of features are built right in, constantly being tweaked and improved, and part of the monthly hosting.

Thanks for stopping by,

Tom