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.

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…