When Pixels Snap: Antialiasing in Illustrator CS5

Over the years, designers using Illustrator to create web graphics have faced two main issues:

• 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

Both of these issues are actually caused by antialiasing, which is a double-edged sword. Antialiasing is supposed to make your art look better on a digital screen, but sometimes the side effects work against you. There are ways to build your art carefully to try to avoid issues, but with Illustrator CS5, Adobe added a slew of features that can help your artwork look better after being antialiased. The question is, at what cost? In this article, we’ll get a better understanding of what antialiasing is and how you can learn to control your art’s destiny when using Illustrator CS5.

What is antialiasing?

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.

There are a variety of algorithms used to control how artwork is antialiased, but while the benefits of antialiasing are readily apparent, there are also some side effects. For example, antialiasing can make artwork appear too soft or blurry. It can also sometimes make small or fine type appear too blurry to read.

 

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.

In Illustrator 9, Adobe added many features that would allow designers to create web graphics more easily, including Save for Web and Pixel Preview. Along with this also came the ability to antialias artwork on export or whenever vectors were converted to rasters.

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)

To make matters worse, if you were looking to create an object at a specific pixel measurement (for example, a 468x60 ad banner), the antialiasing has now caused your artwork to export at 469x61. So you get art that doesn’t look great and that also is of the wrong size. If you create slices in Illustrator, this same issue can cause your slices to export with the wrong dimensions as well. Of course, my example of using a 1px stroke is but one case, but the softening of artwork in general would happen anytime artwork doesn’t line up perfectly with the 72ppi pixel grid, which can happen is the Snap to Grid setting is turned off, or if your art doesn’t fit perfectly to the grid (i.e., you scale or rotate it, etc).

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 doesn’t work on text objects, as letterforms require careful consideration. Illustrator CS5 features several new antialiasing options that can be applied directly to text objects, as you can in Photoshop. These settings are found in the Character panel (in its fully-expanded state).

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).

Of course, chances are that if you’re working on web graphics, you probably always want your art to look clean and sharp, and export at the right size, right? Adobe added a new option to the Advanced section of the New Document dialog box called Align New Objects to Pixel Grid. This setting is actually on by default when you create a new document based on the Web profile, so for the most part, you don’t have to do anything other than just create your art using this profile.

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.

In the top graphic, the text is still editable. In the lower graphic, the text has been converted to outlines. Snap to Pixel Grid is turned on for both graphics, but you can clearly see that the text in the lower graphic appears badly distorted, especially so in the word "explore", and in the lower serifs in the word "california" (click to enlarge graphic).

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).

So there you have it – everything you ever wanted to know (and some things you didn’t) about the new pixel alignment behavior in Illustrator CS5. Got more questions about these features, about using Illustrator for web design, or about Illustrator in general? You know what to do – leave a comment or drop me an email!

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.