General Graphics Tutorials -- Anti-aliasing |
|
Anti-aliasing
Before I explain what anti-aliasing is I'll cover aliasing. These two subjects are, of course, closely related. People almost never discuss aliasing, though. Before I discuss the two let me say that aliasing causes images to have a jagged staircase look to their edges while anti-aliasing smoothes out these jagged edges.
Aliasing
Aliasing is what happens when analog data is represented on a digital system. A curved line drawn on a grid, where the curved line represents the analog data and the grid represents the digital system, is a good example of analog data on a digital system (see figure 2.1)
 |
figure 2.1
Line on grid representing analog data on digital system |
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 may either represent a point in the line, by being filled in, or represent an area where the line does not exist, by remaining white. There can't be a square that is only partly filled. Each square must be either filled in or not. In other words, to draw the line in digital format we need to completely fill in any square that a portion of the line passes through. That's all part of it being digital.
Okay no problem, right? The line goes through the different squares so we'll fill in each square that the line goes through. Figure 2.2 shows what the line looks like when we do this. Not very smooth, is it? We no longer have curves; all we have is a choppy line made up of squares and rectangles.
 |
figure 2.2
Digital version of line |
The same thing will happen to, for example, any aliased text you display on your web pages. Figure 2.3 is an aliased 'W' and figure 2.4 is the same letter created with the anti-aliasing option turned on.
 |
figure 2.3
Aliased 'W' |
 |
figure 2.4
Anti-aliased 'W' |
Notice how smooth figure 2.4 is compared to figure 2.3.
Is There a solution?
Yep! It comes in the form of ta-da… anti-aliasing. What anti-aliasing attempts to do is, using mathematics, fill in some of the digital system with colors that are in-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 2.5).
 |
figure 2.5
Anti-aliased line |
Keep in mind that this example was hand drawn and that the resolution of your computer screen make this seem like it's not really an improvement.
To give you a better idea of aliased versus anti-aliased, then, here are a couple of lines drawn with Photoshop. The first, figure 2.6 is aliased.
 |
figure 2.6
Aliased line drawn with Photoshop |
Figure 2.7 is an anti-aliased line drawn in Photoshop.
 |
figure 2.7
Anti-aliased line drawn with Photoshop |
So there'll be no mistaking the difference, figures 2.8 and 2.9 are the aliased and the anti-aliased lines blown up 500%.
 |
figure 2.8
Aliased line at 500% |
 |
figure 2.9
Anti-aliased line at 500% |
Notice the jagged appearance of the line in figure 2.8 while the line in 2.9 is smooth. Of course, at this resolution, the line in figure 2.9 seems a little blurry. This is something else to consider when using the anti-aliasing option for your graphics. The fuzziness can be especially problematic with text. Because text, as well as the rest of an image, is generally anti-aliased when ever it is resized, or re-sampled, you may want to add text only after you have decided on the final size of your image. This will help keep your text more readable.
Decisions, decisions
As with anything else there are advantages and disadvantages to anti-aliasing. For example, because anti-aliasing introduces more colors into an image it stands to reason that an anti-aliased version of an image can be somewhat larger than its aliased counterpart. Another problem arises with very small text. When text is really small the anti-aliasing tends to blur the letters making them hard to read on some monitors. Again this is something that you'll have to examine and make a decision about on an image by image basis.
Be sure to check out some of our other general graphics tutorials.
|
|
|
|
|
We'd like to hear from you... If there are any web graphics techniques you'd like to see covered, send us an e-mail.
|
