#35 Creating Crisp Artwork for the Web
With its strong typographic capabilities, fast and flexible drawing capabilities, and tight integration with Flash CS5 Professional, Illustrator is a great tool for Web graphics creation. Since it started as a resolution-independent application for print, however, there are some things you need to know to properly work with Illustrator to create artwork for the Web.
Even though all artwork appears razor-sharp at any magnification in Illustrator, the same is not true when that art is rasterized (converted from vectors to pixels) for the Web. Artwork gets fuzzy when exported for the Web due to anti-aliasing, which blurs edges to smooth the appearance to the naked eye (Figure 35a). Illustrator CS5 includes a new Pixel Preview (View > Pixel Preview) mode that allows you to see just what your artwork will look like when rasterized.
Figure 35a Artwork as it normally appears in Illustrator (top) and the same artwork after it's been rasterized (bottom).
But seeing a problem with rasterization isn't much help if you can't fix it. Fortunately, there are new Illustrator features for that, too. The first is the Align to Pixel Grid option, which is available either for individual objects (Figure 35b), or on a document-wide basis. To align one or more objects to the pixel grid, select the objects, open the Transform panel (Window > Transform), and select the Align to Pixel Grid check box. To make this behavior persistent throughout your document, choose Align New Objects to Pixel Grid from the Transform panel menu.
Figure 35b The same rasterized buttons from Figure 35a aligned to the pixel grid. Notice the improvements around the edges of each button.
Aligning artwork to the pixel grid solves your rasterization problems for drawn shapes, but typography requires extra attention. The Character panel (Window > Type > Character) in Illustrator CS5 now includes the same type anti-aliasing options that Photoshop has had for many versions (Figure 35c). Choosing the correct option will depend entirely on the typeface in use and its size, color, and interaction with the colors around it.
Figure 35c Anti-aliasing options in the fully expanded Character panel (left) and the results of each setting (right).