- Chapter Overview
- Guides Objectified
- Smart Guides
- Grids Made Easy
- Achieving Pixel Precision
- Beginning the Layout
- Typography for the UI
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Achieving Pixel Precision
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 suffered 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 book 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 figured 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 (4.18).
4.18. The left side of the button suffers from fuzzy-edge syndrome. The right side is crisp thanks to the pixel-snapping features in Illustrator CS5 and later.
Pixel Preview Mode
The first feature Illustrator provides for ensuring pixel-precise artwork is Pixel Preview mode (
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 ultra-high 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 (4.19). This is referred to as anti-aliasing. The application inserts extra pixels of related colors to simulate a smooth curve.
4.19. 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 (to be discussed in Chapter 6) 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.
Aligning Objects to the Pixel Grid
In Illustrator’s application preferences (K/Ctrl+K), you can specify and view a customizable document-wide grid that is akin to graph paper (4.20). This is separate from the guide-based grid you created in the last section. However, 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.
)
4.20. Illustrator’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 (Y/Ctrl+Alt+Y), this grid is viewable when you zoom in to 600% or closer (4.21).
4.21. 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 pixel 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 a 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 (4.22).
4.22. 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 (4.23).
4.23. Turning on pixel alignment in the Transform panel menu
- You can control pixel alignment on an object-specific basis by toggling the option in the Transform panel’s options pane (4.24). You can view these extra options by choosing Show Options from the Transform panel menu.
)
4.24. 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.
Coordinates and Reference Points
The Transform panel can also be a great tool to aid in achieving pixel-precise artwork. The Transform panel contains four fields: two for positioning elements according to values on the X and Y axis, and two for setting the width and height of an object. It also has the reference point locator, which is used for setting the point on an object that will act as the anchor for transformations (like rotations or scaling). You’ll also find these fields in the Control panel when an object is selected (4.25).
)
4.25. The Control panel Transform fields
It’s really easy to use coordinates to precisely place your artwork anywhere on the artboard. This is a perfect opportunity to begin working on the Wheelr mockup. The first thing you need to do is add the simulated browser chrome. This has been created as a separate file that can be linked in this document via the Place command:
- Using the document created earlier in the chapter, select Artboard 1 in the artboard navigator. This will place the artboard in the view and make it active.
- Download the simulated browser chrome file at: www.peachpit.com/UIwithAI/ch4/browser-chrome.ai. Once you’ve downloaded the file to your computer, choose File > Place.
When you import an element using the Place command, it’s dropped in the center of the current view based on its origin point (4.26). Since the object needs to be at the top of Artboard 1, using the X and Y value inputs in the Control panel will be the most precise way to get the object in place. The reference point locator in the Control panel shows the current origin point to be the center of the object.
4.26. Placing an element with the Place command drops it in the center of the view.
- Select the object and click the top left square on the reference point locator to change the object’s point of origin (4.27).
4.27. Change the origin point of an object with the reference point locator.
The X and Y values in the Control panel will change to reflect the new reference point. This doesn’t affect the placement of an object; rather, it shows the location of that particular point.
- Type 0 into the X and Y input fields in the Control panel.
Because the placed object’s reference point was the top-left corner, using zero for the x and y fields moves that point in the top-left corner of the artboard.
)
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
The Mathematician Within
The X, Y, W, and H input fields in the Transform panel and Control panel are much smarter than they initially appear. First, they will allow you to specify a particular unit of measure without changing the ruler units. For example, if you were working with pixels and wanted to make an object two inches wide, you would perform the following step:
- Type 2 in in the W (width) field and press Enter/Return. Illustrator resizes the object and automatically converts the units to pixels.
Second, you can use the Transform inputs to do math.
- To make an object 150 percent larger, add *150% or *1.5 after the existing number (4.28) in the field and press Enter/Return. You can add, subtract, and divide using the same method.
){kind=link}
4.28. You can use the Transform inputs to perform math equations.
If you want to resize an object proportionally, hold down the /Ctrl key as you press Enter/Return. Illustrator will adjust the width or height in proportion to what you entered.