In this section you will learn how to create an icon in Illustrator.
The black textured surface with gradient gives a cool impression. You can already use it as a web icon.
The method per se is not complicated, however it involves with detail professional settings such as gradient, shadow, and edge. We will provide you precise explanation in each step. Read carefully and try mastering the techniques.
Draw a precise circle using the oval tool. (Oval Tool + Shift + Drag for a precise circle)
This circle will be the exterior circle of the icon (the silver frame part). Make it a desired size of the icon you would like to create.
Draw a small precise circle inside the existing precise circle.
Select the circle you have drawn in Step 01. Click [Object -> Transform -> Transform Each].
[Transform Each] dialog appears. Set the preferences as shown above.
Do not forget to click the copy button!
A 90% minimized circle is copied inside.
We will apply gradient for each circle.
Set gradient on the exterior circle.
Select the exterior circle, set the preference as shown above in the gradient panel (Window -> Gradient).
The gradient setting is a little complicated, but make sure you set the angle, location, and color with right numerals. The color is set in greyscale. (Double click Color in the gradient panel -> click the color mode setting on the adjustment slider -> greyscale)
By making the gradient line shaped, tilting the angle, and setting the color alternately with black and white, you can give a light reflected like silver surface impression.
After applying gradient on the exterior circle, now you do the same with black gradient on the interior one.
Select the interior circle, set the preference as shown above in the gradient panel (Window -> Gradation).
This is another precise gradient setting, but make sure you configure tight angle, location, and color. This is almost a simple black, but a slight gradient gives a realer texture.
Next, we will style up the silver frame.
Select the small circle and click [Effect -> Stylize -> Inner Glow]
An inner glow dialog box opens up. Set the preference as shown above.
Shadow is applied on the inside edge of the small circle!
The silver frame now looks styled up with the shadow inside the edge.
Insert an image in the circle.
Open a symbol panel (Window -> Symbol) and click [Click Upper Right (see above) -> Open Symbol Library -> Web Icon].
(You can select any image. Use an image in the Illustrator symbol library or create a new one with pen tool.)
Choose an icon image you like from the web icons. Drag it on the art board.
While staying that state, click [remove symbolic link] in the symbol panel. No you change the size and color of the image and place it on the circle.
We placed the size of the icon, changed the color to white, and placed it on the circle.
Now the black icon is completed!
This is already good to go as an icon but this time we apply a slight shadow under it.
Draw an oval like above with the oval tool.
Set the color black.
Apply Gaussian blur on the oval.
Select the oval and click [Effect -> Stylize -> Gaussian blur].
Gaussian blur dialog box appears. Set the preference as shown above.
You can confirm the level of the blurriness with [Preview]. Set is as you wish.
Move the blurred oval under the icon (put the layer back), and the icon is completed.
Now you have a beautiful icon with textured silver frame and realistic black gradient.
The technique per se is not complicated, however, with the precise settings the icon’s texture is very realistic. This is ready to use for real life, please try.