Merge photos into a banner

February 25, 2012 5:36 AM

I want to merge 5 or 6 photos into a single 1300x160 px image (banner) for a web site. I've already edited my photos and resized them to a height of 160. Now I need a way to "glue" them together. How can I do that without spending money on new software?
posted by 14580 to Computers & Internet (13 answers total)

ImageMagick might be of some help.

If the command line is a little too intimidating, there's always gimp
posted by RonButNotStupid at 5:42 AM on February 25, 2012

What did you use to edit the single photographs? You should be able to create a new file where the canvas is the width and height of all 5/6 photos then paste them alll in, side by side.
posted by humph at 5:42 AM on February 25, 2012 [1 favorite]

Picasa lets you make a collage (I haven't used the functionality forever but my home PC's desktop image is something exactly like you are describing and that's what I used.)

There is also a similar functionality within IrfanView, which may give you more freedom to move the photos around after combining the files together (while being more user friendly... or at least a smaller install... than gimp)
posted by MCMikeNamara at 5:50 AM on February 25, 2012

Response by poster: I used IrfanView to resize the photos. In the past I've arranged photos in a Word doc and then took a screenshot to produce a .BMP I could edit. But in this case the banner is going to be too long to get a full-size screen shot (hmm...I could resize a smaller image). But I also want more precise control over its length by layering some of the pictures.

I did play with Gimp for a little while yesterday but I didn't see how to import and work with photos. Did I miss it?
posted by 14580 at 6:08 AM on February 25, 2012

Try Paint.NET.
posted by XMLicious at 6:30 AM on February 25, 2012 [1 favorite]

I am not sure if you are using a Mac or a PC. If you are using a Mac, I used Seashore to create the banner on my website.

I will me-mail you the link to the website.
posted by LittleMy at 6:58 AM on February 25, 2012

Are you coding the web site? If so, you can use CSS to place your pictures in precise locations, effectively looking as if they are all one picture.
posted by SuperSquirrel at 7:01 AM on February 25, 2012

Picnik.com
posted by nicebookrack at 7:19 AM on February 25, 2012

You can copy paste them together in mspaint. Just go to attributes and make the image the right size and paste in the parts.
posted by Threeway Handshake at 7:22 AM on February 25, 2012

Best answer: Since you already have GiMP installed, I can walk you through it:

Open GiMP
Click File → New...

A new window will open called 'Create a New Image'. In the Image Size boxes put in the dimensions of the end image you'd like. In this case, Height = 160 and Width = 1300. Make sure the units you're using are pixels. Click OK. You'll see the "canvas" you've just created.

Now what you want to do is add each of the separate images you've got onto your canvas as separate layers. That way you'll be able to drag them around independently within the canvas to align them just so.

Click File→Open as Layers... and select the first image you'd like to use. Repeat this step for each additional image you'd like to add.

GiMP will show you a list of all of the layers you have going in a little separate window. When you click and highlight a layer on that list, that's the layer you'll be working with when you're manipulating the image. Sometimes it's helpful to make a layer disappear so you can work on other layers that overlap. You can do that without repositioning a layer by clicking the eyeball next to a layer on the Layers Window. It will still be there, but invisible until you click the eyeball again.

Now that you have all of your separate images on one canvas as distinct layers, you'll want to position them so that they're aligned to your specs.

The Toolbox is another separate window that allows you to choose from a large selection of image manipulation tools. Luckily, the one you'll be using is really easy to find and deal with. It's called the Move Tool and it looks like a little blue four-directional arrow. If you're not sure, hover over it and wait for the tool tip to tell you you've got the right tool. Once you do, click it to activate. Now your mouse will move layers, selections, and other objects just by clicking and dragging. So

From the Layers window select the first layer you'd like to align (probably whichever is on top). On the canvas click and drag that layer to it's correct position. While you're using the move tool you can also use the directional arrows on your keyboard to nudge the layer into the right spot. Try using SHIFT+ARROW and CTRL+ARROW for big nudges and tiny tiny nudges, respectively.

Click the next layer down on the Layers window, and move that into place. Repeat for all layers until they're positioned how you'd like them to be on your canvas.

Now that everything is aligned you can 'flatten' the image, making all of the layers combine into one layer, by clicking the context menu Image→Flatten Image. (This is an optional step because when you do the next step and export the file as a regular web image GiMP will tell you flattening is necessary before exporting, and offer to do it automatically. One advantage to flattening by hand is that if you save the file you're working on as a GiMP filetype you can open it again and 'Undo' your flattening the next time you're working on the image.)

Finally, click File→Save As.... Look at the Select filetype by extension line to make sure you're using the filetype you'd like to use (for web BMP or JPEG should work fine) and select a good place to save the file.

Click Save. If necessary select the 'quality' you'd like the file to be saved at. I like it really high!

Boom, done. Feel free to ask me any questions if you have them!
posted by carsonb at 8:09 AM on February 25, 2012 [4 favorites]

If you want the result to look like a single wide photo of the original scene rather than a pasted-together collage, use Hugin.
posted by flabdablet at 9:43 AM on February 25, 2012

I use Powerpoint. Just put the images together on one slide as you like them, highlight them all, right click, and group. You can then right click and save it as an image.
posted by sarae at 10:27 AM on February 25, 2012

Too late for you this time, but for anyone else searching, the way to do this with ImageMagick is:

montage -geometry +0+0 -tile x1 -background none image1.jpg image2.jpg image3.jpg image4.jpg image5.jpg newimage.jpg
posted by fings at 12:31 PM on February 25, 2012