I just can’t help feeling like a traitor (see what I did there?). Let’s get this out of the way first: I prefer Adobe Illustrator for designing for-screen output. I’ll wait for the wailing and gnashing of teeth to subside. “But Mark,” you say, “Illustrator is, was, and always will be for print design! Also you’re stupid!” Well, yeah, Illustrator was originally made for print production and it’s never seemed to agree with pixels all too well, but its text editing, object alignment, non-destructive editing and overall mathematic precision (just to name a few) provide huge advantages over Photoshop.

With the latest three Creative Suite releases, Adobe has at least pretended to step up its game. Unfortunately, even with the pixel preview mode, web presets, and Rasterise effect, it seemed exporting to pixels always resulted in an anti-aliased mess. You know what I’m referring to: 1-pixel lines that look faded and 2-pixels wide, even though they’re placed on whole pixels. Usually, I’d just apply a Rasterize effect to the offending objects, but it was always a pain to do, and on top of that, it was imprecise and never worked consistently enough. Another technique was to use Illustrator’s newer Align Stroke buttons from the Stroke palette and set it to either Inside or Outside. Unfortunately, this feature has its own set of drawbacks — like needing to overlap 1-pixel adjacent boxes — and as before, never behaved consistently.

The reason for all of this wackiness is pretty simple: Pixels have a physical area, while vertices (and vector lines) do not. The grid in Illustrator is made of vector lines, the intersections of which are in-between pixels, not at the centers. Thus, a 1-pixel line snapped to the grid will extend a half pixel in each direction. When exported, Illustrator tries to anti-alias said line, giving it a fuzzy appearance.

My solution? Select the top-most layer(s) and apply a Transform effect, offsetting by half a pixel in either direction. This forces the layer — and all its children — to shift off of the grid, and onto whole pixels. The result is a collection of nice, pixel-perfect, lines.

There are three shortcomings that I’ve noticed: One, keeping the Transform effect at the root level can really slow down future changes, so it’s best to apply it just before exporting. Secondly, filled boxes will have blurry edges (duplicating our earlier problem with the lines) unless you apply strokes to them. Lastly, and perhaps most importantly, it alters the perception of object sizes. A 16×16px square still “contains” 16 pixels in each direction. So by adding a 1px stroke the object ends up being 17×17px.

Ultimately, though, it’s just another example of having to bend the application to the designer’s will, instead of the application behaving intelligently. Why should objects even be placed on half-pixels when I’m in “Web” mode? (Flash and Photoshop, I’m looking at you too…) At the very least, offer an option to hard-snap everything to a pixel without disabling my custom grid snap (which is what pixel-preview mode does). Ideally, it’d be nice to see a unified application experience, with the same text-rendering, editing, alignment and distribution across all applications. I thought that’s what Adobe was trying to do with the Creative Suite.

Guess I’ll have to wait for CS4…