An Easy Design Trick: Using a Photo’s Natural Lines

by on 5th September 2011 with 18 Comments

screenshot

Today we’re going to explore a super easy design trick for combining text and photos in interesting ways. I’ll teach you four methods for using the directionality of a photograph to determine a corresponding design layout.

This one will be fun and is sure to challenge the way you think about images in your designs so sit back and come along for the ride!

No Rules

I’ll preface this article with a brief admission that the following tips do not represent hard and fast rules that you must follow in your design work. Instead, it’s simply one method (in four parts) that you can use to align various design elements in relation to the content of a photo.

Obviously, considerations like whitespace often have a primary effect on where you place text on a photo. Keep this in mind as you work with your own images in this manner.

Why Do This at All?

Though it’s not necessarily a requirement, I strongly encourage you to always take a good look at the hard lines in a photograph that you’re trying to combine with text and graphics. Repetition is one of the most important design principles and this is a natural implementation of that idea. By analyzing the photo and following its directionality, you find incredibly easy ways to make your graphics and text look truly integrated, as if the image was created expressly for the purpose you’re using it for, a great illusion if you’re using stock.

So what do I mean by suggesting that you follow the existing lines in a photo? Let’s take a look.

Literal

Our first method for using the lines in a photo is the most simple and direct. All you have to do is analyze the image’s content and use any hard lines to help align your artwork in a very literal fashion.

The first step in this process is obviously to find the right photo. Not every image will lend itself to the techniques in this article, as a prerequisite, you must be using something with clear and hard edges. The following image from photographer Stephen Heron is a perfect example.

screenshot

As you can see, there are plenty of distinct, large and solid colored areas. The framework of the buildings provides naturally separated sections that can act as containers for our content.

In the modified version below, I’ve added some graphical cues to the image so you can start to think about the flow of the lines as something that stands out and can be easily utilized.

screenshot

With these guidelines in mind, we can place our content right in line with these existing lines. The result is quite nice. On it’s own, this layout would seem erratic, but with the image governing our placement, it works perfectly.

screenshot

Too obvious right? You didn’t need an article to tell you to place text in the most natural spot in a photograph! This is merely the starting point of our conversation, we can use this logic to go even further into some placements that may not jump out at you quite as much.

Extended Literal

In the previous example, we took our text and graphics and placed them directly on the existing lines and edges in the photo. However, it’s often the case that a busy photograph will prevent this from being a natural placement. For instance, in this photograph by theklan, placing text right over the stairs would make for some difficult to read content.

screenshot

The natural area of whitespace is on the right side where we have a large empty wall to work with. Now, we could haphazardly toss our text in this space and call it a day, or we could be a little bit more intentional about our placement by considering the existing guidelines that the photograph is offering us.

screenshot

Notice how I’ve drawn the lines to coincide with the steps, even though they don’t extend all the way across the page. The steps serve as the primary focal point of the image and they have such nice hard lines that your eyes will tend to follow them. If we then use these lines, our text should theoretically have a very natural placement that seems to fit really well with the image.

screenshot

Notice that, from the top to the bottom, every single piece of text has a very intentional placement that coincides with the image’s preexisting directionality. These lines aren’t only governing where I set the text, but even the size of each piece.

This time our resulting effect is much more subtle. Most viewers won’t even notice what you’ve done, and yet there’s a definitely feeling of rightness to the way the text is placed.

screenshot

Repetition

Remember our good friend repetition? This time around we’re going to leverage this principle heavily in light of the existing lines in the photo.

The following image of birds on a wire, taken by Lali Masriera, provides the perfect canvas for this experiment. The lines here are crystal clear and there’s a good deal of whitespace to the right that we can use for content.

screenshot

This time, in placing my lines, I did something a bit different. Not only did I place lines that correspond to existing elements on the page, I actually used those as the starting point of a pattern or grid. I’m taking some liberties and adding my own lines, but they directly mimic those already in place. Once again, this is simply going to make our placement a bit more natural than if we defied this directionality with a perfectly vertical placement.

screenshot

With those lines in place, we have created clear and usable sections. Note that these didn’t necessarily exist in this form in the original image as they did in our first example, instead we used the existing content as inspiration for a repetitive shape.

screenshot

Keep in mind that you can take this principle to the extreme and actually rotate your text to further mimic the directionality of the existing lines.

screenshot

Inspired Symmetry

For our last example, we’ll be using a method that’s very similar to the repetition method above, but in a more complex manner. To start, I grabbed this awesome image from photographer Daniel Zedda.

screenshot

I really love this image, the composition is incredibly solid and uses a technique often found in European renaissance art. If we think about the strongest natural lines in this photo, they don’t really stretch across the image like those in the previous examples. Instead, we see a very defined pyramid take shape.

screenshot

We can use this shape as inspiration for how we place our text on the page, just as we did with the bird photo. To do this, draw the lines that make up the triangle, then copy that triangle and place it in the area to the left. Finally, use this new triangle as a guide for text placement.

screenshot

Notice that, in the final result below, I didn’t actually continue the pyramid shape all the way to the bottom. Instead, my lines of text seemed to naturally conform to an almost diamond shape, and that’s completely acceptable. Once again, you’re making the rules here so feel free to distort and rethink the natural lines in the photo rather than simply taking them so literally.

screenshot

Conclusion

The goal here is to not to follow my suggestions exactly but instead to simply become more aware of how the existing content in a photograph can be used to guide and inspire you to create unique designs that break away from the cookie cutter mold that’s so easy to fall into.

Leave a comment below and let us know what you think of these examples. Do you think about the directionality of the content in a photograph before adding elements to it or is this a new idea to you?

Comments & Discussion

18 Comments

  • Carol

    It’s amazing! Simple tricks that can be used in many differents compositions. I never stoped to see this, and now, I go use in my compositions! Thanks a lot .
    (apologise me some gramatical wrong, becouse I’m brasilian and my english don’t is the best :)]

  • http://markarmstrongillustration.com Mark Armstrong

    The idea of using a photo’s natural lines was completely new to me. What you’ve done here is brilliant– one of the best design tips I’ve encountered. Thank you, Joshua!

  • http://bennyjien.com Benny Jien

    Brilliant technique!
    Thank you Joshua!

  • Lian Jim

    Inspiring! Simple tricks but it helps a lot!

  • http://www.webdesigncreare.co.uk Kim Ruddock

    Marrying text within a photo can be a really tricky task. It looks so good when pulled off effectively and so bad when done without any thought about the composition of the picture. The example of the steps picture here shows just how lines that aren’t obviously there can help you structure text in a visually pleasing way.

  • G369

    Thanks Joshua! Very interesting.

  • http://www.ck-studio.de Christian

    Thanks for the tricks! :)

  • LJ

    nice

  • me

    very very nice ticks!

  • William Allen

    I love it. So simple and so effective.

  • http://www.mailette.com Ben

    Great tute!

  • zip

    Great tips!

  • http://www.vancebell.com Vance

    Love composition tricks!

  • ndimos

    Now this is an article that really impressed me. Thank you a lot. We see this “art” almost everywhere, everyday and you came to make it clear to us.

  • http://www.adhamdannaway.com Adham Dannaway

    I think as designers we all use these techniques without even knowing it. It’s great to actually be conscious of these things though. Thanks :-)

  • http://gauravmishra.com Gaurav M

    Damn GOOD!

  • Bendusi

    How do you create guides? I have a problem with making guides for pictures where I need guides not to be horizontal or vertical. Since I’m a complete beginner I don’t really know how to do that. Any help?

  • http://mayukadotjp.site11.com/ Mayuka

    Little thing but it makes huge difference. Thank you!

Subscribe
Membership
About the Author