Designing From a Photo: Quick Tips and Best Practices

by on 20th July 2010 with 15 Comments

screenshot

Photography is the best thing to hit design since typography. A quality photograph can make a poor designer look good and a good designer look great. It can convey emotion, bring in color, provide and provide a strong focal point.

Today we’ll look at a few tips, techniques and ideas for designing around great photography.

Where Do I Find Good Photos?

First of all, one of the best skills you can pick up as a designer is photography. Photographers create images, designers use imagery to communicate; the two fields simply couldn’t be more complimentary if they tried.

We’ll soon be publishing an article that relates more to this so I won’t go any further now except to say that you should check out PhotoTuts, an awesome blog that can help you become a better photographer no matter where you currently lie on the talent spectrum.

Now, that said, even if you are an awesome photographer, you won’t always have the time and resources to shoot the photo you need yourself. In these cases, stock photography is your friend.

However, using stock imagery can be tricky so be sure you read our article 10 Pitfalls to Avoid When Using Stock Photography.

If you have a budget for stock photography, check out iStock. It might be the cliche choice but there’s definitely a reason for that. They have a ton of really high quality affordable images.

screenshot

If you have no budget, try SXC instead, a completely free stock photography site. There is a ton of horrible stuff on SXC but you’ll also find quite a few gems if you’re willing to put some time into it.

screenshot

Finally, you should definitely check out Flickr Creative Commons licensed photos. Flickr is a huge source of excellent photography and the creative commons collection is quite vast.

Just be sure to keep an eye on the attribution requirements for each image. They’re free to use but usually require a link or credit of some form given along with the usage.

screenshot

Color Schemes

One of the most essential methods for designing a page around a photograph is nailing the color scheme. Normally, creating a solid color scheme involves a lot of thought and planning and can be quite the intimidating task if you’re new to design.

However, when you’re using photography as the hero, it does all of the work for you. One of the oldest tricks in the designer’s bag of goodies is to build a color scheme straight from the colors in a photo.

As an example, consider the image below.

screenshot

What I’ve done here is simply used the Photoshop eyedropper to grab some colors from the photograph. This gives us a really nice palette to start from that integrates tightly with our imagery.

From here simply pick a few that you like and run with them. Feel free to experiment with different shades and opacities. The colors are only a starting point and aren’t necessarily strict guidelines to obey.

screenshot

Typography

The thing that I see the most designers struggling with regarding photos is how to integrate type into them. I can’t keep track of how many websites and posters I see on a daily basis that toss out all ideas of readability because they want to use a nice thin typeface on an “eye catching” background.

What this results in is something that might look decent at a glance but actually hurts your head when you attempt to read it.

screenshot

My first piece of advice would be to pick a different photo and/or font, but sometimes you can’t simply help it. The client wants what the client wants and you often can’t do a thing to change their minds.

In these situations, your job is to increase the clarity if the message. If you’re stuck with the busy photo and the thin girly font, look for ways to make it stand out more.

One of the easiest ways to accomplish this is by borrowing from the color palette method above. Sample a nice solid color from the image and create a color bar to hold the text.

screenshot

Don’t stop at just making a colored rectangle. In the image above you can see that I applied a slight shadow to the box, reduced the opacity and blurred the photograph in the area behind the box to give it a sort of frosted glass effect.

Choosing The Right Photo

Ideally, you as the designer will have the right to choose both the photo and the typography that you implement. In these cases, you’ll want to find something that has enough nearly empty space to hold your message.

It doesn’t have to be a solid background but it should be as simple as possible and not have a lot of color contrast in the area where the type is going to be placed.

Contrast is a good thing in design, but putting it in the background behind your text is simply improper use that causes visual confusion. The contrast should instead be between the type and the background as in the image below.

screenshot

Here we have the imagery pushed all to one side and the text to the other. The white and yellow in the letters are not chosen from the image like the examples above but selected instead because they have a high level of contrast on a black background. If I had sampled the man’s shirt color, the readability would have suffered greatly.

If you click on the image above you can see the original photo. The background was actually a little busy and didn’t extend very far past the man’s shoulder. I painted out some bokeh and extended the right edge to suit my purposes. This only took a minute and saved me hours of searching to find that one photo that perfectly fit my needs.

Don’t worry about finding the perfect photo, instead find one that has a good structure that you can work with.

Bleed

Whether it’s on the web or in print, there is something about a full bleed photo that just looks classy and beautiful. However, it’s not always practical or possible for what you have to work with.

For instance, say the client gives you a vertical photo and a horizontal ad space, then what? In these cases, there are several tricks you can try out. Cropping the photo in a horizontal way is the first thing that comes to mind, but will work only in a small number of circumstances.

A far more practical solution is let your photo fill the vertical space and fill the rest up with a solid color. This solution is simple and looks sharp. It also gives you a lot of room to place your messaging and any smaller images you need.

In the design below I again used the color sampling trick from above (you simply can’t overuse this trick when designing with photos) to grab one of the darkest colors I could find in the image, in this case the color from the giraffe’s spots.

Since the photo has a light background, sampling one of the darker colors makes for a bold contrast between the two halves and really brings a lot of visual interest to the page.

screenshot

Don’t Cry When You Can’t Bleed

When you’re working with print, there will be plenty of times when you simply can’t bleed either the photograph or the color off the edge of the paper. This limitation often comes from working with small organizations that will be printing materials themselves and can’t quite handle borderless jobs.

What you don’t want to do in these situations is design something that bleeds to the edge and then allow the printer to simply cut it off where it will, leaving a white border around the edge. This screams cheap print job and is therefore quite tacky.

Instead you want to create a design that has a lot of whitespace so that the borders look intentional. If done properly, no one will ever know your printer couldn’t go to the edge, it simply looks like you made a design decision to not take it that far.

screenshot

In the image above I’ve applied plenty of spacing on all sides of the photo so that the border seems intentional rather than incidental. Also notice how I brought the sky texture behind the letters to make it feel like the photo stretches on beneath the white. This is another great little trick you can use to increase the effectiveness of the borderless illusion.

The method above works fairly well in many cases but if you have freedom in your photo selection there’s an even classier way to go about this problem.

Finding an image shot on a white background really gives you an effortlessly borderless look that won’t seem cheap or unprofessional in the least.

screenshot

Notice how much the toad above really jumps (pun intended) off the background. When utilizing this technique be sure to find an image with a lot of contrast and bright colors so it really grabs the attention of your viewers.

Also notice how I flipped the original image so that the toad faced into the ad space. This is a simple trick that draws your attention into the ad and toward the content rather than away from it.

Conclusion

The information above should give you a lot to think about the next time you consider designing with photography. In fact, the key takeaway here is to necessarily design with photography but to design around photography.

A strong image is the perfect hero for your design and your job then becomes to wrap the communication around it in such a way that both are highlighted effectively.

The best bits of advice above include never sacrifice readability, always pull colors from the image if you can, contrast is your friend and never let bleed constraints bring down the perceived quality of the final product.
Thanks for reading, do us a favor and share the article on Twitter or through your preferred method if you enjoyed it!

Comments & Discussion

15 Comments

  • http://knowledgecity.com Jae Xavier

    Yes – Photos can be a perfect hero.

    Designing from a photo also goes great when doing Power Point Presentations/ Keynote.

    When you have a complex idea that involves a lot of emotion and data, hands down a photo will do that job.

    But photos in a presentation context don’t do good with out a well rehearsed presenter.

    Well written article by the way, I enjoyed it.

  • Brian Jones

    Excellent tips – thank you for the post!

  • http://creativeaces.com Joann Sondy

    Nicely written article.

    I’d like to add that many times we — the designer — are provided images by the client/agency. Best option, work side-by-side with the photographer to get the desired shots.

    It is our job (skill set) to use the visuals in the design to tell the best story; sometimes that means leaving poorly written copy off the image.

    I may have an advantage, I’m married to a career photographer. (http://vintageimage.biz) I can tell you there is a HUGE difference working with top quality images that don’t require ‘Photoshop’ to them better.

  • http://www.meteora.com.br Bruno

    Fantastic post! You taught us lessons that would take some time to learn.

  • Poonam

    Nice Articles and quite helpful also….thnx

  • http://www.liveanime.org helium

    Some of my favourite designs look so great (not just because of the web design aspect of the page) but the excellency choice and use of photography.

  • Pingback: CSS Brigit | Designing From a Photo: Quick Tips and Best Practices

  • http://www.rgbtool.com Ignacio Roda

    Great post!

    I’m not a designer, I’m a programmer. But with this kind of articles I learn a lot for improving my websites!

  • http://profeivanonline.blogspot.com profeivan

    Great article! Thanks for sharing.
    In Adobe Kuler http://kuler.adobe.com/#create/fromanimage you can upload a photo and the application will pickup colors for you.

  • http://ibrandstudio.com Eko

    I really enjoyed this post, especially in the use of pictures as examples.
    Bookmarked for reference

  • http://anelllya@blogspot.com Anelia

    Amazing article! Thanks For the good advices! i will have it in mind the next time I put myself designing a new project! Thumbs Up!

  • http://www.crearedesign.co.uk Laura Meider

    This is a great article. There are some very helpful tips here. The color schemes section was so simple but the outcome has a very strong impact. Photography is a key factor but as a designer it is also knowing what to do with the image. It is like you have to go through a check list of things to try and explore and ways to make it work. Thanks for the helpful tips in the post.

  • http://aharmonyofhues.blogspot.com/ Ayush Kumar

    Yes. Readability and photos is one very important aspect that only true designers and creatives can understand. Unfortunately, there arn’t many such people in this world..

    A great read, btw!

  • Pingback: Web Design Critique #45: Optimized Cable Company | Design Shack

  • http://designshack.net Gentian

    hey si te bej nje dizajn me emrin Inclusive

Subscribe
Membership
About the Author