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

Jan 23

Illustration, from sketch to finish Part Two

2006 at 06.52 am posted by Veerle Pieters

Ok! I know a lot of you have been waiting for this very moment. So here it is, part 2, all wrapped up in a (H.264 AKA MPEG-4 Part 10) movie for you to download and watch (14.9 MB). You have to excuse the fact that I often have to drag things back into the movie. I’m using just a small portion of my (big) screen, so the center is way out of the capture area (for example when I zoom in or name the layers).

Illustration, from sketch to finish Part Two Oh and again, I'm far from a perfect illustrator, so please ignore my little (bad clicking) mistakes. The idea that everything is been recorded made me a tidy bit nervous :-D

Here is a short overview of what we'll do:

Organize the illustration

Drag paths (using the selection indicator in the Layer's Palette) to a separate layer, give the layer a name and lock it. We repeat these steps till the illustration is well organized in different layers. Make sure you respect the stacking order of things. The hair is separated in 2 layers: the hair in front of the face as a layer at the top and the part of the hair that resides behind the body.

Start filling each layer

Fill parts of the illustration by selecting the path and selecting a color in the Swatches palette. Or go for the faster and smarter way and use the Live Paint Bucket tool.

Select a group of paths, select the Live Paint Bucket and click in the paths to make it a Live Paint group (or Object > Live Paint Make). Then select a color and start clicking. You'll notice that you'll be able to give overlapping areas a different color. If you double click the Live Paint bucket, you can also check the 'Strokes' option, this way you'll be able to click on strokes as well and give each part a different stroke width or color.

Illustrator CS2 Live Paint

Even paths with a small gap can be taken care of. Just go to Object > Live Paint > Gap Options and define the Gap Detection settings to make sure small gaps are ignored where needed. It is also possible to add new paths to a Live Paint group.

I have only used the Live Paint for the face in my drawing here, but I have to admit that I'm still getting used to working with this new powerful feature.

You might think that now we've added colors to our illustration it's as good as finished, but look at it it's far from finished. It needs some touching up. We need to finalize it by adding some shadows and highlights etc. This is the most fun part in my opinion because the "before and after" effect can be huge and you get the feeling it is really "finished"... but that's all for part 3 of this tutorial. So look out for the final part soon, in the meantime I hope you find part 2 enjoyable to watch and (hopefully) learn something from it.

Here is the link to part 1 in case you've missed it.

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.


28served

gravatar

1

permalink this comment Kelly Mon Jan 23, 2006 at 08.38 am

Hi Veerle,

Thanks for another great tutorial!

I finally get to appreciate Illustrator this way, since my classes were horrible…

Looking forward to part 3 already. ;)


gravatar

2

permalink this comment Baldo Mon Jan 23, 2006 at 08.40 am

nice tutorial
I copied this idea to make 2 inkscape tutorials:

tile clones
gradients


gravatar

3

permalink this comment Denis Kabistan Mon Jan 23, 2006 at 10.09 am

Good to see that the video can be watched on my iPod(portable tutorial. :D)


gravatar

4

permalink this comment lazymouse Mon Jan 23, 2006 at 10.43 am

Looks really cool, Veerle, it’s inspired me to have a go myself, this could be really useful, thanks!


gravatar

5

permalink this comment amie Mon Jan 23, 2006 at 11.20 am

Hey Veerle,

Great job on the video tutorial! Though I would love to hear audio during this tutorial to hear your design process even if there are mistakes because we all make them. Even lynda.com tutorials have things go awry!

But great job!

- amie


gravatar

6

permalink this comment tobias Mon Jan 23, 2006 at 04.04 pm

nice tutorial - but plz no quicktime format anymore!


gravatar

7

permalink this comment pjtr Mon Jan 23, 2006 at 06.35 pm

Haha! I didn’t know you could drag the selection indicator to another layer to move your selection there. Sure beats right click -> Arrange -> Send to Current Layer.
Thanks!


gravatar

8

permalink this comment Alexander Berglund Tue Jan 24, 2006 at 12.42 am

Out of curiousity - Is Live paint really a part of standard Illustrator CS or is it an external tool? Or could it be it’s only for Illustrator CS Mac (Hardly believe that is the case but doesn’t hurt to ask about it)?

I ask this question since I am not able to find the options in the program as you have instructed it to be - can it be so that it is a part of Illustrator CS 2 only? if so, then is there something in CS that match Live Paint?

Other than that I think you have some great tutorials here =D Very well done!


gravatar

9

permalink this comment David Horn Tue Jan 24, 2006 at 03.03 am

Another great tutorial - thanks very much!


gravatar

10

permalink this comment alexander Frings Tue Jan 24, 2006 at 04.58 am

Hi Veerle,

which Software did you use to record this tutorial? I couldn’t find a professional screen record software for mac. Since Camtasia isnt available for mac, I had to record my tutorials on my friends PC. Of course i’d prefer to record the tutorials on my mac…

cu, Alex


gravatar

11

permalink this comment Baldo Tue Jan 24, 2006 at 06.10 am

@alex:

SnapzPro


gravatar

12

permalink this comment Veerle Tue Jan 24, 2006 at 06.32 am

@Amie: I have no good mic for audio and I would be even more nervous then ;-)

@Tobias: This isn’t QuickTime (.mov) it is H.264 (.mp4) and that is the best video compression codec out now. You don’t need QuickTime to watch it, for example VLC on Mac works too and there must be apps on Windows too.

@Alexander Berglund: Livepaint is only available if you have the Adobe CS2 suite. There isn’t something similar in CS I’m afraid :-(

@Alexander Frings: It is indeed as Baldo mentions SnapzPro. I will do a review on it soon on my blog since so many people ask about what I use. The rest is edited in Motion from Apple.


gravatar

13

permalink this comment sunny autumn Tue Jan 24, 2006 at 08.28 am

Very interesting, perhaps it could be even more interesting if you add your voice to video tutorials.
You could tell what are going to do or explain the use of a particular program features.
Thank for this great tutorial.


gravatar

14

permalink this comment ine Tue Jan 24, 2006 at 03.38 pm

mmm maybe you should consider posting this little mpg4 to a dailymotion streaming server? easier than downloading and unstuffing.
but great tutorial!


gravatar

15

permalink this comment Veerle Wed Jan 25, 2006 at 01.55 am

@Ine said:

mmm maybe you should consider posting this little mpg4 to a dailymotion streaming server?

Why should I want to do that? There is now way that you would get this quality and size (dimensions of the movie) for starters. Secondly people want to stop and go back and watch something again, this no fun when it streams. Most people want to save this for future reference and that’s not possible when you stream it. I put a lot of effort in making this available for free, so I think you should be glad with what you get ;-)


gravatar

16

permalink this comment andrea Wed Jan 25, 2006 at 04.19 pm

sorry—i don’t have any “you should have done this way” comments to add.

i’m glad. :)


gravatar

17

permalink this comment Maurus Fri Jan 27, 2006 at 10.21 am

Hei Veerle
Great tutorial!

The series is very useful for me.
Thanks a lot.

regards,
Maurus


gravatar

18

permalink this comment Bob Sat Mar 4, 2006 at 02.42 pm

The link to the movie is dead now…  just thought you’d like to know!  I’ll check back soon to see if it’s been fixed, because I’d like to watch part 2!  :-)


gravatar

19

permalink this comment Tijs Wed Mar 15, 2006 at 10.35 am

Hey, this looks a lot like Hed Kandi, right? I love that style, I’m working on something similar right now.


*Tijs is now delurked ;)


gravatar

20

permalink this comment greensurfer Fri Mar 31, 2006 at 07.33 pm

Veerle, Your video doesnt work here on my windows media player… I guess just only for mac users. If not let me know how can watch this video. Thanks for everythings very useful on your website. :)


gravatar

21

permalink this comment Veerle Sat Apr 1, 2006 at 01.14 am

@Greensurfer:

Veerle, Your video doesnt work here on my windows media player…

It should work on Windows too, I just use the H264 standard video codec. Try an another player like Real or WinAmp.


gravatar

22

permalink this comment Travis Tue Apr 18, 2006 at 02.15 pm

Veerle,

VLC is cross-platform and available on Windows as well.  You can download VLC Media Player from:
VLC’s Download Page

It successfully (and graciously) plays your video.  There is also a portable version for windows available here:
Portable Apps - VLC Media Player

VLC is a wonderful media player and it’s good to see someone like yourself using it!

As for your tutorial:  awesome, but with my lack of illustrator skills I was a bit lost.  I know this is a stupid question, but is there a way to fill a path without closing it?  For instace I want a U shape with black stroke, and I want a slight gradient from bottom to top (fading to transparent), but since I don’t want a top on the U, I have to create a separate path (closed) for the gradiant.  Advice?


gravatar

23

permalink this comment MAX Mon May 1, 2006 at 10.29 pm

HEY! IT WOULD BE NICE THAT YOU SAVE THE VIDEO FILE AS FORMAT FOR QUICKTIME OR WINMEDIAPLAYER CAUSE I CAN SEE IT!


gravatar

24

permalink this comment Veerle Tue May 2, 2006 at 01.52 am

Max said:

HEY! IT WOULD BE NICE THAT YOU SAVE THE VIDEO FILE AS FORMAT FOR QUICKTIME OR WINMEDIAPLAYER CAUSE I CAN SEE IT!

Would be nice if you didn’t shout! The file is QuickTime compatible. So if it doesn’t work you either have an old version or your computer isn’t working properly.


gravatar

25

permalink this comment Crimsonjade Fri May 5, 2006 at 02.21 am

Thank you SO SOSOSOSOSOSOSOSOSOSOOOO much for this tutorial!  I’m absolutely new to Illustrator and since CS2 came out there has been nothing but advanced fx tutorials out there.  Thank goodness you came to my rescue!  Love your site, it’s a wellspring of design knowledge ^_^ Kudos!


gravatar

26

permalink this comment matt Tue May 16, 2006 at 06.46 pm

@travis: use the gradient tool within the U shape and end it before the top of the U so that it fully transparent and hence does not form a closed top effect.


gravatar

27

permalink this comment mcdave Sat Jun 10, 2006 at 12.19 pm

The video is off :(

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


gravatar

28

permalink this comment Veerle Sat Jun 10, 2006 at 12.24 pm

mcdave said:

.mac error. 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 the mirror server instead just below the orginal link.



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist