In this tutorial I’ll show you how to create sketch-like vector brushes for reproducing a pencil sketch in vector artwork. Then we will apply one of the created brushes in practice and get to know all the stages of creating this artwork. In this tutorial I used the Phantasm CS and DrawScribe plugins so you’ll learn about some tools of these plugins and apply them to solve practical problems.

Introduction:

In this tutorial I will use the sketch that was kindly provided by Valentine Sant. The sketch depicts the character of Russian folk tales, the Frog Princess.

Our goal is to reproduce the style of a pencil sketch in vector artwork. Discontinuous and non-uniform lines created with a pencil will be reproduced with the help of the Art Brushes. Let’s learn how to create such brushes.

Creating Sketchy Brushes

There are many ways to create these kinds of brushes. I’ll show you some of them, and I think this will be enough for you to experiment and create your own “Sketchy Brushes”. We start with creating shapes of brushes.

Hand-drawn Line

First create a shape of the variable width brush to create a hand-drawn line. Take the Rectangle Tool (M) and create a rectangle filled with black. The height of the rectangle should be a few pixels (in my case it is 4 px), but it does not matter, because we can adjust brush settings later in the process.

Now choose the Warp Tool (Shift + R) in the toolbox and double-click on its icon to open the Warp Tool Options dialog window. Shape the brush form into an ellipse, leaving other settings the same.

Making horizontal movements with the tool, shape the rectangle into the shape similar to that shown below.

This results in the profile of the first brush. We will talk about how to maintain and customize the brush after we create all kinds of brushes, as all of them will have the same settings.

Rough Brush

Create another rectangle, its size may the same as the previous brush. Keep the rectangle selected and go to Effect > Distort & Transform > Roughen…. Then set the parameters indicated in the picture below.

Your options may differ depending on what kind of effect you want to achieve.

Discrete brush

Create a new rectangle with a fill of neutral gray color.

To create this shape of brush, we will be using the Phantasm CS plugin. Keep the rectangle selected, go to Effect > Phantasm CS > Halftone… and set the parameters indicated in the picture below.

Our task is simply to obtain an even array of objects. This may be not only circles, but squares, lines, symbols, if you have previously created and saved them. Now go to Object > Expand Appearance and ungroup the achieved group of circles (Cmd / Ctrl + Shift + G).

Now use two simple scripts, Random Resize (scales the selected randomly in the specified range) and Random Opacity (sets random values of opacity in the specified range). These scripts were developed by my friend Yemz specifically for this tutorial. I’m sure they will help you not only to create a brush, but also for solving other problems in your vector practice. You can download these scripts here. Keep the circles selected, run the Random Resize script and key in the minimum and maximum scale values on a percentage base in the Script Prompt and click OK.

Now run the Random Opacity script and key in the maximum and minimum values of opacity.

Group up all the selected objects and reduce the height of the group by 4-5 px.

You can combine the techniques of creating the Rough Brush with the techniques of creating Discrete Brush. That is, first you need to obtain a shape, applying the Roughen effect to the rectangle, and then apply the Phantasm CS Halftone effect to it and complete the process with the help of the Random Resize and Random Opacity scripts. Therefore, I got the shape of the brush which is shown in the picture below.

A square was chosen as a shape in the Phantasm CS Halftone effect.

Soft Pencil Brush

The shapes of brushes described above are perfect for reproducing the lines of a hard pencil. Now we will create a brush to reproduce the lines of a soft pencil. Create a few rectangles with black fill as shown in the picture below.

Keeping them selected, apply the Random Opacity script to them, setting 10 – 20% range of opacity.

Now go to Object > Transform > Transform Each…. Tick “Random” and “Preview” in the dialog window and change the Scale parameters in order to achieve a result similar to the one shown in the picture below.

Click on OK button and group up all the rectangles. Copy and paste the group in front (Cmd / Ctrl + C, Cmd / Ctrl + F) and reduce its height.

Ungroup the upper group and apply the Random Opacity script to its objects, setting the opacity range between 20 – 30%.

Group all the objects and reduce the height of the group by 4 – 5 px.

This shape reminds of the Bristle Brush in Adobe Illustrator CS5, but you have done it with his own hands to solve your own problems and it is possible in any version of Adobe Illustrator.

Creating a Brush and its Parameters

All Sketchy Brushes will have the same parameters, so I’ll show you how to create a brush based on the example of one of the shapes created above. Move the shape into the Brushes panel and save the brush as a new Art Brush.

I’ll be using Graphic Tablet in this tutorial; that’s why in the Art Brush Options dialog window I set the relationship of the stroke thickness and the stylus pressure and the maximum and minimum width of the stroke.

In order the color of the brush matches the color of the stroke, I chose Tint as the Colorization Method. I saved all the created shapes with these parameters. The picture below shows how the strokes to which these brushes were applied look like.

Combining the described techniques, you can get a wide variety of Sketchy Brushes. If for any reason you do not have enough time to experiment on creating your own brushes, you can use a collection of ready-made Sketchy Brushes, which I have collected for you. Settings of the ready-made brushes should be as I have indicated above. If they are not the same, change them.

Configuring Tools to Create the Sketch

Paintbrush Tool (B) is normally used to create a variable stroke width. To configure this tool, double click on its icon on the toolbar and set the parameters indicated in the picture below.

But I will be using the Dynamic Sketch Tool which is one of the tools of the DrawScribe plugin. Dynamic Sketch Tool gives me a number of advantages over the Paintbrush Tool (B). Key, is the ability to dynamically control the smoothness, accuracy and thickness of the existing paths. You can also manually change the dependence between the stroke thickness and the selected parameter, such as the stylus pressure. Besides, all the tools settings are located in the panel and not in the dialog window like in the Paintbrush Tool (B), which allows you to quickly access them in the creation process.

To configure this tool, double click on its icon on the toolbar and set the parameters indicated in the picture below.

These parameters are slightly different from the default settings. You can read why I reconfigure the tool this way here. Dynamic Sketch Tool has a number of remarkable features, which we will discuss in the process of creating a sketch.

Sketching

Creating Outline

Paste the scanned sketch in the current document and convert the associated layer into the Template Layer by double clicking on its name and ticking Template in the Layer Options window.

Create a new layer above the Template Layer and selecting one of the previously-created brushes, or brushes from my collection, create an outline of our illustration with the help of the Dynamic Sketch Tool.

Lines of the vector sketch should not be as accurate as in the inking, because we are reproduce a pencil sketch, therefore, slight inaccuracy is welcomed in this case. Now let’s take a look at some techniques that reveal the unique features of the Dynamic Sketch Tool.

You can create a perfect circle by hand. To do this, create multiple looped gestures in the area of the frog’s iris.

If you have specified 100% smoothness in the Dynamic Sketch panel and enabled the “Auto-Detect Continuous Repeated Closed Path Sketch Traces” and “Smooth Toward Circular” options in the Dynamic Sketch Preferences window, you’ll get a perfect circle.

Gesture trimming mode allows you to remove parts of, or whole, paths with zigzag gestures across the path. Ensure that the Gesture trimming mode is enabled via the tool’s panel and cross the target path between 3 and 5 times.

Let’s talk about the other mode of this flexible drawing tool. Intelligent path joining mode allows you to connect intersecting strokes, removing parts that are beyond the point of intersection.

Have you noticed that I drew a perfectly straight line? No, I do not have iron hands and I did not use a ruler! Simply, to create a straight-line segment, hold down Opt / Alt whilst sketching a new path. Of course, this is not a complete list of Dynamic Sketch Tool features — full information can be found here.

Creating shadows and penumbras

Note by Nick at Astute Graphics: yes, I also had to look up the word penumbras. You don’t just learn great drawing techniques from Iaroslav in these articles…

To create shadows and penumbras, as in any pencil sketch, we will be using hatching, varying the thickness of the lines depending on the density of the shadow.

To get a smooth transition line between light and shadow, I was using the Eraser Tool and, in some cases, an auxiliary line which must be deleted after hatching.

If you use only one type of Art Brush, it is desirable to change the direction of the hatch to reproduce of a mixed result.

The final Processing

Create Background

We just have to create the background. For the background we will use a paper photo texture. You can download such textures here (credit to deviantART user ~ S3PTIC-STOCK). Paste the texture into the artwork (File > Place …).

You can work with raster objects in Adobe Illustrator program if you are using the Phantasm CS. Select the bitmap texture and press the Embed button in the Control panel. Now let’s adjust the levels, to do this go to Effect > Phantasm CS > Levels….

Place the background below all the objects of the vector sketch.

Applying Phantasm CS Duotone Effect to Vector Sketch

The Duotone effect is the reproduction of an image by overlapping a contrasting color – usually black – over another color which represents a halftone (as in shades of a ink). Most often, this effect is used to better reproduce medium and bright shades of monochrome images, where it is not possible to convey all the shades when printing with black ink only. For the color of the halftones, blue, yellow, brown and red colors are often used. Group up and select all the objects of a vector sketch and go to Effect > Phantasm CS > Duotone…. Now pick the required colors and adjust the curves of these colors on the graph in the Phantasm CS Duotone dialog window.

You can read more information about the effect of Phantasm CS Duotone and its application in my article “How to Apply a Duotone Effect to Vector Artwork Using Adobe Illustrator and Phantasm CS”.

Create Glare

I’ll use the Dynamic Sketch Tool again to create areas of glare. Select a white fill and disable the stroke. Take the Dynamic Sketch Tool and turn on Edit or Continue paths mode in the Dynamic Sketch panel and create the glare shapes.

I prefer to use the Dynamic Sketch Tool for this job, because we can dynamically control the smoothness and accuracy of the paths.

Conclusion

Some professional designers were surprised when they saw a preview for this tutorial. How did you do that? Is that a vector? they asked. As you can see, there is nothing complicated here. With a little imagination and time to experiment, any problem can be solved, no matter how difficult it may first appear. I admit that at first I did not know myself how to do it.

---

About the author

My name is Iaroslav Lazunov, I am a graphic designer from Zhytomyr, Ukraine. I am glad that I finally found the job in my life that I can share my knowledge and experiments with you in my tutorials.

Follow me on Twitter, Facebook or visit my blog Vectorboom.