Understanding Anti-aliasing


Before I explain what anti-aliasing is, I'll cover aliasing. Of course, these two subjects are closely related . People almost never discuss aliasing, though.

Aliasing

Aliasing is what happens when analog data is represented on a digital system. A curved line drawn on a grid is a good example of analog data on a digital system (see Figure 42.22).

Figure 42.22. A line of grid representing analog data on a digital system.

graphics/42fig22.gif

When the analog data is converted to digital, some problems arise. The digital system in this example is the grid. To convert the analog line to a digital line, each point in the grid might represent either a point in the line, by being filled in, or an area where the line does not exist, by remaining white. A square cannot be partly filled; it must be either filled in or not. That's all part of its being digital.

Okay, no problem, right? The line goes through the different squares, so you fill in each square that the line goes through. This requirement isn't a problem with some of the portions of the line, such as the portion circled in Figure 42.23.

Figure 42.23. A portion of the line that is easily converted to digital.

graphics/42fig23.gif

But what about sections like the one circled in Figure 42.24?

Figure 42.24. A portion of the line that is not easily converted to digital.

graphics/42fig24.gif

That portion cuts right across the intersection of four points. That's where aliasing comes in. An algorithm decides where all the portions fit in the digital system.

Figure 42.25 demonstrates what the resulting digital line might look like.

Figure 42.25. A digital version of the line.

graphics/42fig25.gif

See how it looks choppy? The same thing will happen to any aliased text you display on your Web pages.

Anti-aliasing

Is there a solution? Yep! It comes in the form of ”ta-da ” anti-aliasing . What anti-aliasing attempts to do, using mathematics again, is to fill in some of the digital system with colors that are between the two adjoining colors. In this case, a medium gray would be between the black and the white. Some gray squares placed in the grid might help soften up the jaggies (see Figure 42.26).

Figure 42.26. Anti-aliased line.

graphics/42fig26.gif

Keep in mind that this example was drawn by hand, and the resolution of the final printing in the book might not show an improvement. To give you a better idea of aliased versus anti-aliased, here are a couple of lines drawn with Paint Shop Pro. The first, seen in Figure 42.27, is aliased.

Figure 42.27. An aliased line.

graphics/42fig27.gif

Figure 42.28 shows an anti-aliased line drawn in Paint Shop Pro.

Figure 42.28. Anti-aliased line.

graphics/42fig28.gif

So there'll be no mistaking the difference, Figures 42.29 and 42.30 are the aliased and the anti-aliased lines, respectively, blown up 500 percent.

Figure 42.29. The aliased line at 500 percent.

graphics/42fig29.gif

Figure 42.30. The anti-aliased line at 500 percent.

graphics/42fig30.gif

Notice the jagged appearance of the line in Figure 42.29, whereas the line in Figure 42.30 is smooth. Of course, at this resolution, the line in Figure 42.30 seems a little blurry. This factor is something else to consider when using the anti-aliasing option for your graphics. The fuzziness can be especially problematic with text. Text, as well as the rest of an image, is generally anti-aliased whenever it is resized, so you might want to add text only after you have decided on the final size of your image. This technique helps keep your text more readable.



Sams Teach Yourself Internet and Web Basics All in One
Sams Teach Yourself Internet and Web Basics All in One
ISBN: 0672325330
EAN: 2147483647
Year: 2003
Pages: 350
Authors: Ned Snell

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net