How to Add a Banner to Your Blog using Gimp and Blogger

A few weeks ago, I blogged about a program I discovered quite by accident, called Gimp. It’s a free and versatile graphics manipulation package that is quite handy if you want to create your blog banner – and I’ll be showing you how to do just that today.

I am using the Windows version of GIMP and must admit that this is my first attempt to use it (I normally use Photoshop CS3 for my design business). But it’s so easy to use that I was able to do it without any problem, although I don’t know the shortcut commands or the MAC commands. This is a fairly long tutorial, so bear with me, as it has taken some time to put together and you’ll find I’ve tried to be as thorough as I could. Just go slowly and if you miss a step or get confused, back up and read through it again. If you’re still unable to get it, try emailing me. Also, please note that you can click on each photo to enlarge it to 700 pixels if you can’t read it.

Step One: Create a New Document

Open your GIMP program and select File > New.

Most Header sizes vary between 660 and 800 pixels wide, but for training purposes, I am creating this at 660 pixels wide and 250 pixels tall to fit on my blogger test site. Click “ok” when you’ve set your banner size. On GIMP, the resolution is preset to 72px (which is best for web graphics) and RGB color, which is exactly what you want, so you won’t need to mess with the advanced settings.

Step Two: Adding a Photo

Now that you have a blank canvas, I’ll show you how to add a photo (you can also play around with the graphics/paint editors on GIMP, but to save time, we’re going to do a photo). On your blank canvas, select File > Open and you will now want to search your computer file for your photo.

Then you’ll select it:

Now your screen should have two windows open and look something like this:

Step Three: Edit and Move Image

This photo is very large at 1600px by 900px, so we’ll need to resize it and move it to our Header file. Click on the photo that you are resizing and then go to the GIMP control panel and select “Scale”:

Click on the bottom left corner of the photo that needs to be resized and a scale menu will pop up on the top – this is where you will resize width (don’t worry so much about the height, unless you want to crop some of the photo). Our Header is 660px wide and I’m not going to worry about the height, I can position it however I want on the new layer.

Once your photo is resized, you need to select it by clicking on it, then hit “CTRL-X” to cut it out of that layer, then go up to your Header layer and place the cursor in the center and hit “CTRL-V” to paste it on the Header layer. You may then use the cursor to position it where ever you like.

Step Four: Add Text

Go back to the GIMP control Panel and click on the letter “A”, which is the text editor. You may select your font, font size and color based on what your photo is. Feel free to play around with it and make it unique. One note of caution – if you have a dark photo, use a light color for your words, and vice versa if you have a white background – you need to choose something dark as it’s much easier on your reader. Be sure to check the little boxes beside “hinting” and “anti-aliasing”, as those make the font appear smooth. You may also move the location of your text by utilizing the move button as you did with the photograph.

Step Five: Saving Your File

You’ll need to save the file to your desktop or another folder for easy location when you get ready to install it on your blog. Click File > Save as

Then name your file – mine is called “blog header sample”. Note that you need to save it as a .jpeg file, then click on “save”.

GIMP will tell you that your image should be exported before it can be saved as a jpeg, so click on “Export” and then “ok”. Check your folder for the saved image – and once you locate it, you’re ready to move on to installing the header.

Step Six: Installing the Header

If you are not using New Blogger or page elements, you’ll need to choose a photo hosting site. There are plenty of free sites, but Photobucket is the one most people turn to. Simply follow their instructions to sign up for your account and then upload your photo there. Since every site is different, I can’t tell you how to do that step by step, but it’s very simple and if you encounter any difficulty, you can contact their help desk.

If you are using New Blogger, you do not have to host your new banner, you may skip that step.

Go to your Layout or Template tab and select “edit” on your header box.

Browse your computer for the image you saved earlier and select it. Click on the radial button that says “instead of title and description” – this will ensure the new banner replaces the text currently in your header. Then save.

If you view the blog now, you’ll notice the lines are still around the banner, so next we’ll need to go into the template and edit the html.

Before you edit anything, be sure to back up your template by clicking on the link that says “Download full template” and saving it to a location you can easily find again. Then, scroll down (or select “CTRL + F” for the find function and enter the word “border” and next) until you see the following:

Note the red arrows by the word “border:” and replace the “1” px with a “0” in both places to remove the borders. Save the template at the lower right hand and now you should have this:

And there you have it – your very own custom made banner – made by you for free.
Works for Me! If you think this would help others, please feel free to digg, kirsty or stumble it below.

Bookmark and Share


Look on the bright side! Subscribe via RSS.

Letting Go is Sometimes The Hardest Thing to do…

I’ve mentioned several times that Heather of Desperately Seeking Sanity has helped me keep mine through her online business at Desperately Seeking WordPress. She installs all of my WP blog headers and designs, and without her, I’d be totally lost. She’s teaching me as we go and her help has been instrumental in freeing up my mind to just create. I WILL learn WordPress, but with her helping me, I am able to take it in bite sized pieces.

I’ve recently been able to return the favor (I hope) and I designed her business cards for BlogHer and her new Header for her blog. She had been unable to decide what she wanted designwise, until I sent her the DSS business card. Apparently, it sparked her imagination and she could “finally” see the design – so we came up with this:

Which was inspired by this, her personal blogger card:

And here is her WP card:

Are you guys totally getting tired of me posting about my designs? I am moving to WordPress after the BlogHer convention, so I’ll have my domain name for the Design Blog up and running and won’t be posting as much design-wise on here. 🙂 It’s going to be “back to regularly scheduled programming” soon, I promise.

You need to know that this blog is also moving – the URL will be the same – is where you can find me both now and in the future – but you might have to update your bookmarks if you have me marked as a

Hope you’re all having a super-fab weekend. I’m heading to a swim party later today – so I’ll try and get Saturday’s Mystery Photo published before I head out!


Look on the bright side! Subscribe via RSS.

A couple of blogs I’ve completed recently…

Heather from Desperately Seeking WordPress needed a designer when Jo-Lynne was on vacation and so me? I gladly stepped in and designed this for Beth from MotherBunker. Remember the crazy subway woman header I put up a week or so ago? That was the first round – she had told me she wanted something with an “underground” feel to it. Hah! Little did she know what I thought underground was. 🙂 So after she explained it to me again – this is what I came up with – I absolutely LOVE it. (is that horrible for me to say about one of my own designs?)She was especially pleased that I had managed to work in a little birdy, my signature:

Custom Header

And remember the Adoptic blog? Here it is in its full glory – the site isn’t live yet, so as with the MotherBunker Blog, you get a preview with a blank page:

Ultimate Header


Look on the bright side! Subscribe via RSS.

Fried Okra gets a New Look!

When Megan of Fried Okra first contacted me about her upcoming blog anniversary, I was positively estatic about redesigning her blog for her.

She said that she wanted something that spoke “welcome” to her readers and suggested a porch swing or something of that nature. So, I commenced to look for a porch swing or something of that nature. (I’m so complicated, no?) However, finding a porch swing in stock photos that either did not have people already in it, or was large enough (as in wide) proved to be quite a challenge.

I sent her several shots that I thought would work (I was thinking I would just crop them down if necessary) and she picked out this photo:

Now, at first glance, I thought the photo would work – it was 819 pixels wide. What I wasn’t counting on was the thing that Megan loved most about the photo was the arched windows. Ay-yi-yi. The only way I could keep the arches was to shrink the photo by at least half, which would mean it would then be only 410 pixels wide, about half the size I needed. What to do? I had already sold her on the photo – and now it was too small. (oh the horror!)

So I manufactured the rest of the photo in Photoshop – it took a bit of manipulation, but I think the outcome was beautiful. Her eye for color and detail was a guiding force in the overall design, but she left the details completely up to me. I think it’s one of my absolute favorite designs so far – what do you think?


Look on the bright side! Subscribe via RSS.

The Headless Family of 5

When Kendra from The Adventures of the Headless Family originally contacted me about doing her blog, she told me she liked the idea of a very simple layout with a photo in the header and gave me two blogs that she liked as a reference. When I asked her to pick out a few stock photos for me to choose from, one of the ones that really stood out for me was the hand with the heart for some reason.

I liked the idea of incorporating it somehow, but wasn’t too hopeful, since she had said she wanted something basic. During our discussion, she told me that she really loved the hand and that anyone that knew her knew it would have significance, because she collects them!

So I knew right then I had to use it. The funny thing about the design process is sometimes people have a very clear vision of what they want that that’s what they get. Other times, it is nothing like what they originally wanted, but they love it nonetheless, which is what happened here. She was thrilled with the outcome – it’s fun and colorful and has personal meaning…something I think is important, because you’ve got to look at it every day. 🙂 Here’s the outcome:


Look on the bright side! Subscribe via RSS.

1 2 3 4 5 7