Illustrator and app design
Using the right tool for the job is important. I use and love Illustrator for mock ups and broad conceptual work, but I prefer using Photoshop to create final image assets. Personal preferences aside, how does Illustrator stack up in terms of rendering quality? Should it be used for screen design?
Most app and web design involves the creation of images, in PNG, JPEG or some other format. These bitmap images often form the basis of non-text elements on screen, including icons and buttons. The way your design tool of choice renders is critical, because it affects the overall quality of your entire design.
How does Illustrator fare with the interface design staples of antialiased simple shapes, gradient fills and textures?
Antialiasing and shapes
The image below shows some pixel-snapped black circles created in Illustrator, exported using Save for Web. Note the stray pixels on the right side of some of the smaller shapes. Antialiasing also seems too heavy, making the circles look more like rounded rectangles.
The exact same circles, created in Photoshop as vector shapes.
It’s even easier to see the differences when animating between the two. If the images were trimmed to the smallest possible size, the ones with the stray pixels would be bigger to account for the stray pixels, potentially causing iOS Retina @2x assets to have odd dimensions, which will cause a range of issues.
There’s not much to like about the way Illustrator renders circles.
Gradients in Illustrator aren’t rendered with dithering when previewed in the document, or when exported. Dithering adds subtle patterned or random noise to avoid banding and posterisation. Dithering is a really good thing. You want it.
Note the banding below on a gradient from Illustrator.
In Photoshop, the situation is different. Gradient layers and the gradient tool can optionally contain dithering. As of CS6, gradient overlay layer styles can also be dithered. All gradient types in Photoshop can be dithered.
I consider gradient dithering to be an essential feature.
Antialiasing and embedded images
While testing some of Illustrator’s rendering abilities, I stumbled on another issue. For some reason, embedding a bitmap image with alpha then exporting alters the antialiasing. I don’t know why this is, but it’s not good news. The difference is most apparent near the center at the top, center at the bottom or centers on the sides.
In this case, the embedded image is Photoshop document that was placed in Illustrator. This is important if a photographic or bitmap texture with alpha is needed in Illustrator. Images should pass through unscathed.
Play to your strengths
All tests were completed using Illustrator CS5 15.0.2 (the latest release version) with pixel snapping on, colour management set up for screen work, rich blacks enabled and the document color mode set to RGB. If you’d like to inspect the tests, download the AI document. I’ve created a slice for each test, so re-exporting is as easy as running Save for Web. I’d love to run these tests with Illustrator CS6 at some point, to see if the situation has improved.
This article ignores elements drawn in code or saved as a vector files (SVG or PDF) that are rendered at runtime, because Illustrator’s rendering engine isn’t used — they are drawn by the device’s OS. And, if you are looking to export SVGs, Illustrator is the right tool for the job.
Illustrator certainly has its strengths. It’s an incredibly powerful vector editor, that is ideal for creating complex artwork, glyphs, logos and great for knocking together mobile app concepts. It’s brilliant when used in conjunction with Photoshop or Fireworks.
Would I use Illustrator CS5 to export images for use in an app or website? No. Never.
Update 9 May 2012: Daniel Cooper tested Illustrator CS6. The results are identical for everything except the embedded image — one issue was fixed, but the others remain.