Rockstar Icon Designer - Kate McInnes [33]
Once you have a style you like, select the layer that it's applied to and click the “Create New Style” icon at the bottom of the Styles palette. Remembering to save styles as you make them will save you time in creating new styles every time you need one.
Special finishes and effects can be applied using layer styles.
Tips to Create a Flat View Pictogram Set with Adobe Illustrator CS4 and Above
Because more emphasis is put on the shape rather than the finish of Pictogram icons they are best created as vector shapes in a program such as Adobe Illustrator.
For a quick overview on creating pictogram icons, we will begin from stage one of computer rendering which should only begin after you have a completed list of icons to be made and a sketch of each design.
Setting the Canvas Space
First set the canvas to the mid-size you need to create. So, if you need to make a 48px to 16px set, create the 32px icon first. This will help with scaling the icon later on. The most common sizes for this style of icon range from 48px to 16px. I'll be using Adobe Illustrator CS4 which has support for multiple art boards, so I will be creating art boards for each icon I need to make and begin with the 32px size.
Adobe Illustrator CS4 and above supports multiple canvas and pixel preview, which when combined, are a fantastic combination for icon design. Inkscape has an icon template that has a special scaling algorithm that optimizes each size of icon a little bit better than some other image editors, but again, if you're comfortable with a particular software package, you'll most likely be able to make better icon designs than you would with software that is unfamiliar to you.
Let's move on. Set the width and height of the art board in pixels and make sure that the color space is set to be RGB. If you're working in Photoshop, it's also handy to have the background set to transparent so you can see exactly where the art space begins and ends.
If you are using Photoshop, set the document grid to represent pixels. You can do this by setting the gridline to every 10 pixels with a sub division of 10. This will show you where the pixel boundaries are and help you to make shapes that will clearly render along these lines.
If you haven't done so already, turn on the grid view for the artboard and set the artwork to "Snap to Grid." These two settings will make it easier to fit the icon to the artboard and will help to create a pixel perfect design.
Adobe Illustrator Tip
If you're using Adobe Illustrator to make icons, you can use this handy tip to preview the icons as you work. First, set the Artboards that you will be using and any guides that you need. Then go to Window > New Window. This will duplicate your working space. In this new window set the preview mode to Pixel Preview (View > Pixel Preview) and the zoom to Actual Size. (View > Actual Size). Then turn off the visibility of the artboards (View > Hide Artboards)
Once the second window is set properly, arrange the two windows next to each other, or for people with two monitors, you can put the 2nd window on the 2nd monitor.
Leave the 2nd window and go back to the first. In the first window zoom in as close as you want to work. Begin to draw your icon. You will notice that the drawing you're making on the first window is being duplicated in the 2nd window at real size in a view similar to what you can expect when you output the icon to raster format.
This tip is particularly useful for glyph icons as they need to be extremely precise and have a uniform appearance to others in the set.
Using a Grid
This is an additional step I like to use for glyph icons when I'm working in Adobe Illustrator. To make drawing glyphs even easier I like to use a file that has horizontal, vertical and diagonal guide lines added. Illustrator gives you the option to add custom guides. Using these guides, will not only ensure that the shapes are rendering perfectly along the pixels, it will help you plan the visual balance