Quick Tip: How to Make a Reusable Icon Style using the Appearance Panel

In the following Quick tip you will learn how to create a cute rounded icon style. You will use basic shapes and Pathfinder options to create glyph style icons and the Appearance Panel to create a style that can be re-used on everything from icons to text. Let’s begin!

Step 1

Because this design is intended to be used as a web icon, begin by making a 96x 96 pixel artboard. Other popular sizes for web icons are 48px and 16px. When you’re creating icons remember to set the grid to pixels. Go to Preferences > Guides & Grid and change the settings to have a grid line every 10px with 10 subdivisions. This will give you a pixel sized grid to work with.

Step 2

As an example, I’m going to show you how to create a simple Magnifying Glass using the Pathfinder options and some shapes. You can make any shape you like.

To make a Magnifying Glass, Command + Click onto the artboard with the Ellipse Tool (L) to bring up the Ellipse Options dialogue and enter 42px for both the width and the height. Click OK to create a circle.

Step 3

With the Rectangle Tool (L), Command + Click onto the artboard to bring up the Rectangle Options dialogue and enter 12px for the width and 40px for the height. This will be the handle of the magnifying glass.

Step 4

Position the Rectangle at the bottom of the Ellipse so that it’s slightly overlapping and align the two shapes Horizontally. You can find the Align Options at the top of the Program Window or by going to Window > Align.

Step 5

Select both shapes and while holding down Shift, Rotate the shape to the Left so that its sitting diagonally. Group the two shapes with Command + G and align them to the Artboard. You can align objects to the artboard by clicking the "Align To" options on the Align Panel. Once the option is selected, anything that is aligned on the artboard will align with the artboard itself and not the objects that it’s selected with.

Note: Another handy tool is the Align to Pixel Grid option that is in Illustrator CS5. This will make sure that the shapes will export from Illustrator with the sharpest lines possible. To find the Align to Pixel Grid option, go to Window > Transform and there will be a checkbox at the bottom of the Transform Panel.

Step 6

Select the Ellipse and go to Object > Path > Offset Path and in the dialogue box enter -6px. This will create a smaller Ellipse. Select the new Ellipse and fill it with a color that’s different from the main object so you can see it.

Step 7

Select the large Ellipse and the Rectangle and in the Pathfinder Panel, Option + Click the Unite Button to create a Compound Shape. I like this option as it doesn’t completely combine and expand the object, giving you the ability to tweak the shapes later on without having to re-draw them.

With the objects still selected, send them to the back with "Command + Shift + Left Square Bracket".

Step 8

Select the Smaller Ellipse and Copy it (Command + C) then delete it. Click into the Compound Shape of the Magnifying Glass Shape and Paste the Smaller Ellipse in Place (Command + F). Select both Ellipsis and Option + Click the Exclude Button to cut a hole in the main ellipse. Again, because it’s a compound shape, it’s easy to edit later.

Step 9

Now we will begin to create the icon style. Select the object that you’re working on and go to the Appearance Panel. Select the Fill layer and click the Effects icon at the bottom of the dialogue. Go to Stylize > Round Corners and enter 2px as the Radius, click OK.

Note: You can preview the effect by selecting the preview box at the bottom of the Round Corner options dialogue. This can be handy if you’re not sure of the scale.

Step 10

Make a new fill layer in the Appearance Panel (you can do this by clicking on the icon at the bottom of the Panel) and select any color you like. I’ve used Blue and changed the main icon to White. Go back to the effects tab and select Convert to Shape > Ellipse. This will dynamically create a circle behind the icon.

Enter the Width and the Height you would like to make the icon. I’ve selected 93px for both so that there’s a few pixels left each side of the 96px icon space.

Step 11

With the Blue Fill Layer selected in the Appearance Panel and the Main Shape still selected, go back to the effects tab and select Distort & Transform > Zig Zag. We will set the Relative size of the Zig Zags to 1% (this will enable them to scale with the object), the Ridges per Segment to 15 and the Points to Smooth. You can play around with these settings until you have a look you like.

Step 12

For the final touch, add a subtle grain effect. Again, this is applied in the Effects Menu by going to Texture > Grain. Play with the Intensity and Contrast settings until you find a style you like, I made mine subtle with dark patches by using an Intensity of 12 and a Contrast of 64. The settings will be different depending on how dark or light your color is. Click OK and admire the results.

Note: Because the Grain is a raster effect, you may get some jagged edges. This is because the default Raster Effect settings are set to 72dpi to save rendering time. If you want to increase the viewing resolution you can do so by going to Effect > Document Raster Effect Settings. I would recommend doing this at the end of a project as a high setting can slow down Illustrator.

Take the time to make some variations on the style and test them on different shapes and letters. I’ve made a few adjustments to the main theme by creating a lighter color with a different Grain setting and some Square shapes instead of circles that I’ve applied to a bold font. Once you’re happy with the results, save them to the Graphic Styles Panel for future projects. You can do this by selecting the object and clicking on the New Graphic Style button at the bottom of the Panel.

Conclusion

There you have it. A simple way to make a few different effects that will help you create some cute looking icons. Now you have learned how effects can come in handy when creating custom icon sets, all you need is a set of symbols and a few styles and you can make hundreds of different designs. I hope you enjoyed this tut.