17th September 2007

Are your visuals saying what you want? Part 2 Color & Contrast

Create more effective training materials, blogs, websites, etc. by understanding how to use visuals that reinforce your message not detract from it.

The series

This post is the second in a series about visual elements in images. The first one, Are your visuals saying what you want? Part 1 Visual Elements is about dominant lines and shapes. The next will be about texture and pattern.

Changing the emphasis in an image with ‘contrast’

Your eye will naturally be drawn to areas of contrast in an image. You can use this to your advantage to control what part of a visual you want to call attention to. The intention of this post is not to tell you how to create these effects (done in Photoshop), but rather to begin to understand the elements in an image which contribute to the visual story, so you can make better decisions about selecting images to use in blogs, presentations, training materials, etc.

With enough practice, many people can learn to use Photoshop and other image manipulation software to emphasize the visual story you want to tell. The important part here is training your eye to ’see’ how your images affect what you are presenting. Even if you don’t have any desire to learn photo editing software, by grasping these concepts you will be able to convey the effects you want to create to a graphic artist much more easily.

In the image below on the left side, the painters blend into the building. By making the painters lighter in the version on the right, they stand out more. I also added more yellow to the sky which helps it to blend better with the yellow building and to better help keep the focus on the painters.
PaintersPainters contrast

In the next image by adding ‘contrast’ to the sky, the focus of the image is shifted up to the top of the hill. The dark top left corner balances the dark in the bottom right, further encouraging your eye to focus on the center of the image. Notice how the image on the left doesn’t have a focal area and leaves your eye wandering in search of one.

HillHill contrast

This example is more subtle, but the cats eyes in the left-hand photo blend in with the surrounding fur. Adding some color and increasing the contrast makes the grey fur darker which makes the cat’s eyes more pronounced.

Cat Cat contrast

To dramatically change the mood of the photo on the left, I added a lot of ‘contrast’ and made the eyes whiter. We call this the “Manson Family Effect”.

eyes Eyes Contrast

Bringing attention to your visual story through color

Color theory is very complex. It took four years of art school and many years of practice afterward for me to really be able to work with it consistently and beyond having a ‘knack’ for it. I’m only going to scratch the surface here, with a few concepts.

Yellow is naturally lighter than other colors. As you saw above with adjusting the contrast in the images, in general your eye is drawn to the lightest areas of a photo, particularly when it is next to a dark area.

Bike Riders Yellow

Bike Riders Red

Bike Riders Grey

The photo of the bicyclists wearing yellow is just as it came off the camera. The jackets are bright yellow, but you might not realize how light in color they are until I change the color to bright red in the next photo.

When the jacket color is adjusted to red, you can see how light they are….most would say they are pink. The jackets appear to pop off the page and almost look detached from the bodies underneath.

When I remove the color contrast by making the jackets grey, they blend back into the photo. Notice how all the junk in the background becomes more evident. In the top two photos your eye is drwn toward the colorful jackets rather than the wire running through the woman’s head. Ouch!

Your eye doesn’t see like the camera. The eye is selective in what it pays attention to. The camera captures everything that is there. Sometimes by adjusting the color and/or contrast we can enhance what we want people to pay attention to and keep them from focusing on the things we don’t.

Flower in pinkFlower turned grayflower in yellow

Here is another example. The original photo is on the left. The pink flower is quite bright and stands out. When I grayed the color, it sits back and the yellow above it becomes more important. There isn’t a strong focal point in the middle photo. When I tinted the pink flower to yellow in the far-right photo, the flower moves forward to being the focal point once again.

For maximum effectiveness you want to control where the eye of the viewer is being drawn, and align those areas with the most important elements of whatever you are trying to communicate.

Want to learn more about color?

One of the most important books about color is Johannes Itten’s , The Art of Color. While it is a bit dense, the illustrations are priceless. I have spent many hours studying this book. Luckily, there is an online mini-course that covers many of the principles in the book in an engaging fashion. Color Contrast & Dimension in News Design. It was created for journalists, and is well worth visiting.

If you’d rather just play with colors with some suggestions about what colors might combine to convey a particular feeling, try Palette Man.

If you have a color you are trying to find other colors to go with it, try Color Harmonies.

posted in Visual Langage | 3 Comments