DesignTips > > How to create an icon in Illustrator

How to create an icon in Illustrator

How to create an icon in Illustrator

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.

Step01 Draw a precise circle in Illustrator

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.

Step02 Copy the circle inside the circle

Draw a small precise circle inside the existing precise circle.

Select the circle you have drawn in Step 01. Click [Object -> Transform -> Transform Each].

Step03 Transform each

[Transform Each] dialog appears. Set the preferences as shown above.

Do not forget to click the copy button!

Step04 A precise circle is copied inside

A 90% minimized circle is copied inside.

We will apply gradient for each circle.

Step05 Apply gradient on the exterior 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.

Step06 Apply black gradient on the inside circle

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.

Step07 Apply shadow on the interior circle

Next, we will style up the silver frame.

Select the small circle and click [Effect -> Stylize -> Inner Glow]

Step08 Inner glow

An inner glow dialog box opens up. Set the preference as shown above.

Step09 Shadow is applied inside!

Shadow is applied on the inside edge of the small circle!

The silver frame now looks styled up with the shadow inside the edge.

Step10 Insert an image in the circle

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.)

Step11 Insert icon image

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.

Step12 Place icon image

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.

Step13 Draw oval under the icon

Draw an oval like above with the oval tool.

Set the color black.

Step14 Apply Gaussian blur

Apply Gaussian blur on the oval.

Select the oval and click [Effect -> Stylize -> Gaussian blur].

Step15 Gaussian blur settings

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.

Done!

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.

この投稿文は次の言語で読めます: Chinese (Simplified), Japanese

How to Create Halloween Jack O’ Lantern Illustration (Illustrator)
How to Create Halloween Ghost Illustration (Illustrator)
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white (monochrome) 3 (Photoshop CS5)
How to Create Retro Photo in Photoshop
How to convert a photo into black and white (monochrome) in 30 seconds 2
How to convert a photo into black and white in Photoshop 1
How to Create Retro Picture in Photoshop