Tuesday, February 16, 2010

How To Make A Blog Banner: Tutorial 1

There are so many different ways to make blog banners.  I have heard of people using picasa photo editor, photoshop (which I LOVE, but definitely do NOT have the ching chings to buy it), even Microsoft word or paint.  I'm not going to use any of those.  In this tutorial I will be using a free scrap booking kit and  a free program called Gimp which is much like Photoshop.  Can you tell I'm a big fan of free?

So, first things first.

1.  Download the Gimp photo editing software

2.  Then, go to Digiscrapdepot and choose a scrap booking kit.  There are literally thousands of them. Each scrap booking kit contains design elements we will use later on to spiff up your blog banner. Once you have chosen the kit you like, download it, open the zip file (unzip it), and store it in a file you will remember (you will need to come back to it later).

 Now that you have both your scrap booking kit of choice and Gimp downloaded, you're ready to go!

4.  Depending on which blogging platform you are using (blogger or wordpress), you need to figure out how what size your header needs to be.  Wordpress layout header banners are generally 904 X 160 pixels.  A general blogger size is typically 650 X 300.  Remember that blogger lets you put in any size (I'm not familiar with wordpress-do they let you do that too?).  You may want to play around with different sizes to get it just right for your blog layout.

Ok, here we go.

Since I have a blogger blog, I'm entering in 650 X 300.

You should now have a blank "canvas" staring back at you on your screen.  Now you are going to pick out your background image, or "paper".  Go to File, click Open as Layers,  then select the file you saved your scrap booking kit in and click through until you find a background image you like.  (Most scrap booking kits have a few to pick from).

So now I have my background "paper", but it is now very close up or zoomed in.  To play around with the sizing, you will need to scale it down. (or maybe you like your image the way it is-it's all up to you!)  


Also, you should keep in mind the size of your canvas and the size of the item you're using.  If you try to stretch it to fit the canvas, it might look distorted.  Just play around with things.  There are so many design possibilites once you get going with it.

Just keep adding layers and and scaling down your images the way you like. 


If you want some fun fonts (other than the generics), try downloading some from  Again, these are free and can really make your blog banner look great.  This is my favorite place to get fonts. That's all you have to do is download them, unzip, and drag the file into your fonts folder. That's it. You might have to save your work and click out of Gimp to reset the fonts in order to use them, though.  

Keep going until you are satisfied with your design.  

When you're all done, don't forget to save! I've done this wayyyy too many times, so I want to reiterate.  Actually, it's a good idea to keep saving your work continuously throughout...just in case.  Depending on which computer (PC or mac-macs tend to be more stable) you are working on, you want to save a lot just to be safe. 

Click Save.  Where it says Name, type in what you want to call your file, then select the file type (for example, jpg, png).  I usually save my work as .png files.  I manually type this (.png) on to the end of my file name.  


Yayy-you're almost done!  Now you're ready to install your new blog banner into your blog!

How to upload your new banner into blogger:

log into your blogger account.  You will be in your dashboard at this point.  Click on Layout, then click Edit on your header.  Upload your banner as a picture, then click on "instead of title and description" under placement.  Just wait a few seconds to let it upload and YOU ARE DONE! 

Woo hoo, now you have a fancy shmancy new header for your blog.  I hope that wasn't too painful.  Let me know if it worked for you, or if you have any questions! 


  1. Awesome tutorial! I'm bookmarking this for my other blog. Needs a makeover bad.

  2. THANKS!!! I really appreciate this! You worked hard on this blog post!

  3. I cannot wait to give this a try!

  4. make it sound so easy. I'll have to try it out.

  5. Hi, I had to follow you over here from Twitter. What useful info. this is. Now I have to take the time to read it.

    I'll come back!!!

  6. Moni - this rocks!! Thanks for sharing, maybe I can spice up my wedding blog since its pretty "blah" right now :)

  7. stopping over from SITS - I was just thinking that I need to do a custom banner for - have bookmarked and am now following you so I can come back when I'm ready to go! BTW - is making buttons the same?

  8. Hey--thanks for this really great post. I'm thinking about embarking down this redesign road and truly appreciate the tips.

  9. Thanks for such a detailed tutorial. I really want my own blog design, but don't know enough about CSS to do it.

    Thinking I might play around on one of my other blogs with the custom header though. very cool!

  10. Thank you very much for this; am just new at blogging and have been thinking of changing my banner :)

    From FFF at MBC

  11. Too cool... I love how to's!!! and free!!! and I can play with stuff like this for hours and hours if left alone.
    Do you have a tutorial on how to make a button? I always ask another blogger to make mine!!! She's so sweet but I hate to keep bothering her.

  12. Hey Monique...girllllll...just want you to know that I started this around 3:30 and I just finished! I have to make some adjustments becasue for some reason it seems like my banner is too wide! but girl it was so much fun! I think I am addicted. it's are talking about someone who has never done anything like this in my LIFE!!! I didn't know what the heck I was doing..I admit most of my time was looking through the thousands of theme I'm hooked on finding FREE downloadables...i just think of things i'm looking for and start searching! Feel free to look at my Next

  13. Thank you for this application also Nice application too

  14. I appreciate, lead to I discovered exactly what I was taking a look for.
    You have ended my 4 day lengthy hunt! God Bless you man.
    Have a great day. Bye
    My webpage : facebook integration

  15. omg thanks I have been looking for a way make a unique banner


I read all of my comments and often respond right back here in the comments section. Go ahead-you know you want to!!