Part Nine: Anti-aliasing

Anti-aliasing works under a simple premise: add intermediary colors to the kinks of the line to smooth them out. For example, if you have a black line on a white background, then you would add gray pixels to the edge of the line to smooth it out.

Technique 1: Smoothing Curves

Generally, you want to add your intermediary colors at the kinks, since that's where the line breaks and looks uneven. If it still looks too uneven, add another, lighter layer of pixels. Have your intermediary layers flow in the direction of the curve.

I don't think I can explain it any better than that without complicating things. Just look at the pictures, and I think you will understand what I mean:

Technique 2: Rounding Out Humps

Technique 3: Fading the Ends of Lines

Application

Now let's anti-alias our sprite. Keep in mind that if you want your sprite to look good on any color background, do not anti-alias on it's outer edge. Otherwise, you will see an unfortunate-looking "halo" of your in-between colors around your sprite and it will look nasty as hell.

The effect, as you can see, is subtle, but it makes a big difference.

Why Do it By Hand?

You may ask why we don't just apply a filter from our paint program to the sprite if we want to make it look smoother? The answer is that no filter is going to make your sprite as clean-looking as if you did it by hand. You have total control, not only over the number of colors you use, but where they get used. And you know better than any filter what areas need to be smoothened out, and what areas are going to lose their pixelly quality if you anti-alias them.