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

In this second part of "Make a (Better) Banner for Blogger", I'll cover the creation of the background as it is the simplest to create and understand.  Also, you may only want a banner that extends beyond what Blogger allows width-wise.

Preparation and Decisions:

Software:
I'm using GIMP which is free to download and a truly wonderful program.  You can also use Photoshop, Inkscape, or any digital imaging software that uses layers.

Template:
You need to use the Simple Template as it is the only one that doesn't have browser resizing issues.  In your Blogger Dashboard, go to Design -> Template Designer -> Templates -> Simple, and select the all white one.  Click Apply to Blog.

Click for bigger.

Blog Width:
You will need to set your blog width to what you want.  Mine is set to 900px, so that is the width I will be using in this tutorial.  While in the Template Designer, go to Adjust Widths and either enter the width you would like in the text box or use the scroll.

Click for bigger.

Height:
You will have to determine how tall you want your banner to be.  An ideal range is between 250px and 500px in my opinion.  Any smaller and it's hard to instantly know where you are.  Any larger and it detracts from the meat of the blog.  I personally like banners somewhere between 350px and 450px high.

Creating Visual Guide Layers in GIMP:

Open GIMP and go to File -> New.

Enter the dimensions you want and click OK.  The entire width is what some people will see depending on their monitor's resolution.  I'm using 1280px because that's the resolution of my monitor and because monitors are getting bigger with higher resolutions.

Create a new layer and label it "Blog Width".

Using the Rectangle Select Tool in the layer labeled Blog Width, draw a rectangle on the image.  In the Rectangle Options, alter the dimensions and position manually.

• The width needs to be the same as your blog width (900px).
• The height needs to be the same as the height of your image (450px).
• The x-position needs to be the width of your image (1280px) minus the width of your blog (900px) and divided by 2 (=190px).
• The y-position needs to be 0px.

Click for bigger.

Using the paint bucket tool and fill the rectangle selection.

Click for bigger.

Alter the opacity in the layers window to 10-20%.

Click for bigger.

Ok, so I didn't do this next part but should have...

The Blogger Bar at the top of Blogger Blogs is 30px high.  Anything within 30px of the top of your image will be hidden or obscured.

Create a new layer and label it "Blogger Bar".
Using the Rectangle Select Tool in the layer labeled Blogger Bar, draw a rectangle on the image.  In the Rectangle Options, alter the dimensions and position manually.

• The width needs to be the same as your image width (1280px).
• The height needs to be 30px.
• The x-position needs to be 0px.
• The y-position needs to be 0px.

Using the paint bucket tool and fill the rectangle selection.
Alter the opacity in the layers window to 10-20%.

Click for bigger.

Creating and Finalizing the Background/ Banner:

Insert graphics and text into their own separate layers.

Click for bigger.

When everything's arranged how you'd like it to appear on your blog, make the Blogger Bar and Blog Width layers invisible by clicking on the Eye Icons next to the layers.

Click for bigger.

Save As.

Click for bigger.

And there you have your new Blogger Background/Banner.

Click for bigger.

However, you aren't entirely done just yet - you still need to create the official banner to meet Blogger's demands which will be explained in Part 3.

Stay tuned!

---

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

---

Got questions about this part? Let me know!  I might have glossed over important steps without realizing it.