How to Create a Collage in Blogger

A couple of my favorite blogging friends recently asked me how I make my collages. You asked, and I'll deliver! Tonight I created a collage of pictures from our family bike ride to our favorite candy store (I know... bike ride to a candy store is kind of an oxymoron, but humor me here). Below the collage is a step-by-step tutorial using Photoshop Elements 7. You can click on the pictures to enlarge them if you need to. Are you ready?



Import all of your pictures into Photoshop that you plan to use. Select an image by double clicking it. Then at the top select Layer--> New-->Background Layer. Select the corner of your picture to reduce the size. It will reveal the blank background. Actually, the background will look gray and white checked, but it will be invisible when you publish.

Click the green check mark if you want that image included in your collage. Then, drag and drop each picture onto the checked background that you want included. Don't forget to click the green check mark for each picture.


Now your collage looks like this. You can change the size of any picture simply by clicking on the image to select it and grab the corner to size it up or down. If you want to overlap or skew the pictures, put your cursor near the corner of the picture and a curved arrow will appear. You can turn the picture right and left to make it just right. If you want to add a drop shadow and make it look kind of dimensional, then look on the right side of the screen for the little white hand. That's my cursor. Select "drop shadow" and then choose which kind you would like. You must select one picture at a time, then click on the drop shadow that you'd like to use, then click "apply". Do this for each picture.

The next step is to select the "crop" tool on the left of the menu. Crop the collage to your liking, remembering not to crop it too short and cut off any drop shadows.

Now we have to save the collage. At the top, select File-->Save to Web.

On the far right side type in how many pixels wide you'd like it. I chose 550 because the center of my blog is just a bit bigger than that. Also (top right) select PNG and click the "transparency" box because we want the checkered background to disappear when we publish.

When you click "OK" select the location that you would like to save your collage. Remember where you save it. I'm saving mine to a folder I titled "Blog".

Now I minimise Photoshop and open up a new window and go to Photobucket.com. You have to upload your collage to a site like this. They will automatically generate a HTML code for your blog. After you upload it (It really only takes like 20 seconds or less), find the place that says "HTML code for Blogs" (Look at the bottom right hand corner. It's highlighted in blue). Right click your mouse and copy that code.

Open up a new post on your blog. Click the "Edit HTML" tab. Paste the code.

Now if you're like me, you want immediate gratification to see if this thing worked. Click the "Preview" button. Ta-Dah! You did it! Your collage is ready to publish.

What are you doing still reading? Go ahead... Give it a try! Go on now!

Me?? I'm off to brush my teeth from all that candy.