Ask Candy: Picture Layouts in Blogs

This week's question comes from Angela Flicker from The Artists' House. She's a quilter and the gal behind "A Crafty Holiday".

I'm new to wordpress and often the littlest things take me forever to figure out. Here's one question I have: How do people make picture collages?

You know, this is an excellent question! Back when I first started reading blogs, I loved all the wonderful pictures - and I'm sure I'm not alone. After awhile I started noticing that some blogs had pictures put into pretty neat little layouts, while others would just have single pictures inserted between the text. (Actually, that's how Linda and I became friends...I love her picture collages for her "zoomed local" series on Scoutie Girl, and would comment how awesome they were!) When I first started blogging, I realized that I could align single photos to the left or right, allowing text to wrap around them, but that about all I could do. I first thought that when I upgraded from a free wordpress.com blog to a self hosted wordpress.org blog that I'd be able to have more control on how pictures were laid out. Of course, now I know that that's not how it's done...but it took me quite awhile to figure out that cool layouts on blogs were done before blogging, not during!

So, these collages are done with a photo editing program! I am lucky enough to have Adobe Photoshop CS4 (yay, education discount). Photoshop does have a bit of a learning curve (hah! can you say understatement!), it's so powerful, so capable to do so much, that it took me awhile to learn how to do something like this:


But now that I know how, it doesn't take THAT long! It does take several steps though!

1. Edit the photo for brightness, contrast, color closeness etc.
2. Crop to the proportions I want, I then usually save this high resolution photo for possible printing.
3. BUT, now I'll make the photo smaller and thus much faster to load on the web. I'll resize my photos to around 400 pixels wide and then, the blessed "save for web" button on photoshop, which strips out a lot of extraneous data and makes it so much smaller. If your photo editing program doesn't have a "save for web" option, I would used it to make the photo 72 dpi.
4. I then start a new web document and drag my pix onto it. I add a drop shadow and move the pictures where I want them (I may do a bit of resizing at this point to, when I see how each one relates to the others).
5. Finally, I add text if I want and "save for web" again!
6. Phew!

Before you spring for a photo editing program, there are tons of them online that are available for free. Gimp is a pretty popular one, and here are a bunch of web based alternatives. But no matter how you slice it, making a collage involves some work. So...I decided to see if there were easier ways and lo and behold, I discovered a toy that I really didn' have time to play with...but did anyway: Shape Collage. This is free software (but to get rid of the water mark you have to upgrade to the pro version for $25). You drag in some pictures, press a couple of buttons and it generates collages for you!

Here's one I made:

That's pretty cool, especially because I didn't spend time on steps 4-6. But this can do some seriously awesome stuff. I drew a quick butterfly house shape and used it to make a collage in the shape of a butterfly house:

OK, this is seriously cool! Must...step...away...from...computer...or...will...spend...hours... playing... with...this!

Hope this gives you a couple of ideas Angela!


[Candy lives in California with her husband, 2 boys, and dog. Aside from being wife, mom, teacher, crafter, web guru and all around doer extraordinaire she manages her own business,Candied Fabrics. You can read her blog here.]