Does anyone out there remember the days when jaggies--those pointy pixels that would show up whenever lines were not perfectly vertical or perfectly horizontal--were a fact of life? One of the joys of using an advanced graphic design application like Photoshop is that there are no jaggies: Everything can be anti-aliased.

What is Anti-aliasing?
When you specify in your design program that the type or objects should be anti-aliased, the program finds several colors that are between the foreground and background colors and sprinkles them around the edge of the object. This makes the transition between the object and the background less sharp, thereby eliminating jaggies (see Figure 1).

Figure 1: Aliased X (left) and Anti-aliased X (right)

When Could Anti-aliasing Be a Problem?
When you're designing for the Web, that's when! As you may have guessed from the description of what anti-aliasing is, it necessarily increases the number of colors in the image. Figure 2 shows the color tables for the two Xs.

     
Figure 2: Color tables for the aliased X (left) and anti-aliased X (right). Mac systems add black to the color table even if it is not used in the image.

If you just want to get the number of colors--and therefore the size of the file--down a bit, you can reduce by at least half without making your images too jaggy. As I mentioned in a column a few weeks ago, when I index the colors of simple images, I use the "Custom" palette option in Photoshop and Load the 216 Netscape-safe colors. I then covert back to RGB, then reindex. Photoshop will suggest a number of Exact colors, all of which will now be Netscape-safe. Figure 3 shows the results of this method as applied to the anti-aliased X.

Figure 3: The anti-aliased X indexed to Netscape-safe colors and its associated color table.

I've Made My Anti-aliased Image Transparent, and Now I've Got Jaggies Again!
Yep, this is a fact of life: The very tool that makes the jaggies disappear in Photoshop could make them reappear with a vengeance if you make your image transparent. The reason is that the GIF89a standard, which is what makes transparency possible at all, supposedly only lets you "drop out" one color. As we saw above, what anti-aliasing does is create a bunch of intermediate colors between the foreground object and the background color. If your backgroud color were white, as it is in the examples above, you could drop out (make transparent) the white, but not all the near-white colors in the color table (see Figure 4).

Figure 4: The anti-aliased text looks fine on a white background, but on a gray background it looks terrible--and unreadable.

You'll notice I said "supposedly" in the previous paragraph. This is because Adobe has created a GIF89a Export plug-in for Photoshop (and Illustrator as well; go to the Adobe tech support file library and click on the program and platform of your choice to see the available filters, upgrades, and plug-ins) that allows you to select more than one color to make transparent (see Figure 5). It also allows you to interlace at the same time, but if I'm making text images I always turn this option off.

Figure 5: Selecting colors for transparency in the GIF89a Export dialog box

Now, there is one little problem with selecting more than one color for transparency when those colors were generated by anti-aliasing: You could end up cutting into the letters, thereby creating jaggies that point inward instead of outward. To solve this problem, you could experiment until you find a happy medium--or you could do what most experienced Web designers do when creating text or simple-object images.

The Web Designer's Approach to Anti-aliasing
Most professional Web designers will consider what kind of images they want to use, and on what color backgrounds (or background images), before they start creating anything. But even when you've planned as best you can, there are bound to be changes--so plan for those as well. Here's how: When making your images in Photoshop (or some other drawing/image-editing program that allows for layers), always keep the background on a layer by itself. Add elements (text, objects, etc.) on subsequent layers until you've got a finished image. Now save the image in Photoshop 3.0 format, which preserves the layers.

What this allows you to do is change the background colors--and therefore the intermediate colors of the anti-aliasing--at will. And you should change your background color to match as closely as possible the color (or pattern) you are going to use as a background in your Web pages. This way you can make your images transparent or not, and you won't have to worry about jaggies.

Past installments of Design Diary -- Suggestions for future columns