Mafe Maria: Personal stories by autism parent mentor, Maria Stultz

Computer Drawing Tutorial

Sophie, by Maria StultzI never thought I would write a tutorial on anything, much less one concerning the tool I’m least skilled at, i.e. Adobe® Illustrator®. However, in my first two attempts at using vector graphics to create figurative or portrait drawings, I have created two pieces that I rather like, and one of my readers — in fact, one who is much better at than I am — asked me how I did it.

So I thought I’d share the little I know to pass the generosity of those who have shared their own secrets to my benefit. I thank them for their work and willingness to teach, because their tutorials have been the ones that inspired and empowered me enough to attempt using a tool I long considered too difficult for me. I still have a long way to go to master this tool and use it to its fullest potential, so please, don’t expect big Illustrator tips and tricks here, because truth is: I have only used a tiny amount of tools in my drawings.

A Word on Vector Drawing

For those not familiar with the concept of who may still be reading this, let me give you a brief introduction…

There are many computer applications that can be used to create images. For instance, I could have used Photoshop to make these drawings. Here is the difference: Some applications work with pixels, and others work with vectors.

If you work with pixels, the quality of your image depends on the pixel resolution used to present it. Pixel-based images (also known as bitmap or raster) cannot be enlarged without losing quality… You’d be enlarging the size of each pixel, and at some point the little squares would become visible, with your image looking a lot less sharp than the original.

In vector images, each line or shape is constructed with Bezier curves. So instead of constraining your image to a limited amount of pixels, the tool defines each vector element as a mathematical formula (e.g. an ellipse with such and such variables). For this reason, vector objects can be enlarged without ever losing detail.

There are several other distinctions between both methods, but this is the fundamental idea. Neither is better than the other: They simply have different applications. Working with bitmaps is intuitive to most people: You’re coloring pixels. Precision work with vectors is a little different since you have to manipulate Bezier curves. That’s the reason why I’m trying to master this skill. It takes some practice.

Ok, enough introduction!… Let’s talk about the process I follow beginning from the source of inspiration to the final artwork, which, except for the tool and the reservation of whites, is very similar to the way how I paint a watercolor.

Build construction lines

Using the initial image source (photo, sketch, or in this case: a movie frame capture) as a template layer, I trace the main lines and shapes in Illustrator. Usually, with a traditional media painting I draw a lot more construction lines initially, for instance I’ll draw shapes for each highlight or shadow area. In this case, I just went for a simple outline on the first step, though you’ll see that the end result is comprised of several overlapping shapes, similar to watercolor glazes.

construction lines

An invaluable resource for this step of the process is Veerle Pieters’ tutorial on how to draw Bezier curves. I had struggled with this for a long time and kept relying on a Wacom tablet, until Veerle published a movie illustrating her process. One picture (or movie) is worth a thousand words.

Paint the first glazes

In this step I begin closing shapes and applying colors to them. Before putting any paint on the canvas — just like I would with a watercolor — I create a color palette. In this case I picked ten colors: Seven hues from lightest to darkest for the skin and hair, and three more for Sophie’s blouse.

first color glazes

I “paint” some shapes with a solid color, and others with a basic gradient. With this piece, I also experimented a little with the mesh tool… It lets you build more complex gradients going in different directions within the same shape. I used mesh gradients for the blouse, and for one of the hair glazes.

mesh gradients

Instruction for this basic coloring step is also available as a movie in one of Veerle Pieters’ tutorials.

Represent volume with highlights and shadows

Here I begin “sculpting” the shapes by building several glazes of different values. My “big” trick is: I draw the shapes, color them with a gradient, and then apply a Gaussian blur effect for a soft edge. This way, colors blend smoothly.

layering and blending of shapes

Work on the details

One by one, I work on every element of the drawing using the same layering technique I’ve explained: Build shapes, color them, and blur them if needed. Here are the different shapes used for the eye:

detail of eye shapes

And after all important details and features are worked out, here is the finished vector drawing:

finished vector drawing

With “Peace” this is where I stopped. But last week, I discovered Alex Dukal, an illustration artist who inspired me to go an extra step… and out of Illustrator.

Add a little texture

In this tutorial, Alex shows how he finishes an illustration in Photoshop by adding textures. This is the equivalent to spattering some paint over my watercolor with an old toothbrush, and well, Photoshop can also add a few more interesting touches. Obviously, by finishing the drawing in Photoshop I’m constraining those last touches to a specific screen or print resolution. Oh well… I didn’t add too much, and the effects could be easily duplicated should I ever need a larger version of the image. This is all I did:

  • Imported the final vector drawing to Photoshop.
  • Overlayed a transparent gradient to increase the saturation of color.
  • Duplicated the image and applied a noise filter to it.
  • Blended this layer to only apply a little bit of the noise effect to certain spots of the image.

The result is the grainy texture you can see on the finished artwork

see finished piece

I suspect that a textural effect as simple as this can probably be done in Illustrator. I’m not sure though… I guess I’ll leave that to future experimentation.

8 comments:

  1. On , Alex Dukal wrote:

    Thanks to mention my tuto María! Yours is really nice and well detailed!
    I’m not sure about illustrator but in CorelDraw you can add textures and experiment with layer modes and opacity, something like in Photoshop but never the same of course!
    Regards. Alex

  2. On , Maria wrote:

    Gracias a ti, Alex… for sharing your process.
    I bookmarked your blog and a few of your posts. You have really nice content for newbies like me interested in illustration.

  3. On , Marla wrote:

    Thank you, Miss Mafe. I appreciate the detail. It’s still gorgeous even after the behind the scenes look! You’ve inspired me. I want to say that I’m going to run home and do an illustration because I want to do that. We never did do our challenge. I’m going to settle for posting something end of the yearish.:)

  4. On , Maria wrote:

    Can’t wait for your illustration…
    We got busy this year, but we should definitely try to do that challenge next year. Let’s add it to the resolutions…

  5. On , polaris wrote:

    Superb! Thanks for the step-by-step approach. It is even more beautiful to me, now that you talk of Bezier and Gauss. I’m off to see if I can get Adobe Illustrator from my school.

  6. On , Maria wrote:

    And if all fails, you can always download a trial version of the software from the Adobe web site. Good luck!… Would love to see what you come up with…

  7. On , polaris wrote:

    Well, this was loads of fun once I found out how to draw the Bezier curves using the tangents at the extremities. My drawing skills however, leave a lot to be desired, so that is always going to be a quality bottleneck. I still haven’t done any coloring, but you can see my “Bezier”-ized line drawing on my blog header.

    I had looked at Veerle Pieters’ tutorial a week ago, but am not able to access it. Thanks very much for your instructions and her video.

  8. On , Maria wrote:

    Polaris,
    Saw the vector drawing on your header… I REALLY like it!
    It’s simple, sketchy, and fresh. Very expressive.