In the past few weeks we have received several e-mails from different users in which they were asking us if we could share a few tips regarding icon development. This tutorial is our reply to those users and a small contribution to all of you out there interested in icon development.

In this tutorial we're going to show you how we made the Calendar Icon from our most popular icon set “Coquette”.
Before you start developing your icon, you must first have a clear vision of how your icon will look. For a moment, step away from your computer and try to visualize your idea. Sketching on a piece of paper is very helpful in order to determine the design direction of the icon you are developing.

The design idea behind this icon set is to create a very appealing, seductive look, one that can be used in all kinds of projects (websites, blogs, software, applications), and most importantly, a look that will bring a lot of attention and style to your projects.
In order to succeed the initial design idea, we need to keep the design very simple. We’ll be using rounded, curvy corners to achieve the cute feel, and strong, vibrant colors that will totally seduce our users.

Once you’re clear about the design course, you can start working on your computer. For the purposes of this article we'll be using Adobe Illustrator CS2.

From the Tools window select the Rectangle Tool and make a rectangle.

With the rectangle selected, choose Effect > Stylize > Round Corners, and give the rectangle a 23pt roundness.

Select the Gradient Tool and make a nice radial gradient using gray and white colors.

Then go to Object > Expand Appearance.

We are now ready to make the holes for the calendar holders (that are going to be added a little later).
Select the Ellipse Tool and hold the Shift key to make a perfect circle. Select the circle and hold the Shift key to select the rectangle, as well. Then choose Window > Pathfinder>Trim. Repeat the same action for the second calendar hole.
The icon base is now ready.

With our icon base created, we can proceed making the colored layer of the top part of the icon. Use the Copy and Paste action to duplicate the icon base. Select the Rectangle Tool and draw a rectangle over the area of the icon base object that you want to remove. Select both rectangle and the icon base and trim the duplicated object using the same Trim Tool from the Pathfinder, so we are left with only the top part of the icon.

Select the top part of the icon and use colorful gradient to get some really nice contrast. This time I’ll choose the linear gradient using strong red colors.

I now want to make the calendar holes stand our a bit. To do that I will add an additional circle with a stroke. Select the Ellipse Tool, to make the circle and choose a darker red color for the stroke.

To make the calendar holders, select the Rectangle Tool to create the rectangle, and then make the corners round, same way as we did above. We also want to use a linear gradient for the holders object.

To be able to put some gradient on the stroke, I need to convert the stroke to an object.
Select the rectangle and go to Object > Expand Appearance, then choose Object > Path > Outline Stroke. Now we can put a gradient to the object.

It’s time for the typography. Choosing the right font is a very important task. Since the icon design uses round corners, we think it will be most suitable to use a font with rounded corners. For the purposes of this tutorial I’m using a font called “Arial Rounded”.
So, select the Type Tool, and type the word you need.

Let’s make some circles using the Ellipse Tool. The circle objects will simulate the days of the month.

Using the same font, we're typing a desired date. The right font and color will surely give the icon a strong visual impact.

A final touch is adding the glossy effect. Copy and Paste the red top of the icon twice. Then select the second copy with the first one, and trim it by using the Trim Tool, that way so you're left with just a small portion of the whole object. To get rid of the unnecessary holes create another rectangle right above them and select the rectangle with the glossy effect object, then trim it by using the Trim Tool again. Use a brighter red color to accent the effect.

We hope you enjoyed this article and it gave you some new ideas for creating web icons. Make sure to visit the DryIcons website regularly, lots of new features are yet to come.