Tips for Designing With Multiple Photos

by on 9th August 2011 with 12 Comments

Photography is one of your most powerful resources as a designer. Here we’ll take a look at some clever and unique ways to create photo-centric designs using multiple images.

Using Multiple Photos

It’s always nice to keep your content to a minimum in order to maintain a clean, easy to scan page. Using one primary image with some accompanying text is a simple model that works for a lot of purposes, but when you’re designing for real world clients you often have an entire folder full of resources that you’re expected to use.

As a designer, it can be pretty difficult to figure out an attractive way to mix various images into one cohesive layout, especially if you’re working with print instead of an unlimited interactive space. Save yourself hours of fiddling by quickly reading through our examples. Feel free to steal these ideas and use them as your own!

Stack ‘Em

Full bleed photographs can make for a very attractive and eye-catching page. Often though, designers abandon the idea and general layout of a single full bleed photo when it turns out that they need to feature two images or more.

However, it’s pretty easy to create a layout that maximizes two images. For starters, try splitting the page half way and giving equal room to each.

screenshot

As you can see, text would’ve been hard to place right on the photos so I simply drew a stripe as a holder for the headline. To prevent a hardline from showing, I blurred the two images together under the text area.

This effect is great for showing not only related images but also themes with a conceptual duality: soft and hard textures, day and night, etc.

Don’t Be a Square

With the same general idea in mind, you can achieve a lot of different effects. For example, in the design below I created diagonal stripes of content rather typical horizontal lines.

screenshot

Notice that I’ve kept all of my content at normal rotations. Neither the text nor the images are diagonal, only the shapes that they’ve been put into have this characteristic. This keeps everything nice and easy to read/interpret while allowing you to take advantage of a more unique layout.

Photo Grid

One extremely popular and very practical way to work tons of images into a single page is to arrange them in a grid.

In the example below I started by creating guides in Photoshop conforming to a roughly square grid. This is an important step for making sure you get the proportions right and saves you a lot of hassle in the long run. From here you just drop in a few images and mask them to different shapes within your overall grid framework.

screenshot

As you can see, I filled the spaces with solid colors, which I grabbed with the eyedropper from the surrounding images. You always want to make sure that any fill colors that you use in a design go well with the photography and one of the best ways to do this is to grab your colors right from the pictures.

Create Grid Lines

The basic grid layout like you see above comes in a million different variations. Try messing with the size of individual cells, the ratio of color fills to images, etc.

One very common technique is to accentuate the individual photos by creating clear separations. Basically, just make a thick white line around the edge of each photo and you get a different but equally attractive effect.

screenshot

Editorial

For a more editorial look, try the layout below. Here we feature one image primarily and then grab a related image to accompany it down by the text. It’s not unlike a very simple version of the grid above, you’re just using fewer photos.

screenshot

One quick note about using multiple photos in a single design: always make sure the colors go well together. When I created the layout above, the primary image was taken in black and white and the secondary image was in color and had a very cool white balance. The bluish light was simply wreaking havoc on my color scheme so I desaturated the image and suddenly the two photos looked like they were from a single shoot.

Photographic Text

I’m a big fan of masking images to text and have done so in a couple of recent articles. Here we see it as a way to work in another related photo in a subtle fashion.

screenshot

Since the primary image is of a wooden bridge, I grabbed a wood texture for the text. The result really ties the text in nicely with the photograph below it, even more than a simple eyedroppered color fill would have.

Strip Down

Our final suggestion uses a vertical strip layout, perfect for when you’re trying to create an overall environment or mood and don’t necessarily need to show the full images.

screenshot

This effect can be overwhelming if you go too far with it. Further, it can be hard to place text on top of so many different images. For these reasons and more, it’s good to separate out one image and feature it more prominently than the rest.

Once again, notice that my proportions are very intentional. First, I split the page in half and then split the right side into thirds.

Lessons

We went over a lot of stuff really quickly. More important than the individual examples are the lessons that each teach us. First, occasionally you can get by with using two photos in a full page as if they were a single image. Keep in mind that you don’t have to always design in perfectly horizontal or vertical lines.

Next, when using a grid of images, make sure you take the time to lay out your guides so that the relative proportions are correct (unless you’re going for an organic layout). Fill in any gaps with simple color fills by extracting prominent colors from the surrounding photos. Experiment with maximizing the appearance of the grid lines or hiding them completely.

Finally, when you’re working with multiple photos, it’s almost always a good idea to still have one prominently featured image that stands out from the rest. You can see this at work in most of the examples above. Always establish a visual hierarchy and try to avoid giving everything on your page the same visual weight and importance.

Conclusion

I hope the examples and lessons in this post have set your brain spinning and thinking about new ways to incorporate multiple photographs into your designs.

It’s far too easy to get carried away and create a busy, overloaded page so take care to use some constraint and strive for clarity over chaos. As you continue to add visual elements to the page, remember that there’s a point of diminishing returns where you’re actually lowering the impact of the design.

Comments & Discussion

12 Comments

Comments & Discussion

12 Comments

  1. Amelia says:

    This is something I struggle with often, so I really appreciate this article, and will certainly be employing some of these techniques in the future! As always, informative and helpful post – thanks!

  2. Kim Ruddock says:

    Composing multiple images in a harmonious way can be a tricky task. As this articles shows it is all about balance in composition of the photos that makes these examples work well together. I’d never thought of creating a photo grid before. I also like the use of cropped strips of image to create a mood rather than forcing the use of a whole image.

  3. It is not easy to grind two or more then that images together to make something really good out of it.

  4. Char says:

    Love this article! Thanks :)

  5. Immaculata says:

    This is really something! Thanks a lot

  6. Aljiro says:

    Interesting approach. I think that picture selection would play a big role with the visual harmony in a page.

  7. Eileen says:

    What a beautiful collection of ideas! I am going to use the grid Ida right away, thank you.

  8. CiNiTriQs says:

    Nice “layout” of ideas. A question I do have though: what “proportions” do you use? Do you use the golden ratio? fibonacci? Pi? Just wondering what ratio’s are being used most often.

  9. If you’re looking for free photos to use in your designs, there are loads of links here http://www.freeres.info/free-stock-photos.php

  10. Alex says:

    Really interesting ideas and sure will come in useful! I probably seen the top one used the most while browsing sites.

  11. An excellent article! Very concise and very useful. Thanks for some great tips.

  12. NikeJordans says:

    thanks for ur sharing, I like your blog, content is very rich, allow me to leave a

    message well, wish you are lucky!!!!!

Leave a Comment

Subscribe
Membership
About the Author