You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Dec 19

Illustration, from sketch to finish - Part One

2005 at 09.07 am posted by Veerle Pieters

This time there is nothing much to explain. Well, it’s actually hard to explain how you draw bezier curves in Illustrator. I had the urge to do some sketches and I believe I owe it to myself, it’s been too long since I had this kind of fun.

So I grabbed my sketchbook and started drawing. Once my sketch was finished, I scanned it as a grayscale image and placed it into Illustrator (CS2). This is a perfect opportunity to show you how to use the Pen tool in Illustrator and how these bezier curves work.

How to use the Pen tool in Illustrator

If you see it it will make more sense, so here is a movie for you to watch me drawing. Hope it's not too long to watch. I actually recorded really everything, including mistakes, bad clicks etc. so you're warned ;-)

this is the sketch we're gonna draw

Watch the Bezier at Work (ZIP 16MB)

In Part Two I'll show you how we fill the illustration with colors.

Want to learn more?

VECTORTUTS+ Vector Tutorials and More A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.


39served

gravatar

1

permalink this comment Simon Mon Dec 19, 2005 at 09.53 am

This is great Veerle,

thanks for taking the time to make this tutorial, its much appreciated.


gravatar

2

permalink this comment Neil Bradley Mon Dec 19, 2005 at 10.01 am

Brilliant video. The path tool can take a little getting used to in Illustrator.

My main problem is getting the lines and curves to look nice and smooth, they always seem to end up looking rather rough and unprofessional.

I had to watch your video a few times as you do things a little fast. :)


gravatar

3

permalink this comment Baldo Mon Dec 19, 2005 at 10.03 am

I’ve read many many tutorials about Bezier in illustrator and I find it very hard to use (interface and tools are not very friendly).

I’ll see the movie and I’ll ask you some questions..


gravatar

4

permalink this comment Alberto Mon Dec 19, 2005 at 11.39 am

Almost as Baldo, I just watched the video and have some questions.

Not that technical questions. How do you know how to “ensemble” the drawing? For example, the hair is made of open paths, instead of closed ones…

Think I’ll wait for the second part instead, very informative video, great job!

Thank you.


gravatar

5

permalink this comment Michael W Mon Dec 19, 2005 at 11.55 am

Thanks for the refresher. I have to trace a lot of stuff in Illustrator and can’t understand why they haven’t changed their bezier tools to something more quick and intuitive (along the lines of Inkscape, maybe). Any chance you might show us how to use brushes to add some line quality?


gravatar

6

permalink this comment Kaspars Mon Dec 19, 2005 at 12.19 pm

It would be nice to have a small set of Control, Option, Command, Space and maybe some other alternating keys in the corner of the video window, to see wich shortcuts you are currently pressing.

Other than that, really nice and inspired piece of work, got me a urge to do something myself :)


gravatar

7

permalink this comment Veerle Mon Dec 19, 2005 at 01.03 pm

How do you know how to “ensemble” the drawing? For example, the hair is made of open paths, instead of closed ones…

Alberto, I have to admit that the movie doesn’t show exactly how I work. Normally I start with a part of the illustration (for example the face) and go all the way: border, filling effects etc. But in this case I want to show people things step by step, starting with the lines, then the fillings and finally the finishing touches. And yes, you are right about the paths not being closed, I’ll do this in my next step. It might be more logic to do it right away, but I’ll address this in my next step when we start filling/coloring. I was aiming at a nice end result ;-)


gravatar

8

permalink this comment Simon Mon Dec 19, 2005 at 01.48 pm

Alberto, just thought I would answer your question briefly. You can turn open paths into one using the pathfinder tool. You can also remove bits etc with the pathfinder.

I think this will be explained in part 2 though.


gravatar

9

permalink this comment Ash Mon Dec 19, 2005 at 03.38 pm

Perfect! Thanks Veerle, yet another perfect self learning tutorial, really appreciate it :)


gravatar

10

permalink this comment Fabio Sirna Mon Dec 19, 2005 at 03.39 pm

I’m wait for the second part :) I want to learn Illustrator better. Very good work, and I think you have a nice “hand” (for drawing…I don’t now if in english sounds good).


gravatar

11

permalink this comment Tim Mon Dec 19, 2005 at 04.13 pm

Veerle you just read my mind! I was looking for a simple guide for Illustrator! Now I’m using PaintShopPro for all my work but I want to learn PS and ILL because I have the feeling I’m “stuck”...
Looking forward for the next part!


gravatar

12

permalink this comment Erik A. Drabløs Mon Dec 19, 2005 at 05.20 pm

Really nice demo movie. Especially liked those tips popping up. Looking forward to the coloring.


gravatar

13

permalink this comment Michael Bystrom Design Tue Dec 20, 2005 at 02.37 am

Hello Veerle…

Nice to see a mov like that, what software did you use?

I live and die for Illustrator and do allot of photorealistic portrait work in. But I hardly use the bezier tool (unless for specific hard lines).
You can see some of my work over at:
http://www.michaelbystrom.com to see what I mean.

This is how I sorta do it, now remember this is “little” more work then Veerle’s lovely drawing :-)

like Veerle I start by importing a Hi-rez image but I don’t dim it, insted I use 2 of the same, one as a top layer and one as the bottom layer. It just gives me more options to view the image when drawning it.
Then using the “pencil tool” and a “fill color” I start to outline the ALL the important visual aspects for this image, and I mean ALL. It’s very hard to explain how to do it you sorta just have to see it. I’ve tried to show people sitting with me but still have a hard time grabbing the essence of the image. You don’t have to put all the little beauty marks and cracks in there, just the important ones.

When I draw a line it’s not a simple line, I actually draw the complete outline of the line, like you would using Illustrators: Object > Path > Outline Stroke. I want it to be hand drawn to get that real alive feeling. I’ve tried to make it easier for me but it never turns out good in print. And Then there is heeps of layers, some custom pencils mostly for hair, do not underestimate opacity.

I try to get the eye as “alive” as I can this mean that a single eye can have many hundreds of objects. but if I catch it… then the rest of the image sorta falls in place. I started out with a simple Mac mouse (older roll ball) but have since then upgraded to a Wacom Intuos 3 A3 pen tablet, now this is not a needed at all, the images can just as easily be draw with a mouse. Half of the images on my site is mouse made.

Well that’s sorta how I make a image in Illustrator, there is not so much more but lots of layers and caffe or beer… but you can figure that out :-)

Stay warm
Michael


gravatar

14

permalink this comment Andy Georges Tue Dec 20, 2005 at 02.55 am

Awesome.


gravatar

15

permalink this comment lazymouse Tue Dec 20, 2005 at 03.17 am

Just watched a few minutes of your drawing movie and it’s made something very clear to me, I now know where I was going wrong all this time!

I usually draw most of the points in an approximate position, the move them later. In this way I would have drawn the points for the arm, then gone back and positioned and curved them afterwards.

The reason I did it this way, was because, everytime I created a curved point, the next point was affected by the preceded curve handles.

Then I watched your movie and saw the ‘convert to corner’ tip .. now I get it!!

Thanks, I’ll watch the rest of the movie when I get a few minutes and learn some more.

I might even have a go myself!

Steve


gravatar

16

permalink this comment Patrick B. Tue Dec 20, 2005 at 07.50 am

Interesting. The best way to learn, is to observe, then practice. This tutorial will help a lot of beginners. I remember when I started playing with Illustrator, I bought the Illustrator 7 Wow! Book from Sharon Steuer. I did not know much about Bézier curves at that time. So I decided to learn by working on a Picasso painting that turned out something like that in the end. It took me quite some time to finish this drawing, but in the end, I had mastered all those CTRL-ALT-SHIFT command tricks.

Thanks for this tutorial.

Patrick


gravatar

17

permalink this comment Abdul Tue Dec 20, 2005 at 12.41 pm

A long time reader, but I hardly comment.

I have to thank you Veerle for getting me going in Illustrator. See at first I was very scared (don’t laugh - ha) but after seeing a few of your tutorials, I can say I’m pretty confident in Illustrator now.

Thank you and please keep providing such tutorials.


gravatar

18

permalink this comment ronald_poi Tue Dec 20, 2005 at 02.22 pm

Can’t wait till the next part!... i dont know how you’ll paint it if it’s made of open paths!


gravatar

19

permalink this comment ronald_poi Tue Dec 20, 2005 at 03.49 pm

By the way… it’s clear that you love Apple products! =P


gravatar

20

permalink this comment Stijn Tue Dec 20, 2005 at 05.01 pm

Excuse me, am i missing something,
has anyone used the livetrace and the livepaint functions. I’m shore you will see the light.
http://www.adobe.com/products/illustrator/newfeatures.html?c=us


gravatar

21

permalink this comment Veerle Wed Dec 21, 2005 at 01.08 am

I’m glad people like the movie and learn from it. I know it’s one of those tools you need to get used to and practice is the only way.

@Michael, you’ve got some amazing style and technique there. Waow! The result is really impressive. Thanks for sharing this with us here. It’s definitely a technique I’ll be experimenting too (if time permits). 

@Stijn, yes I have seen the light, but it’s not the kind of effect I’m after for this illustration, I want precise lines because I want a clean illustration as a result, not some wobbly sketchy effect. As you can see none of these LiveTrace effects are exactly what we achieve when drawing the illustration with the Pen Tool. Since the sketch doesn’t have precise lines, the trace result will also be not precise. To be honest I haven’t really used the tool very often since the illustration style I use the most is a clean style.


gravatar

22

permalink this comment Veerle Wed Dec 21, 2005 at 01.17 am

@Michael, sorry I forgot to answer your question: what software did you use?

I’ve used SnapzPro to record the movie. Then I’ve used Motion to add the explanation boxes, end quote and flower icon at the bottom left.


gravatar

23

permalink this comment Fuelrock Wed Dec 21, 2005 at 08.43 am

As always, your tutorials are quick, easy, and informative.  I consider myself to be an intermediate user of Illustrator and PS but every now and then I can get hung up on the brush tool.  Every little bit of knowledge and example helps.  Nice work…thanks Veerle


gravatar

24

permalink this comment lazymouse Wed Dec 21, 2005 at 08.52 am

Veerle - I was interested to see you mention Motion and Snapzpro ... is Motion a better alternative to Flash for website animations?

I’d like to learn Flash, but just don’t have the time and I wondered if motion can ouitput suitable motion graphics for a website, or is it perhaps not suitable for that?

How did you do the animations on your Duoh website, for example?

Steve


gravatar

25

permalink this comment Justin Wed Dec 21, 2005 at 02.40 pm

Take a look at the work of this Master Illustrator:
http://www.arthurmount.com
He only uses the pen tool and draws it all out just like Veerle did.

lynda.com offers some GREAT online video tutorials.


gravatar

26

permalink this comment Steve Nelson Thu Dec 22, 2005 at 11.54 am

What I nice job you did on that demo! Many versions ago I wrote a tutorial on Photoshop’s pen tool and realized that words can only get you so far - it makes a LOT more senses to show the tool being used. So I did a similar thing, also using SnapzPro but Motion didn’t exist then so it’s not as slick as yours. Also, wine bottles are a lot less appealing that pretty girls. Good job.


gravatar

27

permalink this comment Veerle Fri Dec 23, 2005 at 07.17 am

@Lazymouse: Flash is still the best solution for on the web. Motion has many benefits above flash, for example animations are a lot easier (read not such a hassle) to create. Then again you need at least a dual G5 2GHz machine with a serious videocard because this program is real proccessor/memory hungry. The animations on my website are done in Flash with the exception of the showreel. At this time Motion can’t export SWF files but you could use the Macromedia Flash Video Exporter (QuickTime Export plug-in) to export FLV files from Final Cut Pro - That’s only one step away from Motion… Motion comes in the Final Cut bundle. It’s not the cheapest option however ;-) Motion is FUN!


gravatar

28

permalink this comment monkeyhumper Fri Dec 30, 2005 at 02.40 pm

I’ve been using corelDRAW for more than a decade. Whenever I import something to trace, I always do it by hand. Corel’d bezier tool is the same as AI, and until now, I made jagged lines, converted them to smooth curves, then dragged them out to make them smooth. The bezier line preceding the current one always messed it up and that was the only way I knew. Thanks for the tip, using option and command works just as well in Corel. Kudos! I’ve saved time in production already.


gravatar

29

permalink this comment Nick Thu Jan 5, 2006 at 09.58 pm

I don’t mean to be self-promote but I also have a similar tutorial on how to trace photo with Illustrator. Check it out if anyone is interested. Here is the URL: http://www.ndesign-studio.com/resources/tutorials/tracing_people.htm


gravatar

30

permalink this comment Fred Fri Jan 20, 2006 at 08.54 am

Can’t vieuw the QTvideo : when expanding i get the following message: “unkwon zip header format encountered”


gravatar

31

permalink this comment Veerle Sat Jan 21, 2006 at 08.13 am

@Fred: It must be something on your end I’m afraid. Many people have download it without trouble. I tested just now and it worked fine. Maybe try on another machine or reboot?


gravatar

32

permalink this comment Pati @-;-- Sun Mar 26, 2006 at 10.43 am

Hi Veerle,
I saw your tutorial and I love it. I’ve just wrote an entry in mine because two friends asked me about Illustratior and vectors… and also because I found it very very useful.
I hope it doesn’t bother you.
Ty
:-*


gravatar

33

permalink this comment Emma Thu Jun 8, 2006 at 04.44 am

I’m getting this when I try to view the movies :(

“We’re Sorry
You have requested a page that is not currently available due to data transfer restrictions.”


gravatar

34

permalink this comment Veerle Thu Jun 8, 2006 at 05.11 am

Emma said:

I’m getting this when I try to view the movies :(

“We’re Sorry You have requested a page that is not currently available due to data transfer restrictions.”

The bandwith for the month is already gone again. Try again after the 16th it should work.


gravatar

35

permalink this comment muad_did Sat Jun 10, 2006 at 02.02 pm

Hoo, I really like to see the tutorial.  I try to wait to next month ^_^


gravatar

36

permalink this comment Alex Cope Sun Jun 11, 2006 at 08.59 pm

Is there a mirror set up anywhere?


gravatar

37

permalink this comment Veerle Mon Jun 12, 2006 at 06.00 am

Alex Cope said:

Is there a mirror set up anywhere?

There is one now ;)


gravatar

38

permalink this comment Alex Cope Mon Jun 12, 2006 at 06.45 am

Thanks!


gravatar

39

permalink this comment Dhaval Tue Jun 13, 2006 at 06.33 am

H Veerle,

I am presently undergoing a training program on illustrator CS and was browsing thro the net and got into your blog.

The information available is really wonderful and neat. I would like to you kindly provide me the link to downloading the movie(s) related to your work. I hope you would not mind.

I am a pre-press operator trying to move from CorelDraw to Illustrator.

I am really looking forward to hear from you soon.

Thanks & Regards,
Dhaval



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist