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.
Creating Multiple Sizes

Creating Multiple Sizes

Once you've created one size of your icon, Illustrator's vector drawing benefits help you to create multiple sizes quickly and easily. For example, you could start with an icon at 32 x 32 pixels. From there, it's easy to halve it, creating a 16-pixel icon, or double it to create 64 px and 128 px sizes. Resizing doesn't always create a perfect icon; you'll need to adjust some of the details to get it right. However, it takes less time than trying to do the same thing with pixels.

The larger you go, the easier it is to add more detail to the icon. For example, the icons at 32, 64, and 128 pixels in Figure 11 have some text added to the icon, as kind of an Easter egg. I also added a few more details to the pencil itself, which translate really well once you get to the largest size.

Figure 11 The original icon, resized twice.

For the 16- and 20-pixel icons, you can edit out the extra detail. This creates a cleaner look, which is more important at such a small size (see Figure 12).

Figure 12 Smaller icons can get away with less detail.

If you'd like to get a closer look at how these icons were built, download the example file.

3. Views and Artboards | Next Section Previous Section