Concept Art
3D Work
Art Direction
Tips & Tricks

All images copyright (c)
Michael Dashow
except where
otherwise noted

Page last updated on
February 14th, 2009

Here are some essential basics on how to use anti-aliasing. This is not only helpful for your web page but also handy for any Photoshop work doing desktop publishing or software graphics. This demo was put together a number of years ago using Adobe Photoshop 3. While the version number of Photoshop gas since doubles, the theory and practice are still exactly the same. But if some of the captures don't show the exact same interface as you're seeing in your version of Photoshop, don't sweat it. So now, my dear relative Auntie Alias is going to help me demonstrate how the process works...

image 1 This is the initial scan of my pencil sketch of Auntie Alias.
(You can hardly recognize her because she's got her Groucho disguise on!)
I've messed with the levels just a bit to get a crisp image with some solid blacks in it.

image 2 A close-up of of the face: Lots of grey pixels give the illusion of a smooth line.

image 3 Here we try to fill with our paint bucket tolerance set too low: It's at 3, and Anti-aliased is turned off. The color doesn't fill all of those light grey pixels.

image 4 Here the tolerance is set too high: 180, with Anti-aliased is on. The Paint Bucket ink is set to "normal." Now even the dark grey pixels get filled with solid orange.

image 5 Just right! The tolerance is at 50 and Anti-aliased is on. The Paint Bucket is set to Multiply so that the grey pixels become shades of orange instead. This maintains the anti-aliasing effect.

image 6 Using the same technique, I filled in all of the other colors on Auntie Alias. I used a little bit of an airbrush to bring out hilights on her nose and lips afterwards.

image 7 Using the Magic Wand (set to similar tolerances) I selected one area at a time to paint more. The Airbrush ink was set to Multiply and Darken so as to not obliterate the lines underneath.

image 8 I saved as a transparent GIF, using white as the transparent color. All of those light grey pixels on the outside look fine on white (the image was "anti-aliased to white") but stick out on purple.

Fill Options image The same Paint Bucket tricks can help here, too. I chose a color to match the background and filled in the white with these settings.

image 9 Now the lines are all anti-aliased to purple, the color I filled with. Notice how the color doesn't quite match: It's close enough for anti-aliasing, but you'll still want to save as a Transparent GIF to make it match right.

image 10 Save as a transparent GIF, using that purplish close-to-the-background color as your transparent color. Now the lines (anti-aliased to purple) look fine on the purple background.