UI Design with Adobe Illustrator CS6, Part 2: Creating Vector Icons

Contents

Article Description

Wish you had an efficient way to create custom icons in multiple sizes for use on your websites and in your applications? Adobe Illustrator CS6 grants you the power, as demonstrated by Rick Moore, author of UI Design with Adobe Illustrator.

From the author of

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).

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.

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.

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.

Figure
6 Using Illustrator's
Application Frame makes
it easier to work 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.

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).

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.

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.

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.