In Tips, Tutorials Oct 15, 200844
Icon Design Tutorial – Designing a New Icon In Illustrator
Following our free social icon giveaway, as promised, here is a tutorial explaining how they were made in Adobe Illustrator. We’ll try to cover the basics and give you an idea how things are rendered, how they appear in smaller sizes and the constraints we can find when using Vector (Illustrator) instead of Pixel (Photoshop) based image software.
Step 1
We are going to start this icon with the basics. A good suggestion is to envision this icon/image in your head before even designing it. First we sketch what we are thinking by simple scribbling our ideas. See below and example of it:
Step 2
As you can see there is some perspective applied to it and that’s something we should take into consideration when creating icons. We are to achieve similar results, as the sketch should be only to give us a blue print of what is coming next. After sketching, we then transfer this into our Art Board, on Illustrator. We simply create a “square-type” to start:
Step 3
Next we are going to mimic the perspective from our drawing, by applying some 3D effect. See the screenshot below:
Step 4
Here is the result after applying the effect.
Step 5
We have to start applying some effects to achieve the glossy-transparent look. Adding these will give us what we expect. We are going to use different transparencies (screen, multiply, darken, luminosity etc…) to get to them. Below are a few shapes where we are applying those effects! Take a look at the transparency “%” as well as the gradients used. This is very important.
These effects are “key” to use and achieve ANY result. All it takes is time and try things out. See below:
Step 6
After applying these to all your shapes, you should have something similar to the screen below:
Step 7
After designing the box we need to apply similar 3D effects and shape transparencies effects to the logo icon. We should have the same angles applied as well. Below you will see 4 basic steps of what we have already cover (Regular Shape, 3D Applied, Added Shapes and Final Rendering):
Step 8
Below are a few more step on how we create the effects. We first select the shape we wnat to apply the effect. Using our gradient tool (G), we will click and drag into opposite directions. If we want the gloss (Lighten) to be on the top of a shape we need to drag starting from the top to the bottom of the shape. This will apply the effect on top of the shape and one thing to keep in mind is that we need to try different “dragging” instances/moves, until we get the way we want. For every shape we use the same effect a few times. See below a few samples:
Step 9
Now that we have both rendered shapes, we can merge them. Notice that the “front” portion of the box, is placed “on top” of the logo icon, and a transparency of 85% is applied so it becomes see through.
Below is the final rendered icon:
Many thanks to Dellustrations.com for the fantastic icons and tutorial, make sure you check out the full set of free social icons.
44 Comments
Oct 15, 2008
That one / technique is really cool actually. Going to try it out later, thanks for sharing!
Oct 15, 2008
Wow!
This technique is insane!! Very imprissive and the icons done by dellustrations are amazing looking.
Will have lots of fun with those!
Thanks DR
Oct 15, 2008
Awesome! Short but very nice tutorial!
thx
Oct 16, 2008
Great icon and tutorial. I Have a question though. After I made the box 3D.. how do you expand it.. or make it so you can select its actual corners rather than it still showing the corners of the original square.
Oct 16, 2008
nevermind found it.. object> expand appearance. of course, maybe it was assumed one knows to do this.
Oct 16, 2008
Great tutorial. short concise. Thanks for posting, but very helpful
Oct 16, 2008
Very nice outcome, really proffesional, just I hoped for more details.
Oct 16, 2008
[...] we can find when using Vector (Illustrator) instead of Pixel (Photoshop) based image software .read more | digg [...]
Oct 16, 2008
Pretty neat end result. Could use a drop-shadow though.
Oct 16, 2008
Wow, that is most impressive!
http://www.privacy.de.tc
Oct 16, 2008
SVG filters in the next episode please
Oct 16, 2008
Amazing guide!!! Please give us some more of these!!
Oct 17, 2008
Great tutorial. You make it look easy!
Oct 17, 2008
Awesome!
Oct 17, 2008
THIS IS AWESOME!!! The best part is it’s vector based! Great post! Adding gloss to the box is something that I’ve always wanted to learn. More please.
Oct 17, 2008
nice tutorial.. thanks for share… i will try it..
Oct 17, 2008
Nice work!
Oct 17, 2008
Interesting tutorial…
Thanks for sharing!
matt
Oct 19, 2008
shocked….superb and thanks for sharing
Oct 20, 2008
As an Illustrator noob I’m not getting past step five – any chance that someone could break down exactly what is going on here?
Or even link to some tutorials showing the different tools used at this stage.
I just cannot get the gradients to work as they do in this tutorial (which is fantastic by the way).
Oct 20, 2008
Wowww!!!!! really nice work
Oct 21, 2008
[...] Reviver is geared towards Web design, offering tips like how to design icons in Illustrator and 350+ brushes, textures, and fonts in the aptly named "Massive Hand Drawn [...]
Oct 27, 2008
there seems to be a missing step before step 5. how do you seperate the sides of the cubes to single shapes?
Oct 27, 2008
Wow, this is a fantastic tutorial, I am definately going to give this one a go, because the final outcome is amazing.
Oct 28, 2008
[...] special thanks to Design Reviver and to Dellustrations.com for the fantastic icons and tutorial, be sure you check out the full [...]
Nov 8, 2008
Love icon designs, gonna use your technique for a new set im doing for a client,
good work matey,
Diego
http://www.corporatewebsolutions.net
Nov 11, 2008
thank you for sharing
Nov 20, 2008
Cool.. I’ve just started to learn design in this look pretty amazing, and motivate me to learn more design tool (i just can use photoshop n corel) thanks for sharing..
Aggie
(a teenager form indonesia)
Dec 11, 2008
great tutorial thank you..
Dec 17, 2008
this is a great post, i’ve waiting to release this after the first theme design, i’m trying to learn how to integrate it on wordpress as i’ve don’t have enough time to tweak the css for that, but now this helps me a lot to work. Thank you so much
Jan 2, 2009
Unique/Short-Cut/Impressive
Jan 23, 2009
Excellent technic! By judging just from the freehand sketch, it is done by someone with experience. I wish I could sketch like that…
Feb 4, 2009
very interesting tutorial it is very simple way to learn the graphic designing. thank you again.
Feb 18, 2009
Impressive – but getting from Step 4 to Step 6+ is a bit of a stretch. Perhaps we need a couple of tutorials in between?
Mar 19, 2009
[...] 3D Stumble Icon [...]
May 12, 2009
Really well done tutorial. Thank you so much for sharing. I would only try and get more detailed with this though. Seems like you missed some steps (on purpose maybe)
May 13, 2009
[...] 3D Stumble Icon [...]
May 16, 2009
this is awesome! thank you
I’ve worked hard on my icons. But how do I get them into another suffix (I think thats the word for it) like: .icns, .ico,…
sorry my english is very bad
lg
May 23, 2009
[...] 3D Stumble Icon [...]
Jun 10, 2009
[...] Icon Design Tutorial – Designing a New Icon In Illustrator | Design Reviver SWEET Icon design tutorial – Illustrator (tags: illustrator tutorial tutorials design icons icon webdesign vector) [...]
Jun 22, 2009
[...] Stumbleupon in a Chest – Design Reviver [...]
Jun 25, 2009
[...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Friday, June 26th, 2009 at 6:59 am and is filed under Illustrator Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]
Jun 30, 2009
[...] Designing A New Icon In Illustrator [...]
Jul 1, 2009
[...] Designing A New Icon In Illustrator [...]
Leave a Comment