Balancing color and tone using levels

- Hi there, this is Sue Jenkins with productivity tips for web designers. Today I'd like to show you how to improve your photographs for the web, by balancing colors and tonal range with levels adjustment layers. Even with the best equipment it can be really tough to get the right exposure with a good color balance. This is especially true when taking photographs in unusual lighting situations like using a flash, shooting in doors under tungsten or fluorescent lights, shooting outdoors under street lights or even at dusk when the sun starts to cast a long, orange glow.

In fact, it's the light that plays a key role in capturing a balanced photograph with a smooth tonal range. When the light is off, the tonal range is going to be off too. Fortunately, with Photoshop you can quickly alter the tonal range, brightness and contrast in a photograph all using a levels adjustment layer. And best of all, it only takes a few seconds. Let's take a quick look at a few examples in Photoshop to see how this works. First, to add a levels adjustment layer to your file, you can click the levels button on the adjustment panel.

That's the second one in here right there. You can also click on the add new fill or adjustment layer and choose levels here. Or apply a levels adjustment layer through the layer menu, choosing new adjustment layer and then levels. Regardless of how you choose it, Photoshop will add the layer to your layers panel directly above the layer your had selected. And it will open the properties panel to show you the layer histogram. Technically speaking, your histogram combines the RGB brightness values into a single array of tones that range in brightness from 0 to 255.

Now your zero represents the blackest blacks and the 255 represents the whitest whites. To view your histogram's separate RGB channels, you can open up the histogram panel by selecting window, histogram. If your histogram is only showing this little view, you may want to go up to the menu and choose expanded view. For simplicity, you can think of your histogram as a map that plots your images' range of tones between black and white.

Usually it will look like a mountain range that has a distinct rise and fall, but every histogram will look different depending on the images' exposure and the content. Let's double click on the levels panel again so that we open up the properties panel and we can see the levels adjustment layer properties and that histogram. So this image of pencils has what we call a wide tonal range. Now if we compare that, this image, let's add the levels adjustment layer, this image has more of a flat tonal range, with a single sharp peak in the highlight zone and one mid sized peak near the shadows.

Also, in images that have more shadows or more highlights, what we call low key or high key, like this image here, the histogram may appear a little bit lopsided. So for this dusty sky, we have a low key image where most of the information is towards the darks. Or this image here, with the diamond, where most of the information is hanging out in the highlights area. Similarly, in images kinda like this one, where it may have been over or under exposed or shot in unusual lighting, the black and white values might be too dark or too light.

And this can not only result in a loss of image data, in the darks and light areas, but it can create a strange orange cast or a blue cast or in this case, a really distinct green color shift. In the same way, take a look at these polar bears, it looks really yellow, there's a definite yellow cast to this image. So let's talk now about how you can use the levels adjustment layer to make tonal range, brightness, contrast and color balance improvements to your image. The three markers below the histogram represent the blacks, grays and whites in an image.

You can manually adjust these markers to change the shadows, the mid tones and the highlights within your image by just moving their position. As you move the black and white markers below your histogram, try to place each one just to the left and just to the right of your histogram curve edges. This usually equalizes your shadows and highlights so that the mid range values in between automatically balance more harmoniously. And in the process, usually any color cast or exposure issue will likely be resolved.

Bear in mind that each image will be slightly different, so how you correct one file may differ greatly from how you correct another. Ultimately, your goal is to make your whites and grays look neutral. Another thing you could do is try clicking the auto button to see how Photoshop recommends you adjust the image. Auto works great for some images, but not so well for others. You can also try balancing your levels, choosing any of the options from the preset menu.

With some images, like this one, you may need notice the loss of details in your whitest whites and the blackest blacks. You can view these clipped pixels in your image by pressing and holding down your alt or option key as you drag the histogram markers. So these are the areas, the highlight areas, since I'm moving the white marker that are losing detail. Whereas when I click the black marker and drag inwards, those are the areas, the rich black areas that are also losing details.

So I can use these as a guide when adjusting my markers so that I don't lose out on any of the information. I can also move the mid tone marker to lighten the mid tones or darken the mid tones based on what the image is of and what it looks like. If your image still seems like the whites and the blacks are too blown out or lacking in detail, you could try moving the black and white output markers in a little bit from the left and right edges. Those are the second set of sliders below your histogram right above where it says output levels.

As for balancing a color cast, one of my favorite ways to instantly correct that is to use the eyedroppers on this panel. You'll start by selecting your white eyedropper and then click somewhere you think the lightest light, the whitest white is in the image. Then grab your black eyedropper and click somewhere in the image that you think has the blackest blacks. Feel free to click around a few times with each eyedropper to see how the tonal range, contrast and brightness in the image changes depending on where you click.

So for instance, with the white eyedropper if I click here I get a totally different look than if I click here in the whitest whites areas. One is a little warmer and one is a little cooler. So click around until you get the color balance that looks right to your eye. Notice also that there is a gray eyedropper, using this one is optional because sometimes setting the black and white points with eyedroppers creates a perfectly well balanced image. But with this particular image of the polar bears, using the gray eye dropper can actually help me achieve a warmer or cooler toned image depending on where I click.

This eyedropper technique is really great for helping balance colors and even out the tonal range in all of your images. And it can be especially useful with product shots where the whites appear somewhat gray or flat, like in this image. For best results, try to start with your eyedroppers then adjust the histogram markers as needed. If your image still has a clear color cast or a brightness contrast issue after you add the levels adjustment layer, you may need to add additional adjustment layers.

Color balancing and adjusting the tonal range, contrast, and brightness with levels can be done at any time, with any image. Levels adjustment layers are a great technique to add to your photo retouching workflow for web and print.