Shopping Cart
Your shopping cart is empty
Go to Store-
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…
Great tutorial, thumbs up!
March 22nd, 2009 at 03:55 |
Nice tutorial, but still a little bit complicated. Any detailed information of drawing the shades? Thanks.
March 23rd, 2009 at 10:35 |
sketch,um..i like it!
March 25th, 2009 at 16:01 |
This is nice. I want more…. man.
March 26th, 2009 at 12:13 |
Awesome. Thanks.
March 26th, 2009 at 13:31 |
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!
March 31st, 2009 at 02:33 |
[...] Sketch-Style Icons Vector Tutorial [...]
April 3rd, 2009 at 10:20 |
Great Tutorial Here! thanks!
April 16th, 2009 at 16:59 |
Good tutorial, very easy to follow, thanks.
April 21st, 2009 at 13:37 |
[...] İkon Çizimleri Ders [...]
April 25th, 2009 at 22:28 |
I think im gonna use those techniques on my next project
Thanks
May 21st, 2009 at 16:48 |
[...] How to create sketch style icons in Illustrator [...]
July 9th, 2009 at 18:32 |
very nice tutorial
keep the good work
thanks
August 26th, 2009 at 05:17 |
[...] Double-J Design – Your ICON and GUI design solutions » Blog Archive » How to draw sketch-style i… [...]
October 1st, 2009 at 14:37 |
[...] 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 [...]
November 2nd, 2009 at 11:11 |
Always wanted to know how these icons are make.
January 2nd, 2010 at 11:38 |
Even though I think your current post is on the right course there are actually several details which i do not agree with.
May 4th, 2010 at 13:26 |
Your post was shown to me by my flatmate I was searching for this for ages thanks!
June 8th, 2010 at 16:03 |
I this blog and never comment so wanted to let you know I love the website
June 11th, 2010 at 03:45 |
I’m really loving the blog, and hope this, as well as the excellent article some other people have written, will help somebody
June 24th, 2010 at 16:32 |
[...] 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 [...]
August 12th, 2010 at 10:57 |
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 1st, 2010 at 15:08 |
[...] 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 3rd, 2010 at 18:29 |
This is a really good tutorial, and will pass it on to a few designer friends of mine! However, it would be nice for some different shadings.
September 28th, 2010 at 09:39 |
wonderful points, all are valid arguments, I had written more in my last reply, but for some reason it reset the comment feild, I left you a bookmark.
October 22nd, 2010 at 02:51 |
Great post! Keep them comming!
December 25th, 2010 at 11:44 |
good info… sent link to my kids wo are trying to do their own logo’s
June 27th, 2011 at 00:10 |
got me at it now – trying to design myself a logo
June 27th, 2011 at 00:11 |