Pin Me

Adobe Illustrator CS3 Icons: Metal Help Icon

written by: Amanda Presley•edited by: Michele McDonough•updated: 11/2/2010

With the help of Adobe Illustrator, it's fairly easy to create your own web site icons. This tutorial focuses on a metallic design that can be used to design Help icons to aid viewers who are navigating your site.

  • slide 1 of 1

    Creating Your Own Icons in Illustrator

    Adobe Illustrator CS3 icons - metal help icon - finished This tutorial will show you how to create a metal help icon using Adobe Illustrator CS3. This is a round icon with a graphic style applied to it to give it that metal look. Then I used one of the web icons in Illustrator for the help symbol. This tutorial will show you step by step how to create the metal help icon. Open your Adobe Illustrator CS3 program and create a new document to work on.

    Drawing the Circle for the Icon

    We will start off by drawing the circle for the icon. Select the circle tool from your toolbar. Hold your shift key down and draw the circle using your mouse. Holding the shift key down will draw a perfectly round circle. If you are planning to create a small icon, go ahead and draw it large enough to work on. You can size it down with the transform tool once you have finished creating the icon.

    Adobe Illustrator CS3 icons - metal help icon - graphic box Applying the Graphic Style to the Metal Help Icon

    Next, you will need to apply the graphic style to the icon. Go to the top of your Illustrator program and click Window > Graphic Libraries > Type Effects. When the Type Effects box opens, locate the Metal Silver effect. It should be the tenth effect in the box. Click the circle to select it and then click the Metal Silver effect to apply it.

    Adding the Help Symbol to the IconAdobe Illustrator CS3 icons - metal help icon - web icon 

    Now you are ready to add the Help Symbol to the icon. You will need to open the Web Icons symbol box. So, go to the top of your program and click Window > Symbol Libraries > Web Icons. When the box opens, look for the help symbol. It is actually called Information in the box. Once you have located the symbol, click the symbol and drag it to the icon background. You will probably need to adjust the size of the symbol. You can do so by clicking the symbol and then selecting the transform tool. Drag the corner of the symbol outward to make it larger.

    That’s pretty much it for the Metal Help Icon. You can shrink the size of the icon if you need too. To shrink the icon, you can first group the two objects and then use the transform tool to shrink it. To group the objects, select both objects, right click on them, and click Group in the menu that drops down. Then grab the transform tool and shrink the icon.