How To Make a Blog Header for Free

A Tutorial on how to make a blog banner using Picasa instead of something fancy and complicated like Photoshop

Want a free and easy way to make your Blogger blog look more original and professional? I did. I was desperate and didn’t want to pay for a blog designer, and didn’t have time to learn Photoshop. I also LOVE the design process of changing things up once a month. So I came up with this very easy tutorial for you using a free program we can all use. Picasa.

First you need to download Picasa. It’s free and relatively simple to get your pictures into Picasa. Picasa is ‘made’ by Google and it won’t make your computer blow up, or slow down, or act really weird. I really love using it and I’ve tried almost everything. I think this is the best (and most self-explanatory) FREE editing system out there, especially if you are using Blogger. No one payed me to say that, really. (Don’t you think they should?) I am really not very computer savvy, and I don’t have the time to learn Photoshop right now, try as a might. So I’ve squeezed every ounce of juice out of Picasa and have been very happy with the results.

Once you download Picasa, it is easy to figure out how to ‘Import’ (there’s a button) your pictures from your files into Picasa. (You can do them a file at a time just to see if you like it.)

Let’s get started. Once you experiment, you’ll find a header can be made with a bunch of photos or just one and still look good.

Open Picasa and add 4 or 5 photos. Select a photo and press the Collage button found at the bottom of the window. (You can edit your pic first if you want. See the left hand side for tons of options.)

In the Settings choices, choose Picture Pile because it allows you to work with a bunch of photos and manipulate them around in tons of ways.

Click and hold on your photo and drag it to the corner (or wherever you want it). (You can select different colors for the background. Experiment away. The possibilities are endless. Also under background options you can select “Use Image.” You can download free scrapbook paper and import that into Picasa and use that as a background image if you want something besides a solid color. I did this from here. On my blog, you will see in my September banner I have chosen a pattern, but the one I have for August I chose a white background.)

See the little gray circle on the photo? That allows you to make the photo bigger or smaller and also allows you to manipulate the angle, crooked or straight, and allows you to move it everywhere. If you look in the Settings box, you can also choose to add a white border, or a Polaroid border, or create a shadow on your photo.

Now you can add more pictures. Click Clips right next to Settings. If you don’t see the photos you want to add, go to Get More and it will take you back to your Picasa files. Select your pictures there and then go back to the Collage file on top. (The button next to Library.) The picture you clicked on will show up in the little Collage window. Press the + button and it will be added. If you change your mind, click on the photo you don’t want and press Remove. (You can also press View And Edit if you decide you want to use some of the cool editing features in Picasa to make your picture better-looking.)

For this example, I want to line up my photos as straight and evenly spaced as I can get them. Remember, the possibilities are endless though, they don’t have to be straight. I DO try to keep them on the top 1/2 of the collage. It looks funny at first, but you want your collage to be long and skinny. You will crop that bottom half off later, after you add text. Just work with the top 1/2 when making a header.

When you are satisfied click Create Collage.

Now you should be back to the main Picasa page. Find your created Collage in the Library file, and click on it. Now what comes up is the basic editing features, Basic Fixes.

Find the Text button and click it. There you have TONS of choices for font. Play around and see what you like best. You can move the text where ever you want (even on top of the photos), make it whatever size you want (keep it on the page), pick the opacity of the text, and determine the color you want it. It has the same gray circle you can manipulate. Remember you want it long and skinny like a header normally looks so keep it up there in the 1/2 of the space provided.

If you want to create a whole different grouping text, you can do that too. Just click the phrase you are finished with and move your cursor to a new spot. It doesn’t have to be the spot you want the type to show up, because you can move it later. Now you can choose the color, font and size of your new phrase.

After you have your words down, click the Apply button and you will go back to the basic Edits. You are going to Crop your Collage so it looks like a header, not a huge photo, so press Crop. I make it really even on all sides and bring the crop right up under the writing.

Press Apply when you are finished.

You are going to Export (see that button on the bottom?) your collage to your photo files. When you press Export a window like this will show up. That little slider bar lets you choose the size.

The rest of this tutorial applies to Blogger Headers, but you can easily adapt it for your own platform.

If you have Minima Stretch like me, choose 1024 pixels. If you have just plain Minima or Minima Lefty, use 640. Press OK and send them to a file.

NOW, go to your blog and press the Layout tab. Press Edit on the header part (where your title is.)

Choose your Image (your collage) from your Files where you sent it. Make sure you press the “Instead of title and description” button first, and make sure the Shrink To Fit button is NOT checked before you upload your picture.

Press Save. If the Collage seems too big for you, just resend your collage at the next smaller size when Exporting to your photo files from Picasa.

HOW TO ERASE THAT BORDER THAT AUTOMATICALLY SHOWS UP AROUND YOUR HEADER IMAGE

To get the border that automatically shows up around your Header Image to disappear is easy! Go to your blog Layout page and find the Edit HTML button. What will come up is a bunch of weird gobbledy-gook. It’s actually super important weird gobbledy-gook but don’t let it intimidate you. Just be really careful with it. Every little mark counts. Scroll slowly through till you find this: (see image below)

#header-wrapper {
margin:0 2% 10px;
border:2px solid $bordercolor;

#header { margin: 5px; border: 2px solid $bordercolor; text-align: center; color:$pagetitlecolor;

Change the number in blue to zero. This makes the border invisible. Make sure you press Save Template to save your changes. Now view blog. It’s gone! (By the way making it 3 or 4 pxs makes it thicker! Or you can just make one invisible and keep the single line around your header. Pretty cool!)

Now your header image will not have a border.

Easy Peasy right??
Here’s some great advice: Start a new blog…a sample, “fool around” blog, and just try stuff out on it. Google some tutorials…that’s how I learned. In your Settings, you can choose to make that Sample Blog private, and hide it on your profile so no one sees it. Then play away…who cares if you mess up! You can see how things look on your Sample Blog first, practice, and then try it out on your new blog.

***Editor’s Note*** This fun tutorial was shared with permission. Check out the original version and see some fun blog headers using this tutorial at Clover Lane

What do you think?

*

Comments

  1. 30

    I am so thankful that I found this tutorial! It helped me more than you can imagine. Check out what I did tonight. I am quite proud of myself.
    http://www.piperpunches.com

    Thanks again,

    Piper

  2. 31

    Yay! Thanks for this post… I needed to update my header from the text that is the default with my theme. I’d never used Picasa before, so this was so helpful!

  3. 32

    I just want to say a big huge thank you for this blog post! Amazing directions and pictures to help get the job done. Could not have even considered doing this on my own without your post! Thanks again!

  4. 33

    Thank you so much for this blog post, this was so simple and easy to follow and do :) Picasa is really great, thanks so much for the reccomemdation and for the help!!

  5. 34

    Thanks for this! I was going nuts trying to do this on Picassa. Very clearly put and very useful. I am using this in the redesign of my own blog.

  6. 35

    THANK YOU! I don’t know how I ever survived without Picasa! You are a true life (and money) saver! Thank you, thank you, thank you. :-)

    Tracy

  7. 36
    Jeanpreneur Brit says:

    So happy I found this! I had hired someone, wasn’t uber happy with the results of the header. check out what you helped me with! http://www.jeanpreneur.com

  8. 37

    I don’t want a collage,I want to use 1 pic and add the title.

  9. 38

    I cannot thank you enough for this info! I spent about 12 hours trying to figure out how to do this WITHOUT paying an insane amount of money! You are FABULOUS! I could hug you right now!

  10. 39

    You. Are. Amazing. Thank you so much, Sarah! I have been pining for a pretty header for a very long time. And I just made my own! Thanks to you.

    http://www.cookingwithchopin.blogspot.com (if you want to see the result of your awesome instructions)

    THANKS AGAIN!
    Ginny

  11. 40
    Rebecca Valenzuela says:

    This was a great post! Thank you!

  12. 41

    THANK YOU! was able to finally figure it out with your help!

  13. 42

    Thank you for this post, it helped me a lot :)

  14. 43
    Hanggar PS says:

    how about the width pixel, where i have to set my width pixel

  15. 44
    Dawn Reeves says:

    Thanks for this post! I used your instructions to finish my header. I made it as far as using the Picasa collage function and then I was stumped where to go from there. A google search led me to this post. This post just saved me hours of frustartion. Thanks agai!

  16. 45
    pelininstyle says:

    THAT IS A GREATTTTTTT POST AND ADVICE!

  17. 46

    Thank you!!! What a great help. I will be playing around with this far too much in the future, I’m sure. :)

    themurrayedlife.blogspot.com

  18. 47

    Can’t wait to go home and try this one! :-) Hope it would work for me!

  19. 48
    Sarah @ The Fit Cookie says:

    THANKS SO MUCH! I was looking for a program that didn’t cost as much as Adobe, and Aviary is being shut down or something, so this is perfect!

  20. 49

    Thanks so much for this post. I’ve found it really helpful x
    http://www.mrsdandcandybows.blogspot.com

  21. 50
    Haley Preston says:

    I tried this but when I uploaded my collage to Blogger and the text on the collage didnt show up. Do you know why?

  22. 51

    Love this tutorial! I just changed my blog header for February! Love the flexibility to change the look. Thank you!

  23. 52

    Thank you so much for this tutorial. It really helped and it was so simple. Doing this has made my blog look so much better. Thanks again.

  24. 53

    My code in Blogger to remove the header wrapper doesn’t look like the code above….are there any other options for how this would be phrased? Mine looks like this (sorry for the gobbldygook and thanks for any tips)
    #header-wrapper {
    background:$titleBgColor url(“http://www2.blogblog.com/rounders3/corners_cap_top.gif”) no-repeat $startSide top;
    margin-top:22px;
    margin-$endSide:0;
    margin-bottom:0;
    margin-$startSide:0;
    padding-top:8px;
    padding-$endSide:0;
    padding-bottom:0;
    padding-$startSide:0;
    color:$titleTextColor;
    }

  25. 54

    I took our tips and created a header for a new blog I am doing with my friend at http://takingthelunge.blogspot.com I think mine came out decent for a 1st time! I followed along with your tutorial – THANK YOU!

  26. 55

    Thank you, this was awesome and my new blog looks fabulous!

  27. 56

    This tutorial is awesome! I have wanted to personalize my blog, but it seemed so overwhelming until now. Thank you so much! I just made my first one and now I can’t wait to try to improve it.

    Thank you so much!

  28. 57

    Great tips! I am so going to test this out for my blogger blog that I don’t use often as practice!!!

  29. 58

    Very cool – I’m partway through – you can see the result here: http://curiosityquotient.blogspot.com/2010/01/how-to-make-blog-header-in-picasa.html

    Thanks for figuring this out and sharing it!