© Copyright 2005 Dangergraphics.com. All rights reserved.
Powered by Movable Type | Xhtml | CSS | Contact
Introduction
I've experimented with several different ways of creating icons. This tutorial uses the method I find best for creating icons in Adobe Illustrator. Adobe Illustrator is a perfect tool for icon creation because its precise and flexible.
Step 1 Choose Icon Size
Where to start. I find it best to build the icon at the size it's going to be, if its going to be 32 x 32 pixels then build the icon at that size. I know Adobe Illustrator can scale the icon but that can distort the pixels.
For this tutorial the size I'm working at is 32 x 32 pixels. Make sure to enable pixel preview in Adobe Illustrator.
Enable pixel preview mode.
In Illustrator, choose View / Pixel Preview. Illustrator displays the vector artwork as pixels.
A. Create a new document at 32 x 32 pixels.
Step 2 Basic Shape
Start by creating a rectangle using the rounded rectangle tool from the tool bar to create a rectangle at 30 x 25 pixels with a bevel of 5 pixels. ( See Image Below )
Step 3 Bottom Highlight
Next add a circle using the circle tool from the toolbar. The circle is then moved to the bottom of the rectangle and squished. ( See Image Below )
Step 4 Blur Highlight
The circle is then given a feather of 3 pixels. To feather a shape in Adobe Illustrator select the shape first, then go to the effects menu, next select the blur fly-out menu and final click on gaussian blur. Now change the color of the circle to a light yellow and change the transparency to 50 percent. ( See Image Below )
Step 5 Mask Highlight
Next we have to mask out the circle highlight so it doesn't bleed out side the rectangular shape.
A. This is done by selecting the rectangle and copying it. ( command + c ) Now go to the windows menu select the transparency palette. Next select the blurred circle from the main work area.
B. In the transparency palette window click the fly-out arrow and select Make Opacity Mask.
C. Now double click on the black mask area to the right of circle in the transparency palette. This should activate the mask for the circle object.
D. Next paste the rectangle shape that we copied to memory by press command + p this will paste the rectangle in the mask window.
E. With the mask rectangle still selected fill the rectangle with black make sure that the check box for the clip option is unchecked and that the invert mask check box is checked.
That should do it. Your Transparency window should look like this.
Step 6 Top highlight
The next step is to add the top highlight, this is done the same way as in step 5 but with two differences.
A. Make a new rectangle with a bevel of 5 pixels and Align it to the top of the base rectangle. Don't feather this rectangle.
B. Change the color of this rectangle to white and set the transparency to 50 percent.
C. Now copy the rectangle and add a transparency mask to this shape.
D. Paste the rectangle into the transparency mask by pressing command + p.
E. Instead of filling the mask shape with black fill the shape with a black and white gradient. Make sure the gradient goes from top to bottom.
The Transparency window should look like this:
Step 7 Add Gradient Chrome Reflection
Now we need to add the chrome reflection for our aqua icon.
A. Start by making an dark red rectangle in the middle of our base rectangle. ( See Image Below )
B. Next we need to add a transparency mask to the dark red rectangle. Make sure to add a black and white gradient fade to the mask object.
Your aqua icon should look something like this. ( See Image Below )
Step 8 RSS Text
For this step we add text to the icon.
A. Select the text tool and Type "RSS" and center in the button. ( See Image Below )
Step 9 Text Gradient (optional)
I want to have gradient fade over my "RSS" text.
A. Added a rectangle with a black and white gradient.
B. Copy the RSS text and then add a transparency mask to the gradient rectangle we just added.
Step 10 Conclusion
Congratulations we are done. Your Aqua Icon should look like this ( See Image Below ). Wow that's more typing then I did in college. I have provided a link to the source illustrator file at the bottom of this page feel free to use the file as you want.
If you have any question or want a better explanation of any of the steps in this tutorial please comment below.
This is the first tutorial on my site if you found it useful and would like to see more please comment below.
Thanks, Jason
Great article, and great detail. I love working in Illustrator but usually fall back to Photoshop for that kind of work.
And great site. I love the unique design and clear communication.
Keep it up!
Nice tut.
Also, this is one of the nicer sites I have seen in a while. I forgot we can do stuff like this.
Maybe we will see more good stuff like this once we get over the 56k hump.
Wow, very nice tutorial.
And the website, fantastic design!
Yeah Jason! Very good. Please, make more tutorials!
Thanks for the tutorial, nice and clear, easy to follow. One question - how do I save this as an ICO format file? I just spent $1,100 on the CS2 suite and find it hard to beleive I now need to spend another $35 to buy IconWorkshop yet that is what some other sites have said is needed.
Is there a way to save as an ICO from within Illustrator, maybe there is a plug-in?
Thanks.
The easy way i know of, how to. Safe as a .gif then change the name to .ico (press F2, pc). Working fine for me. I'm shure that there is a better way to do it.
Btw, Nice tutorial.
I don't know of a plugin for Illustrator but here is a link to a free plugin for adobe photoshop.
http://www.telegraphics.com.au/sw/
OO this is exacly what i'm searching for...how to do illustrator icons, i build my icons in Photoshop but i now the realy professional stuff is drawn with Illustrator.
Cool blog! Come visit my site. John Martinez
Thanks for signing in, . Now you can comment. (sign out)
(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)
wow damn nice article!