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

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

  • Date: Sep 3, 2012.

Contents

  1. Drawing Pixels in a Vector Program
  2. Creating Multiple Sizes
  3. Views and Artboards
  4. Conclusion

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.

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:

  1. 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.
  2. Figure 5 Setting your artboard size.

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

  5. 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.
  6. Figure 7 Multiple windows open in tabs within the Illustrator UI.

  7. 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.
  8. Figure 8 Tiled window setup.

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

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

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.

2. Creating Multiple Sizes | Next Section

Adobe Press Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Adobe Press and its family of brands. I can unsubscribe at any time.

Overview

Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Adobe Press products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email ask@peachpit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security

Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children

This site is not directed to children under the age of 13.

Marketing

Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out

Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.adobepress.com/u.aspx.

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links

This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020