How to draw sketch-style icons in Illustrator
Category: Resources, Tutorials Tags: Illustrator, Resources, Sketchy, Tutorials
In this tutorial, we will see how to draw vector icons in a sketch style using Adobe Illustrator CS3. In many cases, sketch style graphic elements (backgrounds, icons, texts) are popular especially for designers’ websites as most of designs come from the very basic sketch drawings. Examples can be found everywhere (e.g. Web Designer Wall, Carphone Warehouse).
Many design would draw these icons by hand and then scan them into the computer, clean up a little bit and use them. Actually, to draw some vector icons in this style is not as complicated as it looks like. Thanks to some distortion functions in Adobe Illustrator. Here we will share some easy steps of drawing an RSS icon and a MP3 file icon. Once you master this technique you can create similar icons for use in other projects like printed brochure layouts.
Step 1
Create a new Illustrator file, basically what we want is a number of same lines in the same direction. Unfortunately, Adobe Illustrator does not have any array tools. However it does have a blend tool which can do the job. Draw a horizontal line, rotate 45 degree and make a copy. Put the two lines at the top left and the right bottom of the art board, respectively.
Click the Blend Tool on the toolbox, the cursor will become a small square with some dots. Move the cursor onto the first line, a small cross will appear on the cursor. Click once, and move to the other line click again when the cursor changes. Now Illustrator will create several lines between the two lines you drew.
You can adjust the stroke weight and the specify the steps between the two lines (double click the blend tool button on the toolbox, the option dialog will pop up) according to your drawing requirements. Basically, when drawing by hand, the more intensive the lines are, the darker colour they represent. So if your icon set are in a single colour scheme, this can be a good way to vary the darkness. Adjust the size so that the lines can cover the art board. Use the command Object>>Expand in the menu to convert the effect into objects which will produce a group of lines.
Step 2
Now, draw a square in the center which be used as the boundary of the RSS icon. Select both the group of lines and the square. Use the Crop command in the pathfinder window to crop the area in the center.
Before doing this, you should make sure the group of lines filled with any colour (NOT None or Transparent). Other wise the crop won’t work. After doing this you probably won’t see the lines but you still can see the selections because the stroke colour has changed. I am not sure why this happens but when you assign the stroke colour you should have the following graph.
Step 3
Apply the Illustrator filter “Tweak” (Menu: Effect>>Distort & Transform>>Tweak…). Set the amount for both horizontal and vertical into 1% relative. The lines will be tweaked a little which is similar to sketch drawing.
Then select the “Twist” filter (Menu: Effect>>Distort & Transform>>Twist…) and set the angle to 3 degree (or any some amount you want). A sketch style fill is ready.
Step 4
Adjust the stroke weight of the lines to meet your desired effect. Draw a square again of the same size you did just now for cropping the lines. Set the stroke weight into 3 to make it thicker. Draw or copy from the standard RSS vector image. Apply the Tweak and Twist filter to the square and RSS icon again to make them the same style. This sketch style RSS icon is ready.
Other Icons
Using this method, we can draw many icons in the sketch style. Here is another example which is a MP3 file icon. We can use the same procedures to produce most parts of this icon. There are something more in this one, the paper and the music notes have some shades on the right. This can be done by using the Blend Tool and the Free Distort filter (Menu: Effect>>Distort & Transform>>Free Distort…)
Download the .AI source file (for Adobe Illustrator CS3)
Have you tried the tutorial? Feel free to leave links to examples created using this as well as any feedback that you may have. Thanks…
March 22nd, 2009 at 03:55
Great tutorial, thumbs up!
March 23rd, 2009 at 10:35
Nice tutorial, but still a little bit complicated. Any detailed information of drawing the shades? Thanks.
March 25th, 2009 at 16:01
sketch,um..i like it!
March 26th, 2009 at 12:13
This is nice. I want more…. man.
March 26th, 2009 at 13:31
Awesome. Thanks.
March 31st, 2009 at 02:33
This is a little too advanced for my skills, but I’ll definitely give this a try. Thanks for sharing this tutorial! I’ll look forward to more posts from you. Great job!
April 3rd, 2009 at 10:20
[...] Sketch-Style Icons Vector Tutorial [...]
April 16th, 2009 at 16:59
Great Tutorial Here! thanks!
April 21st, 2009 at 13:37
Good tutorial, very easy to follow, thanks.
April 25th, 2009 at 22:28
[...] İkon Çizimleri Ders [...]
May 21st, 2009 at 16:48
I think im gonna use those techniques on my next project
Thanks
July 9th, 2009 at 18:32
[...] How to create sketch style icons in Illustrator [...]
August 26th, 2009 at 05:17
very nice tutorial
keep the good work
thanks
October 1st, 2009 at 14:37
[...] Double-J Design – Your ICON and GUI design solutions » Blog Archive » How to draw sketch-style i… [...]
November 2nd, 2009 at 11:11
[...] be looking for some icons in a sketchy style as well. After I presented the tutorial of “How to draw a sketchy style icon“. Here is a free set of 32 icons named “Sketchy” which is in a sketch drawing [...]
January 2nd, 2010 at 11:38
Always wanted to know how these icons are make.
May 4th, 2010 at 13:26
Even though I think your current post is on the right course there are actually several details which i do not agree with.
June 8th, 2010 at 16:03
Your post was shown to me by my flatmate I was searching for this for ages thanks!
June 11th, 2010 at 03:45
I this blog and never comment so wanted to let you know I love the website
June 24th, 2010 at 16:32
I’m really loving the blog, and hope this, as well as the excellent article some other people have written, will help somebody
August 12th, 2010 at 10:57
[...] might be looking for some icons in a sketchy style as well. After I presented the tutorial of “How to draw a sketchy style icon“. Here is a free set of 32 icons named “Sketchy” which is in a sketch drawing style. The set [...]
September 1st, 2010 at 15:08
When I see a great article I do some things:1.Show it to the relevant friends.2.save it in all of the popular social bookmarking sites.3.Make sure to visit the same site where I came accross the article.After reading this article I am seriously concidering doing all of them…
September 3rd, 2010 at 18:29
[...] might be looking for some icons in a sketchy style as well. After I presented the tutorial of “How to draw a sketchy style icon“. Here is a free set of 32 icons named “Sketchy” which is in a sketch drawing style. The set [...]