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

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

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.
Views and Artboards

Views and Artboards

Once you have several icon sizes in your document, it gets annoying to have to scroll between them constantly. Luckily, Illustrator provides a couple of features for you to access each icon quickly. The first of these features is the ability to create and save views, which make it easy to get to a certain spot and magnification level with one click.

Creating Custom Views

To create a new view, all you need to do is set up the view in your Illustrator window and then select View > New View. A dialog will appear, letting you name your new view. Once you've saved your views, you can access them at the bottom of the View menu, as shown in Figure 13. To change the view's name or delete a view, select View > Edit Views.

Figure 13 Custom views are accessed from the bottom of the View menu.

Creating Multiple Artboards

Another handy option is to create a separate artboard for each icon. The benefit of this method is that you can easily export each size without having to use slices.

To create a new artboard, perform the following steps:

  1. Click the Artboard tool (Shift-O) to enter Artboard Editing mode.
  2. Click and drag a new artboard in an empty area of the workspace (see Figure 14). You can use the Transform fields in the control panel to size the new artboard to the dimensions of the icon (see Figure 15).
  3. Figure 14 You can create artboards of any size with the Artboard tool. You can drag with the tool to create one…

    Figure 15 …or click once to set it and then size it using the Control panel.

  4. Select any other tool to exit Artboard Editing mode.
  5. Open the Artboard panel and double-click the name of the artboard you just created (see Figure 16). Give the new artboard a meaningful name. Naming your artboards makes it easy to navigate to a specific artboard while editing, and the name is used when exporting the artwork.
  6. Figure 16 Manage artboards with the Artboards panel.

Once the artboard is created and you've given it a name, you can start your design on it. You can create up to 100 artboards in a single Illustrator document. To navigate to an artboard in the document, use the Artboard panel (View > Artboards) or the artboard navigator, which is located in the lower-left corner of the document window (see Figure 17).

Figure 17 Use the Artboard navigator at the bottom left of the document window to move between artboards.

4. Conclusion | Next Section Previous Section