« Graphs and the Cognitive Style of Powerpoint | Main | Design Help Found »

Anti-aliasing

Graphics prepared for low-resolution screen display require specific methods to produce high-quality results in addition to utilizing good design principles. One of these is the problem of aliasing: a type of artifact introduced by representing something smooth or continuous in a discrete way, such sound in a digital recording or the curved taijitu (yin/yang) symbol on a 72 dots per inch computer screen. Web and graphical user interface designers are familiar with this, of course, but many of the scientists and writers I work with aren’t, so it’s probably worth covering briefly.

aliasing_01.gif

I converted the symbol pair on the left from Illustrator (which represents graphics as smooth mathematical curves) to Photoshop (which represents images as an array of individual pixels) without anti-aliasing, and those on the right with anti-aliasing. The aliased image is blocky and “stairstepped”, while the anti-aliased image is smooth—gray-shaded pixels in the anti-aliased image give the illusion of a curve. Effectively, the use of gray shades simulates a high-resolution black and white display.

Photoshop performs anti-aliasing by converting the curves from Illustrator to raster graphics at high-resolution, then scaling down and interpolating the black and white pixels into shades of gray. Anti-aliasing techniques are built into Photoshop and Illustrator, and both produce smooth output most of the time. Other graphics packages, particularly scientific visualization and GIS software, often do not anti-alias by default. As a result my job often entails reprocessing imagery so it looks good on the screen. If I’m lucky I can simply ask for a postscript version. (Not a raster graphic converted to postscript! I all to often find JPEG artifacts in postscript files and PDFs. The postscript must be generated from the original vectors.) One way to produce smooth images for the screen is to simply shrink larger images.

aliasing_small.gif

This image is simply the the aliased taijitu at left above, shrunk to 1/4 its original size using the “bicubic” resampling method.

One important caveat: lines and edges oriented at right angles usually look worse when anti-aliased: the process blurs the edges rather than smoothing them.

aliasing_02.gif

It’s better not to anti-alias straight, perpendicular lines (such as graph axes). I do this by isolating curves and angled lines from straight lines on separate layers, and converting them from vector to raster separately.