- Graphics and text often appear soft or fuzzy when exported, especially when compared to similar graphics or text exported from Photoshop
- Extra pixels are sometimes added when artwork is exported, resulting in images with incorrect pixel dimensions
Digital displays usually have low resolutions, measured in pixels per inch (PPI). While the myth is that "web graphics are 72 ppi" the reality is that most of today's monitors have resolutions of at least 120ppi and the Retina display on the iPhone 4 boasts a spectacular 326ppi. Still, these resolutions are far lower that what you would find in high-end output devices which usually have resolutions that exceed 2500dpi (while digital devices measure resolution in pixels per inch, or ppi, print devices are measured in dots per inch, or dpi).
The lower resolution on digital screens causes a problem with curved lines, as the human eye can detect the stair step effect of the pixels, which are traditionally called "the jaggies". In order to make artwork appear smooth, digital screens employ a technique where high contrast areas (places where one color ends and another begins - also referred to as "edges") are slightly blurred. By softening the contrast, the artwork appears to have a smoother appearance, and the jaggies disappear. This technique of blurring artwork to achieve a smoother appearance is called antialiasing.
|A graphic without antialiasing (left) and a graphic with antialiasing (right). The boxes show a section of each graphic enlarged to 500%, to better see the antialiasing.|
How does antialiasing cause problems in Illustrator?
Illustrator does indeed apply antialiasing to your artwork when you're in Preview mode so that your artwork looks nicer on screen (you can disable it in preferences if you're so inclined), but that has no effect on the artwork when it is exported from Illustrator.
|The preference setting makes your artwork look better on screen, but has no effect on the art when it is exported.|
Of course, well before there were web features in Illustrator, there were vector drawing features. One of those features, called snap to grid, makes it easy to draw and move anchor points by aligning them to an invisible grid in your Illustrator document. In addition, by default, Illustrator distributes the weight of a stroke along the center line of a vector path. When combined, these two features bring out the worst in antialiasing.
When you draw a path in Illustrator, the anchor points snap to this invisible grid, which is what Pixel Preview uses, and which is hard-wired at 72ppi. This is a good thing, because it ensures that your shape will line up perfectly with the pixel grid. However, if you add a 1pt (or 1px) stroke to your artwork, then Illustrator is faced with a problem.
With the path snapping to the grid, and with the stroke weight set to align itself along the centerline of that path, the 1px stroke lies in between pixels. Pixels are either on or off – you can’t fill just half of a pixel. This is similar to a curved path that passes through a part of a pixel, and antialiasing kicks in, thinking there are jagged lines that need to be smoothed out. The result is a 2px stroke instead of a 1px stroke, and the color is lightened to give a softer appearance.
|The "fat line" syndrome is caused by antialiasing (click to enlarge)|
The only solution to this problem is to be vigilant in making sure that all the appearance of the artwork that you create is aligned perfectly to the pixel grid. That means avoiding the use of strokes altogether. In Illustrator CS3, Adobe added the ability to align strokes to the inside or outside of a path instead of along the centerline, but this feature only is available for closed paths. In addition, there were several bugs that would still result in odd antialiasing resulting in blurred straight lines or errors in pixel dimensions during file export. Of course, even if you aligned all of your artwork carefully, you’d still have to make adjustments every time you moved or scaled your artwork.
Keeping all of this in mind, the key issue is that while Illustrator does a great job snapping anchor points and paths to a grid, it doesn’t do that when it comes to the appearance of your artwork. And since the appearance of your art is all that matters when it comes to pixel-based web graphics, we’re faced with these issues.
“Pixel aligned graphics” in Illustrator CS5
Adobe addressed all of these issues in Illustrator CS5 with a collection of features that fall under a category described as “pixel aligned graphics”. Essentially, Adobe added a new object attribute, called Align to Pixel Grid, which can instruct an object to ensure that its appearance is aligned perfectly to the 72ppi pixel grid. Illustrator looks for art with straight line segments, and if the artwork is “off the grid”, Illustrator will make any necessary adjustments to the path to ensure the straight lines (and any strokes that may be applied) align perfectly to the grid. The feature has no visible effect on artwork that doesn’t have straight line segments (it also won’t work on raster images placed within Illustrator).
When you are working in Illustrator, you can apply this attribute to selected artwork by clicking the Align to Pixel Grid option that appears at the bottom of the Transform panel. If you want all of your artwork to have the attribute applied automatically as you draw, you can check the option named Align New Objects to Pixel Grid, which appears in the Transform panel menu.
The Align to Pixel Grid feature poses a potential problem when working with Symbols. This is because symbols must match all of their instances. In Illustrator CS5, you’ll see a setting called Align to Pixel Grid when you define a symbol. With the option checked, any instance will snap to the pixel grid, granted it is set to 100%. Instances that are rotated or scaled may not snap perfectly (Illustrator CS5 features a new Reset button that appears in the Control panel whenever a symbol instance is selected, allowing you to remove any transformations you’ve applied to that instance).
The side effects of pixel alignment
As I mentioned at the onset of this article, antialiasing is a double-edged sword. And when you use the Align to Pixel Grid setting in Illustrator, there are some side effects that you’ll want to be aware of. In this way, you can avoid any unwanted behavior and ultimately use Illustrator to create great looking artwork for any device.
STROKE WEIGHT: With Align to Pixel Grid turned on, it’s impossible to specify fractional stroke widths, as they don’t align to the pixel grid. For example, if you try to give a rectangle a stroke weight of .5pt, Illustrator will automatically change the stroke weight to 1pt. Illustrator will always round to the nearest full integer, so a stroke weight of 1.4 becomes 1 and a stroke weight of 1.5 becomes 2, etc.
OBJECT ALIGNMENT: One of the great new features in Illustrator CS5 is that each artboard maintains its own ruler coordinates. Each artboard that you create sits within the overall canvas in a document, but if your artboard isn’t aligned perfectly to the pixel grid, your artwork won’t be able to align perfectly to the artboard (the artwork will appear correct and snap to the grid, but the coordinates for that artwork may be odd). This can happen if you manually move or resize your artboard when in Artboard Edit mode. To “fix” this problem, go into Artboard Edit mode and use the Control panel to enter full integer values for the coordinates of the artboard.
OUTLINED TEXT ISSUE: As discussed above, text is a special case, and Illustrator offers a variety of different antialiasing algorithms optimized specifically for text that you can work with. However, if you convert text to outlines (which I do every so often, especially with logos), then the words are no longer text objects. And if you have Align to Pixel Grid turned on, then Illustrator will also try to find straight lines in that text and try to align it to the grid. This can cause text to look wonky and sometimes downright ugly. In such cases, try to avoid converting type to outlines, or make sure the Align to Pixel Grid setting is turned off for that object before you convert it to outlines. If the logo is a symbol, you’ll need to keep the text live if you plan on using the Align to Pixel Grid setting on the symbol.
ROUNDED CORNERS: The pixel alignment feature in Illustrator CS5 is pretty smart. Considering how popular rounded corners are in web design these days, the feature also looks for objects that have 8 anchor point, where 4 paths are straight and 4 paths are curved. In such cases, the feature not only makes sure the straight segments snap to the grid, it also makes sure the corners appear symmetrical and smooth – even if that isn’t your intention. My friend Michael Murphy (of The InDesigner fame) actually tripped upon this when he was trying to create a button with inverted rounded corners. He created them with pixel snapping turned off, but when he checked the Align to Pixel Grid option in the Transform panel, the rounded corners were reshaped. The workaround is to add an anchor point anywhere along the path before applying the Align setting.
|Before Align to Pixel Grid (left) and after it is applied (right).|
I also just wrapped up recording my latest Lynda.com training video title, “Illustrator CS5 for Web and Interactive Design” which should be up and available in the Lynda.com Online Training library within a few weeks. I’ll post when it becomes available.