Tuesday, January 10, 2012

How to make a mosaic banner

I have been asked a few times how I make my photo banner for the blog, and usually I respond with a very long, rambling explanation, which I always think must confuse the recipient more than it enlightens them.  So, when the lovely Mama from Only in Louisiana asked me the other day, I suddenly had the idea of doing a photo tutorial.  Anyway,  here it is - not sure if it explains things any better than my multi-page email would, but let's see how it goes.  For the purposes of this post, I made a new banner (above) and documented the process.  

Before I go on, I will say that I use a couple of programs to do this - one online and the other I have downloaded.  Both of them are free, but they do look for donations.  It is always nice to buy these guys a coffee now and then, as they do good work.  Also - there are similar products out there, but these are the ones I know and use.
Ok - lets do this...

First of all - create your mosaic.  I use a website called Big Huge Labs - this is their home page, and in fact it is very easy to navigate and work out.  We want to select Mosaic maker here - see it bottom left as you look at the screen?

You then come to this page, which allows you to choose the shape of your mosaic, and to upload your photographs.
For the banner, I will choose a layout of square tiles, 4 columns and 1 row.  I leave the space between images at the default of 5. I select my images individually, and then I choose the first photograph in my mosaic by clicking on the first square.

When you click the box to upload your picture, a series of options appears - upload (from you own computer), flickr, or facebook.  I normally use Flickr - selecting this option brings up your photostream* and you can then scroll along until you find the image you want - click on it and the photo appears in the box.

*The first time you chose Flickr, you will be asked to allow Bighugelabs permission to link to your Flickr account, so there will be a short process to go through. Once your account is linked, your photostream will show everytime you chose the flickr option.

You can also upload directly from your computer, as I have done for picture 3, which wasn't on my flickr page. It can take a wee bit longer to upload that way, but not significantly.
I don't have facebook, so i can't comment on how that works, but I imagine it is just the same.
Once you are happy with you selection, hit the create button.

And there is the mosaic.  I am happy with this, so I will "save" it - it is then downloaded to my computer, and stored in the Downloads folder. If I wanted to change it, I would just click edit and change the images again.

Now I am going to add my blog title to the banner.  I do this using a program called paint.net.  It is free to download (although they do accept donations), and I find it very user friendly, and effective.

So - I open up Paint.net, and using the file tab > open > select the mosaic.
Then on the Tools tab, I select the T (text) button.

I select my font type and size, and colour and then place the cursor where I want my title to be.

You can move your text around until you are happy with it - just click on the white box and use the little grab symbol to move it .... no - I think I will change it back to where it was.

If you want to add text somewhere else - say a blog description perhaps, then select the  Text tool again and add your spiel wherever you want that to be.  Take your time - be creative and have fun.  You can always undo anything before you save it for keeps.
When you are happy with it all, then save - almost done!

Now - off to the blog we go! Just for information, I am using the Simple template on blogger

Select the Design tab > edit header.

Remove your current image.

Select the placement as "Instead of title and description, and also shrink to fit.  Then upload your mosaic file from your computer.

Woohoo - save and you are done!

And there we are!  

I hope this is  helpful - it really is much more simple than I have made it sound - and the programs are so easy to follow. If you do try this, do let me know so I can come along and admire your creative work. xxx


  1. You are so sweet to detail this process for us...finally, I think I can figure this out! I knew there had to be something additional to Blogger but just didn't know what...the mystery is solved. I can't wait to try and sport a fancy, new blog header! A million thanks to you from me and all the other frustrated Mamas out there!

  2. You're a wizard. Thanks for the tutorial, I'll get Mark to have a look. I'd love a banner that I can change, maybe with the seasons!

  3. ughhh....I LOVE That you posted this since I am soooooooooooooooooooooooooooo terrible with my computer and almost everything I try to do with my blog takes forever:)) thank you!!!!!

  4. I've been using Big Huge Labs and Flickr to make mosaics for a while and just recently used one as my blog header but hadn't thought of using my own title and description instead of the Blogger option. Thanks for sharing your tutorial! :)

  5. Hooray! Thank you so much for the tutorial.

    Love your winter tootsies ;)

  6. Seriously, just this afternoon I was wondering how people make photo mosaics - and how I could make my own. Thanks for your timely post!!! xo

  7. you are so sweet to do this tutorial jacqui, thank you for taking the time! and your banner is lovely!

  8. Nice one, you have written that in such a way that even I may attempt one of these fancy banner thingies....maybe !

  9. Thank you! I hadn't dared try a banner mosaic after my failure with a mosaic in the body of a blog post, even using your very generous email explanation. My mosaic still turned out mini-size - there didn't seem to be any way of increasing the size within Blogger editor. See http://occasionalscotland.blogspot.com/2011/12/north-by-train.html
    for just how SMALL I managed to get the mosaic!!

    Perhaps that stage comes in one of the other packages you use - I must go back and read your new instructions VERY carefully.
    How about another career explaining these packages to ordinary people? Blogger so-called 'Help' certainly isn't much good.

  10. Really looking forward to seeing all these new headers :) thanks everyone.
    Linda - you should be able to change the size when you upload your pictures to your post. Are you using the newer photo uploaded? When you post an image from there, you should get options to size the image - S,M,L or ExL.( I am not talking about the header picture, but blog post images) I will try and do some examples and email you later.
    Kate - it is fun to ring the changes with the seasons.
    Emily I do like thinking up my seasonal barefoot picture ideas.xxx

  11. I love your header, interesting to read how you did it. I like hwo the title seems to be coming out of the fire.
    I've just revamped my page, mostly making use of the features on blogger that just take a bit of time to figure out. I do all my graphics work using photoshop and illustrator as this is what I used for my job. It's great how many on line sites there are now for digital design. Blogs can become sites and have shops attached. Just a few years ago I spent WEEKS teaching myself dreamweaver to build a site. Or would have had to pay a designer a lot for it.

  12. Interesting. You make it seem simple, which I'm sure it's not! I've had nothing but trouble with Blogger since inadvertently hitting their new formt which is crapola! May give this a whirl sometime soon. Thanks.

  13. Thanks very much for this. I'll have to give it a go.

  14. Thank you for the tutorial. I had never heard of either program and will go and check them out. Your banner looks beautiful by the way.

  15. wow this is so cool...I need to experiment with this, thanks and thanks for visiting my blog:-)

  16. what a handy post! Thank you mama. I bodged mine and have never been able to bodge another so will follow your instructions using proper programs and see where we get to. Big winter love x

  17. You are a saint! No kidding. I've been wanting to research this for awhile but the thought was too daunting. And you made it easy enough for even me to follow. Thank you, thank you. Now I just need a few uninterrupted hours to go through pictures and follow your step by step. Ooh, I'm excited!

    Blessings, Debbie

  18. Thank you so much for sharing this!! I have been wanting to do that to my banner. You just saved me a lot of time:)

  19. Thank you Jacqui! I made one!


    That was really useful. :)

    Laura xx


Many thanks for visiting me. I love to read your thoughts and appreciate each one. I will respond to comments and queries here, so please check back xx


Related Posts Plugin for WordPress, Blogger...