Creating a watercolor effect

In this tutorial, the amazing Aliaksandr Stsiazhyn (aka ‘Spotblind’ on iStockphoto.com) is here to teach us the secret behind his lovely watercolor style vectors. Check out more of his work on his website, www.spotvector.com, and his iStock portfolio, www.istockphoto.com/spotblind.

Tip: If you’ve never played with watercolors, it may be a good idea to pick up a cheap set and experiment. Try adding more color and more water. Seeing how real watercolors look will be very helpful when recreating the look with vectors!

Getting Started

To start, you will need a line drawing. The more detailed it is the better. For this tutorial we’ll use a floral drawing. I use a Wacom tablet for these kinds of drawings because you don’t want the lines to be too perfect (this takes away from the style!). Here is our flower sketch on a white background:

Our next step is to fill in the drawing with really light washes. We’ll start out with drawing some scraggly edged shapes under our sketch, one shape for each area we want to color. In real life, watercolors ‘bleed’ a lot, you don’t need to worry about coloring outside of your sketch!

Coloring and Gradients

Now we’ll start to color each shape with a gradient that blends into white:

Here is how the shape would look if it had an outline. Note that the edges don’t have to be perfectly smooth:

Adding Shading

Here comes the tricky part. When you paint with watercolors, to make an area darker you’ll go over the area with another color, after it’s had some time to dry. Blues and greens work particularly well, so let’s add these shades to our pinkish flowers and pale green leaves. Draw new ‘scraggly’ shapes for your shading, and color them darker blue/purple for flowers, and blue/green for the leaves. We’ll manipulate these gradients so it looks like they blend into each other:

Finishing Touches

After all the shades are drawn, it’s a good idea to add some “accidental” bleeds that supposedly happened while you were painting. This makes the vector seem more “alive”:

Here is our final illustration!

> Purchase this file on iStockphoto.com

© Aliaksandr Stsiazhyn, 2009