UI Design with Adobe Illustrator CS6, Part 2: Creating Vector Icons
- Drawing Pixels in a Vector Program
- Creating Multiple Sizes
- Views and Artboards
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In my opinion, one of the more difficult aspects of UI design is that of creating icons. Not only does it take real artistic ability; the ideation and implementation of the correct metaphor also are crucial to success. Icons give your users visual cues to the features and content in your applications. If you don't get the metaphor right and then nail the execution, you may leave your users scratching their heads in confusion.
Many tools are available for designing icons, but you may not be aware that Illustrator CS6 is great for the job. This article will show you how to set up Illustrator for the task and provide some efficient techniques for getting your design just right. I won't spend time on getting the perfect metaphor or how to get your finished icon into production; instead, you'll learn how to use Illustrator's flexible toolset and UI features to help you develop and refine your idea.
Drawing Pixels in a Vector Program
If you've ever designed icons, you probably used Photoshop or a dedicated icon editor. Although these tools do a great job, using Illustrator has the distinct advantage of letting you work in a fully vector environment. This gives you the ultimate speed and efficiency not only when creating an icon, but also when working with multiple sizes of an icon and making entire icon sets.
When designing icons in Illustrator, you could create the icons just as you would in a raster-based application such as Photoshop. The first few icons that I ever drew were created with 1 x 1 vector squares that mimicked pixels (see Figure 1).
)
Figure 1 Creating vector icons the hard way—pixel by pixel.
This was the only way that I could think of to get the anti-aliasing just right. While it was an effective way to get the look I wanted, it was inflexible when I tried to make other sizes. Illustrator offers a better way. Once you understand how the pixel grid works in Illustrator, you can use it to optimize anti-aliasing while still getting all the detail you might need for your idea.
Pixel Grid and Preview Modes
Historically, Illustrator's main shortcoming when creating artwork destined for the screen was its lack of a true pixel grid. Objects would end up with fuzzy edges once they were sliced and exported to GIF or JPG formats. Workarounds existed, but were still imprecise. Thankfully, Illustrator CS5 added a pixel grid feature, and by doing so made it possible to create pixel-precise designs—exactly what you need when creating icons. The best way to get your artwork correctly positioned on the pixel grid is to use it in tandem with Illustrator's preview modes.
Illustrator allows you to view your artwork in several ways. An outline mode displays objects as wireframes, but for icon design you'll use the standard Preview mode and the Pixel Preview mode. Both modes can be accessed from the View menu, or you can toggle between them with the keyboard shortcut Command-Option-Y (Windows: Ctrl-Alt-Y).
Preview mode shows all shapes as vector objects, with smooth corners and crisp edges at every level of magnification, as shown in Figure 2.
)
Figure 2 Artwork as viewed in Preview mode.
Pixel Preview displays artwork as if it were rasterized (see Figure 3), mimicking the way Photoshop displays artwork. The pixel grid is visible when zoomed in over 600%, making it easy to see the anti-aliasing and work on the finer details.
)
Figure 3 Artwork as viewed in Pixel Preview mode.
Tips for Good Anti-Aliasing
As you start to draw shapes for your icon, it's best to just draw and not worry too much about the grid. Once you've blocked out the primary shapes and added color, you can refine the design to fit the grid.
To get good anti-aliasing, you'll need to know how best to align your paths on the pixel grid. The placing of points is important in achieving this goal. Figure 4 shows the best location for placing key points on a pixel.
)
Figure 4 Placing points at these spots on a pixel will yield better anti-aliasing results.
The grey square represents a 1 x 1 pixel. Each blue square represents the ideal spot on the pixel to place a key point. Anywhere outside these locations will affect the anti-aliasing. Not every point in an icon needs to be in one of these locations, but if you're having trouble getting part of your design to anti-alias properly, positioning with these points is the first solution to try.
When you flip the view between Preview and Pixel Preview modes, you can see any effect that adding or editing objects has on the icon's anti-aliasing. Rather than flip between the views, which gets cumbersome after a while, Illustrator has an awesome feature that lets you see your changes in real time. Let's check it out.
Split-Screen Editing
A little-known Illustrator feature is the ability to open multiple windows in the same document. This technique creates a split-screen view of your work so that you don't have to flip back and forth between view modes. Each open window has its own settings, so you can have a window for Preview mode, one for Pixel Preview mode, one with the artwork set at 100% and all selection edges hidden, and so on.
To set up a document for split-screen icon design, follow these steps:
- Open a new document by pressing Command-N (Windows: Ctrl-N). In the New Document dialog (see Figure 5), choose Web as your document profile, and set the size to 640 x 480. (The profile setting will change to Custom after you select the artboard size.) Open the Advanced section at the bottom of the dialog and uncheck the option Align New Objects to Pixel Grid. Make sure that Preview Mode is set to Default, and then click OK.
- If you don't have the Application Frame enabled, as shown in Figure 6, turn it on by selecting Window > Application Frame. Using the application frame is great for icon design, as it allows for better flexibility when working with multiple windows.
- Open two new windows for this document by selecting Window > New Window twice. You'll end up with three windows in tabs. The filename is the same, followed by a colon and a number after the filename to designate each view. In Figure 7, the file is named Untitled-2, and the three windows are numbered 1–3, left to right.
- Create the split-screen view by selecting Window > Arrange > Tile. Each window moves to take up a portion of the space inside the application frame, as shown in Figure 8.
- The benefit of using the application frame is that as you resize one window, the others resize with it. To resize the window, click-and-drag one of the window borders in the center of the view (see Figure 9).
- Click in window 2 to make it active. This window will show the pixel version of your artwork. To set this, select View > Pixel Preview or use the shortcut Command-Option-y (Windows: Ctrl-Alt-Y).
- Click in window 3. This window will show the 100% view of your artwork with all selection aids turned off. First, press Command-1 (Windows: Ctrl-1) to set the magnification level to 100%. Then select View > Hide Edges or press Command-H (Windows: Ctrl-H) to remove the selection highlighting. This keeps the highlight from obscuring the design as you make changes in a different window.
)
Figure 5 Setting your artboard size.
)
Figure 6 Using Illustrator's Application Frame makes it easier to work with multiple windows.
){kind=small}
Figure 7 Multiple windows open in tabs within the Illustrator UI.
)
Figure 8 Tiled window setup.
)
Figure 9 Drag a window edge to resize the windows.
The final step is to adjust the view settings for each window. Window 1 is already set; it's in standard Preview mode, and it will be the window where you do your work.
Once you have your workspace set up (see Figure 10), you can start creating your design. You'll do your work in window 1; view the pixelated art in window 2, and see the icon at its actual size in window 3.
)
Figure 10 Illustrator UI set up for icon design.
When you save and close the document, Illustrator remembers the extra windows you set up. The next time you open this document, Illustrator opens the other two windows as well.