Creating a comment icon in Illustrator

A short tutorial on creating a vector-based comment icon in Illustrator. The tutorial includes a downloadable illustrator file to work through the example with.

What want to achieve

We are going to create a simple comment icon that can be use on a website or CMS. We'll use some simple illustrator techniques to achieve the effect.

Creating the shape

First we want to create the shape. So choose the Elipse Tool (shortcut L). Draw a simple oval on the canvas. Simple enough. Now we need to make it look like a speech bubble so select the pen tool and draw a small triangle in the bottom right hand corner of the canvas. You should end up with something like this.

Now we want to join the oval and the triangle together. To do this we will use the pathfinder tool. Go to Window > Pathfinder to bring up the menu. Then use the Selection Tool (shortcut V) to ensure both the Elipse and Triangle are selected. Then click the Merge icon which is the third from the left at the bottom. This merges the shapes.

Building out some detail

Now we want to add some detail. To create a simple border we use Offset Path. You will find this at Object > Offset Path. Select an offset of -3 or whatever looks good and you will see that the object has been duplicated inside the original one.

Then give the new shape a gradient fill. Get the gradient menu up and create the gradient you want. Then fill the new shape. Select Linear for the type and then choose the angle of your gradient.

Give the outer shape a stroke and finally give the bubble a highlight by drawing another elipse and filling it with a lighter gradient. Flip to the transparency menu (next to the Gradient menu). Choose the screen option for your highlight. And that's it.

For added effect you might like to add a pencil or pen in or whatever you need to denote your user actions.

Why not download the illustrator file and work through the example yourself?

Comments

Abhijit V. Chaore Jul 18 2007: This is a very nice and simple tutorial….thanks….
Sam Aug 14 2007: Great tutorial, very well done.
Brian Purkiss Nov 27 2007: Thanks for the tip!
It was quite useful!
Jesse Dec 22 2007: Nice and easy tutorial, thanks!
3d Emoticons Feb 8 2008: Thanks Great tutorial
Mr. Javo Aug 28 2008: Nice tutorial, very easy to understand. Thanks for sharing :))