Make a (Better) Banner for Blogger (Part 1)

This is an update of my previous post on making a banner for blogger with an explanation of how I did my current header/banner which unites the background and the banner.

---

Images Used:
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:
I'm using the Simple Template which seems to be the one with the least problems when it comes to resizing the window and everything staying aligned correctly.  The background is set to align top-middle, don't tile, and scroll with the page.  Blogger requires a banner or will insert text instead of banner, so to fulfill these requirements, I set the banner to be a 1x1 invisible pixel gif and to be used instead of a title and description.  This doesn't require editing the CSS/HTML which I wanted to avoid.  The home/about/diy image is an image map done in a HTML/JavaScript gadget at the top of the blog.

---

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.

Using GIMP, I created a new image 1280px wide and 450px high.  Then I added a layer with a centered black box set to 900px wide so I knew what would be directly over the blog content itself.  I set the black box layer to a low opacity so I could see through it.  Then I added a layer with a centered red box set to 820px wide, so I knew what I could use in the HTML/JavaScript gadget.  After adding those visual guides, I started adding the images and text that I wanted in separate layers.

---

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.

---

Updates:
Make a (Better) Banner for Blogger (Part 2)
Make a (Better) Banner for Blogger (Part 3)