I used to be a diehard Photoshop user. But I became frustrated with how difficult creating and maintaining large projects was with it and wanted a more efficient tool for my web design projects. I had tried several times over the last ten years to use Illustrator for web and UI design, only to be stopped in my tracks by the one thing that killed it—the lack of pixel-precise drawing features. My designs sufered from unwanted anti-aliasing (heretofore referred to as “fuzzy-edge syndrome”) and a general lack of character that Photoshop made easy. Chances are you fit in this same camp; that may be the reason you’re reading this right now.

I made the switch for good when Adobe rolled out Illustrator CS4 in 2008. It turned out that Illustrator already included a few features for enabling pixel precision, I just didn’t know those features were available or how to use them. Once I got it fgured out, it was easy to walk away from Photoshop (for UI design, at least) for good. With CS5 and CS6, Adobe has made creating pixel-precise designs even easier.

The first feature Illustrator provides for ensuring pixel-precise artwork is Pixel Preview mode (Command-Option-Y/Ctrl+Alt+Y). The default Preview mode in Illustrator allows you to view your artwork as it would print. Objects are smooth and crisp no matter how far you zoom into your design. This mode is perfect for creating illustrations, logos, typography, or other illustrative elements that don’t need to be pixel-precise.

However, when creating UI elements like buttons, widgets, or rules, using Preview mode paints an unrealistic picture of how these objects appear on the web or mobile devices, with the exception of newer ultrahigh resolution devices. Using Pixel Preview mode renders your design on the screen at 72 pixels per inch, just like a raster-based application such as Photoshop would. When you zoom in, you can see how your objects and effects look on a bitmap display. This is referred to as anti-aliasing. The application inserts extra pixels of related colors to simulate a smooth curve.

Pixel Preview mode allows you to see vectors as if they were bitmaps.

Pixel Preview mode is great as a diagnostic tool, perfect for visualizing how your artwork will render on the low-resolution displays that are still fairly common today. It’s great for viewing how Photoshop and Illustrator effects render on the screen. If you are a Photoshop user, you can also use it as your full-time view mode to provide some comfort and familiarity as you try to switch.

In Illustrator’s application preferences (Command-K/Ctrl+K), you can specify and view a customizable document-wide grid that is akin to graph paper. In my opinion, this extremely loose yet very restrictive grid structure is really only useful for technical drawings. It’s also inefficient, because it can be visually intrusive and has to be toggled on and off manually.

lllustrator’s document-wide grid is like having graph paper on your screen.

Since the end product of UI design is viewed on a pixel-based screen, it makes sense that it should be designed to match a pixel-based grid. Illustrator’s answer for that need is the pixel grid. This grid is separate from both the document-wide grid and the guide-based grid. It’s made up of one-pixel increments and allows for extremely precise drawing. In Pixel Preview mode (Control-Option-Y/Ctrl+Alt+Y), this grid is viewable when you zoom in to 600% or closer.

The pixel grid (which is filled in to show pixel detail) is displayed when in Pixel Preview mode and zoomed in closer than 600%.

One of the newest features to take advantage of this grid is the ability to seamlessly and automatically align objects to the pixel grid as you draw. It enables you to keep your objects from having fuzzy edges in Pixel Preview mode by snapping the dimensions to whole-pixel values. Fuzzy-edge syndrome occurs when an object is either sized at sub-pixel increments (for example, a width of 400.3456 px) or sits on a sub-pixel X or Y point. Since Illustrator is a vector-based program, you have the ability to size and place artwork anywhere on the screen with up to 3-decimal-point precision, which can be helpful when creating print documents.

Since displays use pixels to render artwork, placing an object off of the pixel grid will cause it to blur; the screen can’t color half of a pixel, so it anti-aliases it in order to keep pixels from looking jagged, which is where the fuzzy edge comes in. Keeping your objects on the pixel grid by having whole numbers in the object dimensions ensures that your artwork will render without fuzzy edges, appearing exactly the way you’d expect it. It’s especially helpful when dealing with strokes.

You can enable or disable pixel alignment in three ways:

• You can set pixel alignment on or off in the advanced section of the New Document dialog box when creating a new document.
  
  

  The Align New Objects to Pixel Grid setting in the New Document dialog box

  
  
• If you didn’t turn the setting on when you created a new document, you can do so at any time from the Transform panel menu.
  
  

  Turning on pixel alignment in the Transform panel menu

  
  
• You can control pixel alignment on an object-specifc basis by toggling the option in the Transform panel’s options pane. You can view these extra options by choosing Show Options from the Transform panel menu.
  
  

  Toggle pixel alignment for individual objects in the Transform panel options pane.

  
  

Since pixel alignment is a fairly new feature, opinions vary on whether you should let Illustrator control pixel-precise placement or whether you should turn the feature off and manage it yourself. I feel that as you begin to design UIs with Illustrator, you’ll find the method that works best for you.