Google+

Friday, January 27, 2012

How to Make a Photo Collage Blog Header

Okay, I'm finally going to share with you how I made my blog header for free and without any fancy (and too expensive) photo programs like Photoshop.

Before we start, all my tips, etc. are for blogger blogs.  I have no idea how other blogging platforms work, although I imagine they are similar.

The first thing you need in order to make a blog header is a photo program.  There are a gazillion very expensive photo programs out there, and I've tried most of them and they are great, but for most of us non-professional-mom-blogger types, it's completely unnecessary to own an expensive photo editing program.  You just need two little free programs.

Paint.net:  I've been using this for 2+ years.  You can get it at http://www.getpaint.net/.  Watch out at their download site.  Don't get distracted by all the big download signs, don't click on them!  They will download other junk to your computer.  Only click on the stuff that is circled in the pics below:


and


and


Paint.net is absolutely free, but I think it runs on windows only.  It's a mini-photoshop type program.  I use is most of all to resize my photos for my blog.  I never upload the huge photo files that come off my camera onto my blog, because they make your images take longer to show whenever someone visits your blog.  I also use it to crop and fix photos and I use it to make little buttons with words on them for my blog (I promise to show you how I do that too, in another blog post, it's easy peasy.)

Picasa 3: This program is free, very handy, and will make the collage-header-making a piece of cake.  You can download that here for free: http://picasa.google.com/.  This is a program that goes on your computer, just like Paint.net and it's different from Picasa Web Albums, where all the photos uploaded to your blogger blog are stored online.

Now you need to do some pre-collage work.  You need to figure out (1) what your blog width is in order to figure out (2) what size your header needs to be.  Now, to make things easier, I will tell you that I use the Simple Template from the blogger template designer.  Within that template I chose the farthest one to the right (circled in red below).  I found that this one is the widest, and I like my blog to fill up the computer screen.


1) How to find your blog width settings.  
  • Go to your design page.  It should look like this:

  • From the design page click on the following: Template --> Customize --> Adjust Widths
Still with me?  Mine looks like this (below).  Entire blog: 1190 px (stands for pixels), Right sidebar: 310 px.  It's weird. I don't really understand why the numbers have to be like this, but in the end my sidebar is actually 250 px, and that is exactly how I like it.


2) Figure out what the size of your header should be to fit your blog template.

It's not the best habit when it comes to blog design, but I mostly never write things down while I do them.  (Except for this tutorial.)  And, because I recently got a new laptop, I can't find the folder that I keep my blog headers in, which is why I have no idea how large the one I have right now is.

Thankfully, that's easy to figure out.
  • To figure out how large my blog header is, I go to my blog and click on my current header and save it to my desktop.  Then I open my handy program, Paint.Net.  I make sure it is set to pixels (below).
  • It tells me on the bottom right hand corner exactly what size my header is (above).  It' odd that it's 1120 x 502.  I bet I meant to make it 1120 by 500, but somewhere in the editing process it ended up a tiny bit larger.  As long as it looks fine on the blog, I leave it.  
  • Now that you have your numbers in pixels, jot them down.  They will be useful to you any other time you want to create an image for your blog header.  
3) Open Picasa.  If this is your first time ever opning it on your computer, you'll have to show it where to find all your pictures.  I keep mine in the My Pictures folder.
  • In Picasa, click on the following:  File --> Add Folder to Picasa.  
  • Then click on your My pictures folder, or whatever other folder you keep your photos on your computer in.
  • Then give the program a while to import all the photos. {Potty break!} 
4) Navigating through Picasa is easily done by clicking on the folders on the left that contain your photos.
  • When you find a picture you want to include in your collage, pin it, by clicking on the tiny green pin on the bottom of the screen (below).  This will keep the pictures you are working with "pinned" while you leave the folder to look for other photos.

I'm going to chose maybe 12 photos for my collage.  If you're not sure which photos you want to use in the  collage, pin all your favorite and a few extras. It's easier to erase them from your collage than to search for more and add them later on.  A good way to save time on this is to chose your favorite images ahead of time and put them all in one easy to find folder on your computer and then just go to that folder through Picasa.

5) Time to COLLAGE!  Once you've pinned all the photos you want to use in your collage, go to the top menu bar and select Create --> Picture Collage.  You'll see something like this: the picture pile (below).


7) Chose your collage.  Picasa is going to throw all your pictures in a pile on the table.  Cool, huh?  Now it's time to customize.  On the top right, below the menu bar, you should see a dimmed tab with the word Settings (below) on it. Click on that.


From the dropdown menu, select what type of collage you want.  I'm choosing mosaic.






8) Before doing anything else, I need to customize my collage to be the size of my blog header.

I like to make my collage and then put my blog title and a quote on top of it, so I will make my actual collage size 1120 x 385 pixels, which translates to 11.67 x 4 inches, which are the numbers you'll need to know for Picasa.  (I got that number by selecting the collage area of my current blog header in Paint.net.  I then copied and pasted it to another page in paint.net and changed the pixels to inches, like so:

  • Go back up to the top of your screen in Paint.net and switch it to inches (above).  Then look at the dimensions in the bottom left hand corner.  
  • Thank you Paint.net, I now know that 1120 x 385 pixels = 11.64 x 4 inches.  
  • Go to Page Format of Picasa and scroll all the way down to the bottom of the dropdown menu, and click on Add Custom Aspect Ratio...  Click on that and enter your numbers in inches (below).

9) Finishing up.  You are almost done!  This is where your creativity comes in.  Just mess around with it until you get your perfect collage.
  • Move the grid spacing bar around until you get the space in between the pictures that you like.  I like the background to be white so that it fits invisibly onto my blog (below).
  • Remove photos you don't want.  Click on the photo you want to take out of your collage and then hit "remove" in the bar above the collage, or you can just drag it to the left (below).

The only thing I don't like in mosaic mode is that you can't scramble your collage! I sometimes get it in my head how I want the photos to lay, but, unfortunately, the layout of the shapes are set.  You can actually only scramble the collage in picture pile mode.
  • In mosaic mode, just hit Shuffle Pictures a bunch of times until you get it just how you want it.
  • You can also move the pictures around into the larger or smaller spaces by dragging them.
10) Final step: When you are all done creating your collage and it's just how you like it, click Create Collage on the bottom left.  Picasa will save your collage in a special folder named Picasa in the My Pictures folder.


UPDATE 4/4/12: Unfortunately, you cannot upload it to blogger yet, you have to resize it again in Paint.net. For some reason, Picasa saves the photo very large. So do this now:


1) Open Paint.net.
2) Open your new collage (from the Picasa folder in your My Pictures folder).
3) Resize your image back to the size you found out you needed it for your blog. Hit CTRL+R to resize. The proportions will be fine, so just enter either your width, height, or both (making sure the "maintain aspect ratio" box is checked.
4) Save the image again. I like saving all my final headers in a special folder.


Now follow the steps below, and you should be good to go.  Please let me know if you have questions or things aren't working out for you.

Now all you have to do is go into blogger and upload it.  Just in case you don't know, here's how you do that:  
  • In blogger, go to Design --> Layout.  
  • Find the header gadget and click Edit.
  • Customize your options, and voila! You did it!
Disclaimer:  If something is not working for you, or you just have questions or my tutorial is very confusing, then just leave a comment below and I'll answer below in the comment form, so that your question can help others. 

PS: If you end up making a cool blog header collage, let me know so I can see it! =)
PSS: Adding words onto your blog header image (like my buttons on the right) is another very short tutorial I will write up soon (God willing).  If you're too impatient to wait for me, I'll give you a hint: I do it all in Paint.net. Updated: You can find the adding images to your collage tutorial here.

37 comments:

  1. great tutorial! i create my headers with a similar process. i think i may give your tutorial a try.

    in His JOY, lena

    ReplyDelete
  2. Yours looks great! I have not learned how to use any of these programs yet, but think it would be a lot of fun.
    Hope all is happy & well with you & yours,
    Zuzu

    ReplyDelete
  3. I tried but every time I shuffled the folder it put some of the photos upside down and I had to manually turn each of them. In the end it saved with photos upside down so I need to re-read your instructions again! It was a good exercise for this computer challeged woman that's me. :)

    ReplyDelete
  4. Elisa,

    Thank you so much for this! I have followed all your instructions and have a collage ready for text. I know you gave us a hint on how to do this next stage, but I haven't worked it out yet! I'll keep thinking. Your instructions are so clear. I really appreciate this help.

    God bless!

    ReplyDelete
  5. I just want to say thank you so much for taking the time and putting this tutorial together!! I am attempting to make a header for my blog but I'm distracted by Words with Friends and the Big Bang Theory. Even if I can't make a header with your instructions (my fault not yours) I just wanted to say thanks.

    ReplyDelete
  6. Hi Elisa
    Thanks so much for the great tutorial - I have been meaning to redo my header and now I won't have a reason to be putting it off much longer! I'm also an Elisa - not very common! And I'm your newest follower!
    Thanks for sharing!
    Elisa at home sweet nest

    ReplyDelete
  7. Great great tips! Thanks a lot!

    ReplyDelete
  8. thanks for the tutorial!

    i am still trying to figure it all out, my sizing keeps coming off totally wrong :( the image from picasa is coming out a lot bigger then the size i am putting in :( i am determined ot get it sorted out though!!

    ReplyDelete
    Replies
    1. You are right, Kris, Picasa saves it a LOT bitter then what we tell it to save. I will add what we have to do, which is open it in Paint.net and resize it again to the size we want. The proportions, at least, will be perfect.

      Delete
  9. Thank you so much!! I've followed your amazing instructions and it went perfect!!I'm a beginner so still trying to figure out how everything works but you helped me A LOT!! thanks!!!!

    ReplyDelete
  10. Awesome Elisa. I followed your instructions - very easy! I've been itching for a change. Come check it out - no new post yet (feeling blahish about posting recently) but the header's changed.

    ReplyDelete
  11. Thank you sooooo much! This was very helpful and easy to follow. I appreciate you taking the time to make this tutorial. You can see my collage at http://deepbellylaughter.blogspot.com/ I also pinned this tutorial on Pinterest. Hope that was ok. :) Thanks again!!!

    ReplyDelete
  12. Thank you so much for your tutorial! It was clear and easy to follow...I had been wondering how to do this and by following your instructions I was able to figure it out. You can see my handywork at www.reneerunsmiles.blogspot.com

    ReplyDelete
  13. Thank you so much for this tutorial you have made things so easy to understand and now I can really get the look for my blog that I want...thank you again :)

    ReplyDelete
  14. Thank you so much for putting this up! I had some trouble initially getting the blog header to work because it said i had no space on my picasa album or something, but i uploaded it through my photobucket account (another free account!) and it works perfectly (: i love the way my page looks now!! thank you so much (:

    ReplyDelete
  15. Thanks for the tip. Will attempt the collage header later. But spent hours trying to resize blogger header till I stumbled on to this post. From picasa I edited it in Piknik and it was trial and error using the sizes you mentioned. Had to reduce it to about 1200x250. Thanks again.

    ReplyDelete
  16. Holy cow, it worked! Thanks! :)
    Signed,
    a techno-challenged fan

    ReplyDelete
  17. Thank you so much! I couldn't justify spending $$ on a header to my husband! & now I wont have to =D

    ReplyDelete
  18. Fantastic tutorial!! Thank you so much...all done.....and I can't believe that I, technically stunted fool that I am, managed to do it!! You are a star :0)

    ReplyDelete
  19. I have been wanting to change my blog header for ages, and now I will try it. I already do collages in Picasa all the time so I'm half way there. Also, did you know that when you have a mosaic, if you drag one picture to another picture's spot, the two will switch places. It makes it much easier to rearrange them than if you keep shuffling. It doesn't change the size of the spaces you are working with, though. I hope that helps.

    ReplyDelete
  20. This was so very helpful. Thank you for your concise directions! Hoping to share my blog header soon...

    ReplyDelete
  21. Many thanks, Just what I needed and simple to follow. Thanks

    ReplyDelete
  22. I tried to make it work please have a look, tell me what I'm missing at: http://chenjaswords.blogspot.com/

    ReplyDelete
  23. Thanks Elisa! This was super helpful for a first time blogger. The only step I'm getting tripped up on is at the very end with the resize. Everytime i load my collage into blogger half the collage gets cut off the page :( Please help!

    ReplyDelete
  24. If you scroll back up where I added the red rezize update and follow the steps, it should work fine for you. You need to set the width of the final collage to the width of your blogger header. If your blog is a different size than mine, then you have to see what it is and resize it to that.

    ReplyDelete
  25. Do you need to re-size the photos before pinning them? Having trouble re-sizing w/in the collage. Thanks!

    ReplyDelete
    Replies
    1. I'm not sure I understand your question. Are you asking whether you have to make your photos smaller, initially, before using them in Picasa? If so, the answer is no. Picasa resizes the photos for you when it makes the collage. It is a bit weird though...with the mosaic option, you can't always get the photo to show the parts of the photo that you want in the collage...so sometimes, I will crop the photos to make sure I get the parts of the photos I want in my collage.

      Does that make sense? I hope that answers your question. =)

      Delete
  26. Hi
    I am a new blogger and I would like to have just one photo on the left side of my header and would love to know if you can advise me on this? I am trying to get my new page looking great and have issues with many things lol. My page is divinedivainspiration.blogspot.com Please excuse the fact that it does not look great yet. Thanks so much. Donna

    ReplyDelete
    Replies
    1. The easiest way to do this is to create a header with photo and words in a free photo program like http://www.getpaint.net/.

      Delete
  27. Do you have any suggestions for an alternative to getpaint.net? I am a mac user, so this doesn't work for me.

    ReplyDelete
    Replies
    1. Try Gimp, or any of these here. I have only experience with Gimp. It was similar to photoshop on a much smaller/easier scale. http://graphicssoft.about.com/od/pixelbased/tp/freephotoedm.htm

      Delete
  28. These directions have been soooo helpful! I have my banner in the blogger header and everything but it will not show up when you open the blog. I am having a really hard time getting it to my blog and am a MAC user. I really think it has something to do with the pixels. Any suggestions? Thanks!

    ReplyDelete
    Replies
    1. Hmmm..it's hard for me to help you with this, because I can't see what's going on. If you'd like to email me at elisa129 at gmail dot com, I can try to help you figure it out.
      If someone else is reading this and looking for hel, her are a few pointers:
      -Check to make sure you resized it to fit your blog.
      -If you saved it in a .PNG format, you might try saving it in .JPEG format. I don't think it should matter though, becuase blogger takes both.

      Delete
  29. thank you so much for posting this. i am all new to blogging and have been procrastinating getting a header done as it seems so daunting. you make it sound/look doable even for a nontechnical savvy person like me :)

    ReplyDelete
  30. I did it, finally!! I've been trying for quite some time to make a collage header for my blog and thanks to your great tutorial, it is done!!! I had no problem at all. You made it "sew" easy!! Thank you, thank you, thank you!! It is definitely getting "pinned"!!

    ReplyDelete
    Replies
    1. Yay! I'm glad you were able to use the tutorial. =)

      Delete

Thank you for taking the time to leave a comment. I love reading them and I try to get back to you one way or another. =) +Elisa+

Related Posts Plugin for WordPress, Blogger...