preview

How to Create a Cartoon Character with Expressive Lines

Download Source Files

Cartoon character drawing covers a lot of techniques and styles from one color characters to multilayered colorful ones. In this tutorial, I will cover the necessary steps for creating a colored multicolor cartoon character that includes shadings. I used Adobe CS3, a Wacom tablet, an inked drawing, and scanner. With your tools ready, let’s get to it!

Final Image Preview

Below is the final image we will be working towards in this character creation tutorial targeted at the beginner to intermediate Illustrator user. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

image

Step 1

This time I inked the pencil drawing the old fashion way before scanning it because I wanted to have a preview before the scan. You scan the drawing and then drag and drop the file into Adobe Illustrator. Then you bring up the Layer Panel (F7).

Step 2

Setup the Opacity at 50% from the Transparency Box (Command + Shift + F10), lock the current layer, and add a new one so you can start tracing without having to bother about accidentally selecting the scanned drawing.

Step 3

Now lets start creating the contour! We’ll trace the image using the Pen Tool (P). You need to make sure there is no fill color before going further.

image

Step 4

I’ve also included the brushes used for the Plus members. Select “Art Brush 2″ from the Brushes panel and we’re ready to start.

image

Step 5

Start with the outer part of the hair, by drawing the lines so they won’t touch at the tip.

image

Step 6

After you’ve drawn a few lines using the Direct Selection Tool (A). Select the anchor points and then you adjust them so that they overlap both at the tip and at the base creating a sharp contour line.

image

Step 7

Repeat Step 6 until you have finished with the contour lines of the head.

image

Step 8

You go ahead and add the eyes, nose, mouth and chin changing the brush and brush stroke if needed. For the pimples I used the Ellipse tool (L) and a regular brush.

image

Step 9

Continue tracing the rest of the body using the methods shown in Step 6, alternating the brushes and strokes until your finished tracing the boy.

image

Step 10

Now for the final touch. Add the motion lines surrounding his arms and the expression lines around the head to add a bit of dynamism to the image. I used “art brush 12″ for that and the Pen Tool (P) as with the rest of the line art.

image

Step 11

Now expand the brushes by going to Select all (Command +A), Object > Expand Appearance.

image

Step 12

And clean up for empty paths by going to Object Path > Clean Up.

image

Step 13

I want to use all the line art together. Later I will also need to merge the contour, so Select All (Command + A) and press Merge on the Pathfinder panel (Command + Shift + F9).

image

Step 14

Now lets start the coloring process. This time I will not use the paint bucket. Draw a rectangle (M) using no stroke and set a green color as the fill. You select the rectangle and send it to back(Shift + Command + Left Bracket Key).

image

Step 15

Select both the rectangle and the lineart and press Divide in the Pathfinder Panel (Command + Shift + F9). Select the green area surrounding the lineart using the Direct Selection Tool (A) and press delete.

image

Step 16

Now select each body part one at a time, and then apply the desired colors from the Swatches palette.

image

Step 17

After the coloring process is complete you need to add some shading. Start by drawing the shape that will make up the shading, then copy (Command + C) and paste it on top (Command + F).

image

Step 18

Select both the shadow shape you just drew and the shape you duplicated earlier.

image

Step 19

Press the Intersect Shapes Area from the Pathfinder Panel.

image

Conclusion

Repeat Steps 20, 21 and 22 until you add shades to all the desired spots. This is the final image I obtained. Enjoy!

image

  • http://www.studiografiko.com Grafiko

    simple tutorial, but always useful

  • http://www.designbuddy.net Nicholas

    Very nice Tut. Always wondered what the best and simple way to do this was.

  • Tuncay TÜRK

    Nice tut. Thank you. Congratz.

  • http://greencorner.emilygonsalves.com/ Emily

    Straightforward and simple, but I’m wondering why you didn’t use Live Paint instead of pathfinder shapes. It’s much faster and you can leave the line work intact on another layer.

    • charles

      hi emy,am stucked tryna create characters for a comic magazine…my characters turn to look alike.any ideas?

  • http://laranzjoe.blogspot.com/ lawrence77

    very simple and small! ;)
    Scrolling made easy :D

    But yet useful!
    I’m not good in drawing! :( so it doesn’t help me!

  • s

    good beginner tutorial, but didn’t really learn anything new. . .

    • The Rampaging Banana Peel

      Erm, beginner tutorial … that’s why you didn’t learn anything new.

  • http://www.dsaportfolio.com.br Diego SA

    This tut is funny! I like the way you create the shadows, they make the drawing looks different. Very cool!

  • Ricardo Ortiz

    Yeah! Great… I’ll use this idea for a poster of my school hahaha

  • Pingback: Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

  • http://www.cgtrade.net imsraaia

    nice..

  • shekhar

    thanks its good !

  • http://www.cocoamedia.co.uk Dave

    nice

  • http://www.livecube.es seeal

    realy nice thx ¡¡¡

  • http://www.freshclickmedia.com Shane

    I always like to see this sort of thing. Thanks for writing it.

  • http://graphicriver.net/user/KLANDA Elliot

    Haha, thats great! May try it sometime

  • Ananmyrah

    I am new to Illus and I have been wondering how to do this simple thing in a few simple steps. This is really helpful and useful for me. Thank you for thinking about the newbies too!

  • http://www.ransomplanet.com bryan

    another way to do this:
    replace steps 1-17 with Live Trace and Live Paint.
    Saving yourself several hours of tedious brush stroke selection/application.

    • Lenny

      Nah… never looks as good as getting down to the wire and doing it by hand. Just my opinion though. No better or worse than yours :)

  • http://www.andol.info andol

    great stuff~ i like it~

  • Pingback: 40+ Cartoon Character Illustration Tutorials | Tutorials | Smashing Magazine

  • http://tuts.cgbaran.com CgBaran Tuts

    Great tutorial thanks

    • http://simon simon

      your welcome

  • Your Name..

    Great Thanks 4 Sharing

  • Josh

    Where is the brush download you are talking about in the members area? I can’t seem to find it.

  • The Rampaging Banana Peel

    Thank you for this great tutorial. Always good to see such great stuff. OMG. I looove this software :)

  • http://www.cmpatrick.com Craig Michael Patrick

    Very nice, but I’m curious if you’ve ever been mentored in inking in a traditional sense.

    Generally speaking, the holding keyline of an inked image is a continuous line around the entire image (much like you might see on flexographic packaging), but this is adjusted in such a way as to suggest light sourcing, thicker lines landing away from the light source, thinner facing the source.

    Just something to think about. Again, pretty good work.

  • Pingback: jeremiahnellis.com/design_life » Blog Archive » 40+ Cartoon Character Illustration Tutorials

  • Uta

    Very useful, great tutorial. Where can I download the art brushes for Plus Members you used in this tut. I downloaded this tut but the brushes don’t show up in my illustrator brush window.

  • VERO

    GREAT, MAGNIFICENT, WONDERFUL!…KISSES FOR YOU CHRIS!. DON’T YOU HAVE A BOOK CONTAINING ALL OF THESE GREAT TUTORIALS FOR SALE?

  • Pingback: Cute Character Tutorials | CreativeBoy

  • Pingback: 40+ Vector Characters Adobe Illustrator and Photoshop Tutorials | Noupe

  • Pingback: 50 Illustrator Cartoon Tutorials | Design Reviver

  • Allan De Ramos

    A very informative tut ! Thanks !

  • Kendall Begay

    What is the name of this character

  • http://www.itech.ae web design dubai

    vary nice , thanks for sharing

  • http://www.itech.ae web design dubai

    vary nice , thanks for sharing its nice tuts for who want to start with vector

  • Heather

    It didn’t show you how to “create” a character, it showed you how to ink and color in one.

    Very good if you don’t know how to do that, I suppose.

  • Ümran Aşkın

    Very nice, But I will be very happy when I could draw manually. :)

  • http://www.sjlwebdesign.com.au Shane

    Awesome tut!! I was looking to get my own illustrations into Illustrator, these techniques will definitely get me started! Thanks.

  • MAGGIE

    Brilliant!! Thank you.
    Just starting with Illustrator and need EVERY step explained . This may be simple for some out there, but much needed to those of us that NO NOTHING :)
    THANK YOU AGAIN
    Maggie

  • Pingback: 40+ Cartoon Character Illustration Tutorials and Tips | CreatiWittyBlog

  • saqib webdesigner

    Nice Tutorials Sharing

  • http://www.facebook.com/profile.php?id=100000599050815 Rahul Agarwal

    HERE’S MY SIMPLE TRY..THANKS FOR THE LOVELY TUT