Image Retouching 101

by Gary David Bouton

• Controls associated with image tones: The digital "knobs" you use to make your images look better.
• How tones are measured: Brightness, contrast, and the difference between 0% and 255.
• Working with brightness: One guess as to what the brightness control does. Yup, that's right. But it's not that simple.
• Contrast: Pushing tones away from the center.
• Detective work and brightness and contrast: See how these work in the real world.
• Gamma: Somewhere between white and black.
• Focus: How's yours?
• It's a wrap: What this all means to you.

If you're old enough, you should remember that TV sets used to have brightness and contrast knobs (and remote controls were science fiction). You used these to make Barbara Walters look better (it must be years of these kinds of controls that have kept her looking so youthful!).

Today, you're more likely to find brightness and contrast controls in your image editing software than on the front of your television. In addition to the familiar brightness and contrast controls,most image editors also offer very useful, but not very familiar, gamma control features and sharpening filters. Learning when and how to tweak your images with these four basic controls can spell the difference between visitors turning onto your site or tuning out.

The controls associated
with image tones

Brightness, contrast, and gamma are all image controls that are used to change the intensity—the brightness—of the tones in an image, but do not shift the colors in an image to a different hue. For example, if you decrease the brightness in an image, all of the colors in the image will get darker—light green turns to dark green, light blue to dark blue, white turns dull—but green will never change to orange.

With few exceptions, every image you are likely to work with will benefit from tonal correction. Adjusting the tones of an image is easy once you know which dials to spin—which is covered right here—and you'll turn your images into Web page stars.

How we measure tones

On a television set, brightness might be a knob with no numbers on it, or it's most probably a slider switch on a remote control that has a top and bottom position. When we adjust the brightness of an image on a computer, a top and bottom point are needed to represent absolute white and absolute black, and then a number of increments in between these values is needed. Macintosh and Windows computers measure these in-between increments differently.

In Figure 1, you can see a tone chart: Five tones that are equally distant from their neighbors have been chosen and labeled. If we were discussing percentages of black, the far left color swatch would represent 100% application of the tone black, while the far right swatch would contain 0% of the tone black. These are the units of measurement found in the Macintosh system color picker. Beneath the numbers are bracketed values. These values belong to a scale that goes between 0 (black) and 255 (white), and you might call this the brightness scale of a PC. It's very useful when describing tones or components of colors, and there are more "steps" between 0-255 than there are between 0% and 100%. So you can play a little more accurately with tones and colors using the 0-255 brightness scale, but both types of scales serve their purpose.

Working with brightness

All right, it's "keen observation" time. Let's turn "the knob" up on the brightness scale

and see what happens. Below you can see that all of the tones in our tone chart have been moved upward, except for pure white, which cannot become any whiter unless a different scale were created—and that's cheating!

Now, if you had a photo in which the midtones looked too dark and there were no pure whites when there clearly should be (such as a photo of clouds), brightness would be the first choice of controls in your image editing program to correct the image.

However, as we saw in the second picture, the brightness control unilaterally brightens all tones in an image, so the darkest area of the photo would become lighter, and you might be scoring only two out of three in correcting the brightness (highs and middles are OK; the lows are too bright). This is why contrast is usually paired with brightness in the interface of Photoshop, PaintShop Pro, Corel Photo-Paint, MetaCreations' Painter, and others. Great! So what does contrast do?

Contrast: Pushing tones away from the center

If you describe the property of applying brightness as a directional move, you probably say that all of the tones in the image move upward or downward. With contrast, we can describe its effect with a motion, too. Contrast is like sticking your head through a pair of stage curtains: The middle value is the same, but "tones" to the right and left of your head are pushed farther in unique directions away from the center.

In other words, such as the words in a laundry commercial, "[Contrast] gets your whites whiter and your darks darker." Conversely, decreasing contrast makes all of the tones in the image approximately the same, the image loses detail and color, and a muddy picture is usually the result. This is not to say that either brightness or contrast can be applied only in one direction (to increase their respective property). I'm dwelling on increasing contrast and brightness in this article because most of the amateur images I've reviewed in my career have been either too dark or lacking contrast, or both. Here we have the same tone chart...

...we turn up the contrast

...and see what happens.

Now, I've applied both brightness and contrast in the previous images at a strength of 50%, which would usually be too much for image correcting, but it demonstrates a principle here just fine. If your images suffer from a desperate lack of brightness or contrast, your first step is to pick up your camera again, or rescan your images, and don't try to rescue them with tools such as brightness/contrast. The result would be a parody of real-life imaging.

Detective work and brightness and contrast

Now that we've seen the charts and reviewed the effects, it would be nice to show two real-world examples of images that need tone correction. Below, I've got a bicycle picture open in Photoshop, and I'm using the Eyedropper tool to sample the color of the logo on one of the bikes. As you can see, the Eyedropper reads 26%K (blacK), and not 0% for pure white on this sunny day. We also see without the aid of any tools that the midtones are way too dark and there is an excess of shadow region in the image.

The solution here is a two-step process: First, increase the brightness of the image until the highlights and the midtones look OK. Then, use the contrast feature to push the few near-whites in the picture more toward white (they will stay the same tone, because you can't get whiter than white), and, most important and the reason we're using this control, restore a true black in the shadow regions of the image.

Here, the image needs to have heftier dark areas and more brilliant light areas restored to it. This image might not need brightness correction; the contrast control alone can probably correct the image. Brightness and contrast might travel together, but their individual use is your call and should be used according to what an image is lacking.

Important note: Digital images are made up of individual pixels, whose color and brightness values change progressively, not absolutely, as they might in drawing programs. The "Plain Speak" version of what I'm saying here?

You cannot restore the image to its original colors by applying a corresponding, negative amount of, for example, brightness. Quite simply, there is no route "back home" after several editing moves (except for reverting to your original, unedited version). So, unless you're a pro, use brightness and contrast on a copy of your image, and not your original scan.

It's always a good idea to work on a copy whenever you do any kind of editing work. That way, if you don't like what you've done, you can go back to the original. To make a copy in Windows, simply click on the file in the Explorer or Folder window, press Control-C, then press Control-V. Windows will make a copy called "Copy of whatever it was your file was called.jpg"; then you can work on the copy safely and not worry about losing your original.

Gamma: somewhere between white and black

As computer users, we appropriate terms from other fields, and "gamma" is one such term. In the field of engineering, gamma is the relationship between brightness and amount of voltage sent to video circuitry.

Now, forget I just mentioned that :), and let's dwell on the PC use of the term.

"Gamma" covers the midtone region of an image. The midtones are a very important region in an image, particularly images of people. Why? Because the most important parts of a photo of a person are in the midtones.

A person's skin can be lighter than their eyes, their hair can be darker than their skin, and all of these tones fall in the midrange of an image. These facial regions are much lighter than the blacktop driveway in the picture and significantly darker than that billowy cloud overhead. So, the answer is, "Yes, it would be nice to isolate the midtones in an image and only play with this region!"

Fact: The human vision system is more sensitive to changes in lighter tones than in darker tones. Another fact: Everyone calibrates their monitor differently, so an image that looks peachy on my monitor might look washed out on yours.

What very often tends to happen is that when an image is converted to GIF or JPG format, the midtones, that area controlled by gamma, tend to get darker than you'd like them to be. Let's see some examples here. First, I took a screen capture of a modeled puppet, as viewed from within Photoshop.

As you can see, the picture is well-exposed; the whites and lights separate well from the midtones, and the deeper regions do not encroach on any lighter visual information. BUT...when I convert this image to a JPG copy, see what happens.

Remembering our detective prowess, let's examine the picture—the whites are OK, as are the shaded areas. It's the midtones where visual information is bunched up and cramped. To solve this problem, you first lighten the midtones by increasing the gamma. A good program such as ImageReady, or a plug-in for a JPG export such as Ulead's SmartSaver will show you "before and after" images so you can compare before committing to changes. Here, I've increased the gamma in the right image so it looks too light when compared to the original.

This is OK though. My original problem was that the original looked too dark when converted to a JPG image. By increasing the gamma a little too much, this picture will render splendidly to JPG format. This is one of the simplest tricks and also one of the most sophisticated you'll learn: Match your image for your intended output device. You can see the upper right corner of Ulead's SmartSaver...and the puppet that looked too light looks fine as a JPG export now.

Good tonal separation and balance is important to anything you post to the Web, but so is clarity. When you need to shrink the size of a bitmap, many, perhaps thousands of pixels need to be averaged and discarded, and this leads to loss of focus. Which leads us to...

How's your focus?

One of the best ways to toss an image out of focus is to reduce its size. There isn't an image editing program on Earth that can calculate for you which pixels—in an artistic way—can be changed or thrown out without compromising the original appearance of the image. There is no way to create a "perfect miniature" of large images, because a small picture has to have fewer pixels (picture building blocks) than larger equivalents.

One of the things you can do, however, is use a sharpening filter on a reduced original image, to strongly (and usually convincingly) suggest that the focus of the miniature is correct. Let's take a look at a few pictures as I discuss the options here. Above, you can see a picture of dolphins I modeled. The original file is 5.6MB, so I had to "lose" a lot of pixels to make the image small enough for the Web. And as a result, the focus sucks, doesn't it?

Next, here's a closeup of an area of the image where darks, lights, and medium tones all exist.

Now, if a "basic" sharpening filter—a filter that doesn't discriminate between different areas of the image—is used, contrast will be created all throughout the image, and it will be particularly noticeable along the color edges (where one color ends and another starts) in the image. Next, can you see the areas where the sharpening filter did its thing?

Sometimes, a plain sharpening filter will do the trick; I'll touch on this in a moment. But usually, if you have an image you love and want options on how much sharpening occurs, you'd choose the Unsharp Mask filter.

Yes, the name is strange, much of the Mac and Windows imaging software has this feature, and the term is actually a carry-over from physical photography. In traditional photography, when an image was out of focus, the photographer would make a negative of it, then make a really crisp negative of the negative, sandwich the two images together, and make the copy on high-contrast paper. Software programs obviously do not use film, but what they achieve by imitation is an embossed effect around the edges where colors meet in the picture. This is a lot more subtle than simply increasing the contrast between color edges.

Here you can see a design with a soft transitional edge between purple and orange. Let's pretend this is an image whose color edge is blurred.

Here you can see that by calling upon Photoshop's Unsharp Mask dialog box and turning up the Amount, the edge of purple is a little darker than areas away from the edge of the color transition, and the orange is taking on a lighter color next to the edge—embossing! It's subtle...and it works!

There is, for all the virtues of the Unsharp Mask, a very good reason for simply applying a Sharpen filter once or twice to an image, and really fry them pixels! The occasion is when your original art is large and you have to shrink it by severalfold times.

Here, Mona's looking at us, both as a crisp scan, and as an icon-sized image (32 pixels by 32 pixels), and the smaller image looks plain lousy! Part of the reason is that there are only 1,024 pixels total in this miniature—hardly enough to do credit to the original art.

So when you can't shrink a piece with clarity, you "blast" the smaller copy with a few hits from a simple sharpen filter. Faithfulness to the original has to go in order to communicate a graphical idea.

To the right, you can see an enlargement of the 32x32 pixel copy of Mona, but done correctly, with two applications of the sharpen filter.

Now we see Mona the Icon at 1:1 size. Clearly, there's a lot of visual information missing from the icon, but with the edges of colors in extreme contrast, you can make out the image as a portrait. How many icons today show a complete, recognizable face?

Conclusion

Brightness, contrast, gamma, sharpness...these are all very critical aspects of your Web work...it makes no sense not to present your pictures at their best. You've learned here a methodology: First, you play detective to see what's wrong with an image, and then choose the correct tool. There are many other photo correction methods more detailed than I've covered here, so if you've followed all of the steps and your image still doesn't look flawless, contact our Publisher and ask if Mr. Bouton can write an "Image Retouching 201" piece for next semester :). 

About the author

Gary David Bouton is a seasoned advertising art director who is familiar with traditional design tools and their electronic equivalents. He has written over 14 books on computer graphics, from modeling to multimedia. Mr. Bouton, along with his wife and co-author, hold four international awards in desktop publishing and design. Visit his web site.