There are a total of 3 images in the header.
Image 1. The background is the holiday cactus image with "Gardening with a Not-So-Angry Redhead" title:
Image 2. The official banner is a 1x1 invisible pixel saved as a gif:
|Very small and invisible!|
Image 3. This mapped image is largely invisible with the words "home...about....diy":
Template Widths and Making the Images:
My blog is set to be 900px wide, so that determined some of the alignment when it came to making the actual images. With the Simple Template and the blog set to 900px wide, images in the header seem to only be allowed to be 820px wide, so 820px also became a determining factor.
Separating into the two main images:
To save the background, I made the layers I didn't want shown invisible and saved the image as a png. To save the home/about/diy image, I inserted that layer into a new image and saved it as a png as well. Once the home/about/diy image was saved a png, I mapped out the image using the image map feature in GIMP.
Didn't make a lot of sense?
No worries, this is a rough overview, and I'll break the steps down in future posts. If there's something specific you'd like to know more about, please make a request! Everyone's starting at a different place, and I don't want to make any assumptions.
Make a (Better) Banner for Blogger (Part 2)
Make a (Better) Banner for Blogger (Part 3)