How to Make a Banner for Your Blog using Gimp (for free!)

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 share it with others by pinning the image below.

How to Add a blog banner for gimp

Comments

  1. says

    Awesome, awesome, awesome! This worked perfectly for me – thanks for posting these easy to follow instructions and for info about the GIMP program!

  2. Missem says

    Thanks for the tutorial, it was the easiest one I found. I was able to create a header within moments.

  3. Butterflyiii2006 says

    I can di ut– this tut was fantastic. Thanks for sharing it.
    It helps a newbie get used to using her Gimp program!!!
    Butterflyiii2006

  4. says

    Thank you heaps for this! I was able to create just the banner I wanted and now there’s no stopping me! If there’s anything I can do for you, please let me know!

  5. Pooja says

    Whenever I resize the image, it looses colour! What should I do??? BTW, loved the tutorial, it helped me a lot!

  6. says

    Thanks for the tutorial. I’ve finally made a banner I can live with for awhile. With a bit more practice I think I can make something really nice.

    Thanks again.
    .-= Mom2ian´s last blog ..Sweetpea Turned 1! =-.

  7. Karen says

    Alysa, So glad we could help! This is the number one search result on our website – time and time again. :) Your blog is beeeeaaautiful, by the way!

  8. says

    This was so awesome and helpful, I am a million times happier with my blog and border now, I love using Gimp to this was just perfect! Thanks so much!

  9. says

    Thank you very much for your tutorial. I have been struggling with trying to create a custom header and your step-by-step directions made it so easy. It’s not the best custom header but it’s a start!! Thank you soooo much.

  10. Karen says

    Kris,
    I’m so glad the tutorial helped you! I’ll be working on new tutorials for the future using a much easier to use (and still free) program in 2012.

  11. says

    i am so happy to have found this tutorial!! I tried for about an hour to get the image on the banner by adding layers instead of the photo, every time I resized the canvas the image cropped as well!!

    I appreciate the help!!

  12. says

    This is a great tutorials for beginners for using gimp, I would love see some advance tutorials in the future. Gimp is a lot more capable than people give it credit for, so glad you using it for your graphics, and keep up the good work :) , looking forward to your new stuff.

  13. says

    Thank you so much. I’ve been looking for info on how to do this. I will be using my Stampin’ Up! My Digital Studio program to build the banner,but much of the info you have here will help me tremendously. Is there a way to print this tutorial so I can look at it while I’m building my banner? Thanks again.

  14. says

    I am really new to blogging and even newer to Gimp.

    I have wanted to create my own title for a while, but all of the tutorials out there are so hard to understand as a beginner. But your tutorials have been extremely helpful and really the best I came across! You explain steps very well and very clear!

    I just created a new header with the help of your instructions! Yay 😀

Leave a Reply

Your email address will not be published. Required fields are marked *