Aidan Cotter

I know the Internet has 1000+ tutorials on how to make a simple icon….but it couldn’t hurt to have another. This is the first tutorial I have written so please, go easy on me.

OK lets get started, I’m using Adobe Illustrator CS3 to make this but the process is pretty much the same on CS4 and CS5.

Open up Illustrator  and create a new Document, select the following settings :

When you are ready click the ELLIPSE TOOL in the tool bar. Or you could hit L on the keyboard, what ever you find the easiest.

With the Ellipse Tool selected, left click once in the middle of the page. A pop up box should appear, copy the following:

64PX x 64PX is usually the larger sized icon, but dont worry about size at the minute (that’s what she said!). So after that we should have something along the lines of this:

Next we want to add a gradient and remove the stroke. To make it super easy I’m using a free set of Web 2.0 swatches that you can find over at Dezinerfolio. I’m just going to stick to this funky lime green color, but you can pick anything you like. Next we want to create an inner circle, make sure your icon is selected and on the menu bar go to OBJECT>>PATH>>OFFSET PATH you should see a small pop up, copy the following settings:

Select the new inner circle and copy the following settings FILL: none, STROKE: white, STROKE WIDTH:1px

Next we will create the symbol for inside our icon, again select the ELLIPSE TOOL and left click once inside the icon, input the following settings WIDTH:43px HEIGHT: 30px, You should have something that looks like this:

Using the pen tool draw a curved triangle fill it with white and set the stroke to none:

Once you have created the curved triangle we need to stick it to our speech bubble. We need to make sure our pathfinder window is open, on the menu bar go to WINDOW>>PATHFINDER. Position the curved triangle to the bottom left of the speech bubble, with both of them selected ( Shift + Click to select both) click Add to shape in the pathfinder window:

we should now have something that looks like this:

Now we are going to create a sexy shine to give it that web 2.0 look. While holding ALT on your keyboard click and drag the outer  circle to the left, this duplicates it, do it again and line up your two new circles like you see below:

Now select both of your circles and click the SUBTRACT FROM SHAPE button on the pathfinder toolbar then hit expand, you should have something that looks like a half moon, like this:

Change the colour of your half moon shape to white. Over your half moon draw a rectangular box and give it a gradient from black to white like this:

Now on the menu bar select VIEW>>PREVIEW, the page should look like this:

While holding down shift select both the gradient rectangle and the half moon shape, you can now return the view back to normal by going to VIEW>>PREVIEW. Make sure you don’t deselect the shapes. With them both still selected open your transparency window WINDOW>>TRANSPARENCY, hit the options button in the top right and select MAKE OPACITY MASK.

Now all you have to do is line up the half moon shape with the other elements, if the shine doesn’t look right try ticking the Invert Mask selection in the Transparency box. Also if you think its too bright, drop the opacity down to about 80…that’s usually the sweet spot :

Well I hope that wasn’t too long winded? It is my first tutorial after all! Please let me know what you think in the comments! Here’s a few icons I created in the same fashion and they, along with a few others should be available for download soon!! Thanks for reading!