How to make a photo mosaic banner, Part I

I just spent a whole lot of time figuring out how put new, pretty banners on my blog pages.  I wanted to use some of the photographs I've taken, but the quick method Blogger provides for putting a blog title on top of a photo just wasn't what I had in mind.  I wanted to put a few pictures together, and put the title and blog description above or below the pictures.  I messed around a bit and figured it out.  And it's just what I wanted!  Since I did it a bunch of times to head my different blog pages with thematically-appropriate pictures, it's embedded in my head.... for the time being.   So I'll walk you through what I did, so you can give a try. (And hey!  It'll be right here for me next time I want to change a banner and can't remember how I did it!)

By the way, this method will put your photos together in a row of equal squares.  If you want to have different sized photos, you'll have to do that another way. Maybe I'll figure it out and let you know at some point!   But not today. (I can only hold so many instructions in my head at any one time, apparently.)

To use my method, you'll need to have an account on www.flickr.com (free!) to park your photos for a bit, and Photoshop or other image-editing software. (I suspect this will work on Photoshop Elements but I don't use that so I can't say for sure.  Give it a try and let me know.)

1.  Take a look at your blog template to see if you can find out how many pixels wide your blog banner should be.  I use Blogger, and have found that a banner width of 960 pixels wide works for most templates. 

2.  Choose the photographs you want to include on your banner.  I've used between 5 and 7 photos.  You can experiment with more or less and see what you think.  Upload those photos into flickr.com.

3.  Go to Big Huge Labs, a site that has a whole bunch of fun things to do with photos.  Click on the line to allow Big Huge Labs to link to your site on Flickr and get back to the Big Huge Labs menu page.

4.  In the left hand column on Big Huge Lab's menu page, you'll see "Mosaic Maker."  That's what we're going to use, so click on that.

5.  First, choose your mosaic layout.  Choose "square tiles."  Then, choose how many columns and how many rows you want in your mosaic.  I used one row (across) and 5-7 columns down.  If you want a fatter banner, you can try 2 or more columns.  Now, decide whether you want spaces between your photos or if you want them up against each other. If you want them all smushed together (as I did), then choose "0 pixels." if you want them separated by lines, choose a few pixels.  5 pixels should work well.  You can also choose the color of the lines that'll show between the pictures, if you chose that option.  The default is white.

6.  Now comes the fun part: choosing and inserting the photos!  You can choose to designate a set of photos and let Flickr feed them automatically, or you can choose them individually.  Once you choose a photo for each square, click "Create mosaic."  If you like the look of the mosaic, choose "Save" and download it to your hard drive. (Be sure to remember where you put the file!)  if you don't like the mosaic, click"Edit" and you can start over again.

7.  Now you have your string of images in a mosaic form.  Open Photoshop and open the mosaic.  (Note that Photoshop treats it as one image.)  Choose Image from the menu bar, then Image Size and change the size of the mosaic so that it is 950 pixels wide and the resolution is set at 72 dpi. Save the mosaic in its new smaller size but don't close that file.

8.  Still in Photoshop, click "New" on the menu bar to open a new document.  A menu will open to let you set the size of the new document. This will define the width and height of your banner.  (I typically choose 960 pixels wide by 300 pixels tall; your preferences may vary.)  You can also set the background color as you like -- the default is white.

9.  Go back to your mosaic image.  Choose "select all" and you'll see the "marching ants" surround the mosaic border.  Choose Edit/copy.  Switch over to your "new" blank banner, and choose Edit/paste.  You'll see your mosaic appear as a new layer on top of your banner.

10.  Choose the text tool from the left-hand toolbar.  Here's where you can choose a font, size, and color, and type in the name of your blog.  It may not be exactly where you want it at this point, but if you choose the top arrow on the left toolbar when you're done typing, you can move it around and position it just where you want it.

11.  If you want to add a description or any additional text, choose the type tool again, click on the banner and you'll again start another text layer for this separate section of type.  (Again, choose font, font size, and color before you type.)  If you don't like what you see, you can highlight it and change it until you like it.  Again, use the arrow key to move it just where you want it.

12.  You'll now have a banner created in Photoshop layers, and everything is in separate parts.  I recommend saving it in layers like this, so if you want to change it later, you need only delete or change a layer and keep the rest.  I save this file with a name that includes "pieces" (ie, bannerpieces.psd) because I'm clever that way.

13.  From the top menu bar, choose Layers, then flatten layers.  This will turn your layer (pieces) into one flat image, with the mosaic and words merged together.  Click Image/Image size to check that the image width is not more than 960 pixels (or whatever your maximum banner width can be.  Remember you figured out that at the beginning?)  If your banner is too wide, now is the time to set the pixel width to fit, then save the banner as a .jpg file (ie, banner.jpg).  See, clever name, eh?

14.  You are now ready to go pop this into your blog template.  In Blogger, go to your dashboard, and open your blog design.  Choose the "page elements" tab, and find the Header element (your blog title should be there already).  Click on "edit" and a new box will open.  Choose "browse" to find the banner.jpg image you saved and click okay.  For placement, click on "instead of the title and description" because you've got that in the banner you created -- you don't need Blogger to fill them in for you.

[By the way, you could create your mosaic with Big Huge Labs, skip the whole Photoshop part, and come straight to this step to have Blogger superimpose your blog title on top of the image.]

15.  You can preview your banner to make sure you like it.  If so, "save" and you're done!  You might find that you need to adjust size, or color, in which case you can go back to Photoshop,open the bannerpieces.psd, and adjust as needed.

Aren't you proud of your new banner?!