VECTOR ICONS FOR ILLUSTRATOR WINDOWS
Split-Screen EditingĪ little-known Illustrator feature is the ability to open multiple windows in the same document. 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. 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. 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. Anywhere outside these locations will affect the anti-aliasing.
Each blue square represents the ideal spot on the pixel to place a key point. The grey square represents a 1 x 1 pixel.
Preview mode shows all shapes as vector objects, with smooth corners and crisp edges at every level of magnification, as shown in Figure 2.įigure 4 Placing points at these spots on a pixel will yield better anti-aliasing results. 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). An outline mode displays objects as wireframes, but for icon design you'll use the standard Preview mode and the Pixel Preview mode. Illustrator allows you to view your artwork in several ways. The best way to get your artwork correctly positioned on the pixel grid is to use it in tandem with Illustrator's preview modes. 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. Workarounds existed, but were still imprecise. Objects would end up with fuzzy edges once they were sliced and exported to GIF or JPG formats. Historically, Illustrator's main shortcoming when creating artwork destined for the screen was its lack of a true pixel grid. 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. While it was an effective way to get the look I wanted, it was inflexible when I tried to make other sizes. This was the only way that I could think of to get the anti-aliasing just right. The first few icons that I ever drew were created with 1 x 1 vector squares that mimicked pixels (see Figure 1).įigure 1 Creating vector icons the hard way-pixel by pixel. When designing icons in Illustrator, you could create the icons just as you would in a raster-based application such as Photoshop. 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. Although these tools do a great job, using Illustrator has the distinct advantage of letting you work in a fully vector environment.
If you've ever designed icons, you probably used Photoshop or a dedicated icon editor.
VECTOR ICONS FOR ILLUSTRATOR HOW TO
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. This article will show you how to set up Illustrator for the task and provide some efficient techniques for getting your design just right. Many tools are available for designing icons, but you may not be aware that Illustrator CS6 is great for the job. If you don't get the metaphor right and then nail the execution, you may leave your users scratching their heads in confusion. Icons give your users visual cues to the features and content in your applications. Not only does it take real artistic ability the ideation and implementation of the correct metaphor also are crucial to success. In my opinion, one of the more difficult aspects of UI design is that of creating icons.
0 kommentar(er)
