November 5, 2009 | Design Basics
As we look around our world, we enjoy an amazing spectrum of colors. But it seems like when it gets translated to the web or printed media, something suffers. Why does this happen, and how can you improve this?
In a typical graphic design project we decide to take a picture of something to be part of a web site, brochure, book cover, or presentation. It may be a picture of a new product, or it may be a lifestyle shot that expresses the warm & fuzzy benefit of a service. Then we take that image and use it on the web or in printed form. Here’s what’s happening.
Real life, real color
When you look around you, you see so much visual information. Depending on your eyesight and the conditions, you’re taking in shades of color, textures, details and nuances in lighting. When you snap a photo with a digital camera, you’ve instantly cut out lots and lots of visual information.
Cropping. By cropping the picture, you eliminate everything outside the frame of the photo. Sometimes it is the context of something that makes it look a particular way. For example, a pale yellow shirt against a bright white background will look yellow, but if the white is taken away, it may just look dingy or off in color.
RGB digital image. By taking a digital photo, you’ve also translated it to the red/green/blue world of digital images. While rgb is remarkable in its ability to display a wide spectrum of color, it’s still a conversion that changes and alters colors. Some colors and images suffer more than others. Depending on your equipment and skills, the change from what you saw through your eyes and what you see on screen can be huge.
You’ve chosen one depth of field. Without even noticing it, we are often switching from big picture view to upclose view when we scan our environment. When you take a photo, it fixes the depth of field. Sometimes this can create a dramatic effect that shows things in a way we rarely seem them as humans, but other times it just drops out details. Unlike how they show it in movies like Mission Impossible, you generally cannot just zoom in more and more on a digital photo and find more and more detail revealed.
Removing context. Often we are unable to crop our minds as fully as the camera crops an image. In fact, we are planting information, even subconsciously. Here’s an example. It’s a beautiful sunny day and you take a photo of a wonderful panoramic view. In your mind, it’s a clear day therefore the sky is blazing blue. When you view your photo later you see that the sky was not a rich blue. It was clear, it was not overcast, but it was not particularly blue. Look through some of your scenic vacation photos and you’ll see what I’m talking about.
Putting images on the web
The next step for your images may be the web. When you move your digital photos from the raw format on your computer to the web a couple of things happen.
Compressing files. Usually, we compress files so they are not too large and slow to download. We reduce the resolution and the number of colors before creating a web image. Converting to jpeg, gif or png reduces the number of colors that are used to build the image. Depending on how small you want to make the image (or how much you reduced it from the original) you may see a lot detail and nuance gets lost.
Different monitors have different settings. Once you post an image on the web, you cannot control how it looks on someone else’s computer. The viewer may have the brightness/contrast much lighter or darker than you do. They may have an old monitor that puts a blue cast over everything. They may be using their laptop outside where it’s hard to see anything on the screen.
You may also be using photographs in printed form, especially for brochures, flyers or catalogs. And again, the image quality can really suffer.
Four-color separation. When using images in print, we are able to use large, high-resolution files. However, traditional offset printing uses CMYK (Cyan, Magenta, Yellow and Black) ink colors to recreate the entire spectrum of colors. And while it does an amazing job at this, there are certains type of colors that never can be replicated using four-color process. Depending on what you’ve photographed, you need to understand that certain very bright or very subtle colors are hard to duplicate.
On paper vs. on screen. When you view images on a computer you get a backlit type of effect from the monitor. This can really make certain photographs pop. When you translate this to paper, that glowing feel is greatly diminished.
Paper quality and printing matters. When you print a photograph using offset printing, the quality of the paper stock can be a big factor in how good things look. When photos are critical (such as clothing catalog where people want to see what they’re getting) you need to use high-quality, bright-white, coated paper. You can imagine that something like an ivory color paper would give an ivory-hue to any photos printed on it.
How to work effectively with color in photos
Here are some pointers to get the best color reproduction out of your images:
- Start with crisp, high-quality, well-lit photos. It’s difficult to make it look great when it started as a blurry, grainy, poorly lit photo from your cell phone.
- Convert it to the correct color system you’ll be using for your final output: rgb for web projects or cmyk for print. You may need to adjust each version slightly for the best final look.
- Always go back to the highest-resolution, raw file. Do not repeatedly resize, resave and convert the color format or image type. Each of these changes has a way of losing visual information. When you need a new version, go back to the original.
- For print projects, work with a printer who understands and cares about color accuracy. Demand a contract-quality color proof and make adjustments during the proofing stage, before going on press. When you are in the pre-press phase you can still adjust photos individually, once you are on press you would be making an overall change (such as decreasing the black) which may have negative effects elsewhere.