In this tutorial I will show you how to draw a cartoon character using the pen tool and shapes , this trick makes the file re-sizable to any size without losing quality .

Tutorial objectives

• At the end of this tutorial you will learn how to :
  • Draw with a pen tool .
  • Edit basic shapes .
  • Work with layer styles .

Final result

Before start

Here are some of the tools we will use :

Step 1 :Start

Start with a blank document . When I’m drawing using shapes and pen tool (Vector) I don’t start with a large document since I can resize the document later without losing the quality .Here I’ve started with 600 * 600 pixel document .

Step 2 :Head shape and color

Draw a circle and color it with  (#fad1bb)  . From the top bar click on add shape and draw 2 circle for the ears. Now we have 3 shapes on one layer.

Select the (Direct select tool) or press (a) and start editing the points .

select the 2 points at the left and right . First click the left point and then press Ctrl/Commend and select the other point . Move them up a little .. now we have an alien  head

Then select the bottom point and use the convert point tool click on then point and drag .

At the top of the head there is already one point add 2 new points right click on the area and choose add anchor point. Now move the 2 new points up using direct select tool.

To add the effect .Double click the layer to get the effects window and apply the following .

While the Gradient overlay window still open drag your mouse over the shape to move the lighter spot a little bit toward the right/top side of the face .

Step 3 :Eyes

Draw a white circle and add an inner shadow

Duplicate the circle layer twice (select the layer and Ctrl/Command J).For the new layers remove the effect .Using the arrow key move the white circle to the bottom . Then change the color of the other circle to (#9f7a66) and move it up .This will add a  “3d” look to the eye .

Draw a smaller circle for the eye pupil and choose the eye color you like here I’ve used blue . Copy the layer style from the big circle by right click on the big circle and choose copy layer style and then move to the small circle layer , right click and choose paste layer style.

Add a small black circle .

Then add a small white circle inside and change the layer opacity to 63% this will be the catch light .

Select the 4 layers of the eye and group them  (Ctrl/command + g ).Then duplicate the group (right click group > duplicate group)  Move the new eye to the left and make it bigger   (Ctrl/Comment+t) .

Step 4: Eyebrows

To draw the eyebrow . Start with a rectangular .Choose the direct select tool (press a) and then click on the top/right corner point , right click it and choose delete anchor point .

Now move the right side point  up a little . Apply the inner shadow effect .

We need to add more depth so we will apply what we did with eye . Duplicate the layer twice change one to white and the other to (#b28b75). Move the white down and the dark up .Don’t forget to remove the effects .

Group the eyebrow layers (select the layers and Ctrl/command +g ) . Duplicate the group , choose edit > transform > flip horizontally . Then resize and rotate using the free transform tool (Ctrl/command+T).

Step 5: Nose

Draw the nose using the circle tool . Background color is (#fad1bb). Add  Gradient fill and while the gradient fill window still open click on the nose and move the fill top right  .Rotate the shape a little bit.

To add the nose shadow . Duplicate the nose layer . Change the color of the lower layer to black , remove the effects (Gradient fill) and change layer opacity to around 28%.Use the Direct selection tool (Press a) and select the bottom point and move it down/right to create a shadow .

So far this is the result

Step 6 :Mouth

Start with a circle (background color #a22700) . Select the top point and drag it down (Look at #2). Using the convert point tool click once on the right and left points to convert them to corner points . Select the lower point and pull the line segment to make the lower area of the shape wider .

Add the following effects

Now place the mouth on it’s place on the face , transform  and rotate it to fit the face .Duplicate the layer twice color the first with white and the other with (#a96f54) .Move the dark layer up and the light layer down (See the image above).

Now to draw the teeth . Start by drawing a circle for the upper teeth. To draw lower teeth press shift while drawing the 2nd circle so the new circle will be added to the same layer  or alternatively click on (add shape ) before drawing the 2nd shape. Try to move (play with)  the points to form the final shape of the teeth.

Now apply the inner shadow .

Now we have 3 layers for the mouth . click on the top one (Dark red) while pressing Ctrl or Command to show the layer selection. Now click on the teeth layer ( the selection still on) and press the layer mask button .

Step 7 : Hair

Below the face layer I’ll draw the hair  color it with (#732f08) .

Using the pen tool draw a basic shape (#1)  it doesn’t have to be perfect as you can move the point later . Use the covert point tool and convert the corner points to smooth anchor point by clicking and dragging .

When you are done move and rotate the shape. Then add the following effect (inner shadow + Gradient fill) .

Step 8 : Neck

Draw a circle under the face layer for the neck . Copy the layer style effect from the face layer and paste it to the neck layer (Right click the layer for the copy and paste options). Give the neck little darker shade I choose (#f1cab5).

Step 9 : shirt

For the shirt start with a rectangular  (color = #e1e57c) . Push the 2 top points  inside .Add new points to the areas marked below and move those points to the direction .

Add the following effects . Drag the gradient fill up.

For the sleeves  . Draw a rectangular with the same color below the previous layer .Then add new points in the areas marked in number 2. Use convert point tool convert the red points to corner points (Click once on each point).Move the points into the arrow directions.

Step 10: Arms

To Draw the hands start with a rectangular . Then from the custom shapes choose the shape below (I know it’s an animal hand/feet but this will change I promise ) . Add the new shape to the rectangular (Press shift then draw the new shape or click on the add shape button check the instruction at the beginning ) .

Keep the fingers and delete the center shape highlighted in red below .Now add a new shape (Circle ) to the same layer .

Now play with the points to get the shape you want .Here’s mine .

if you are thinking why 3 fingers and a thumb not 4 and a thumb .This is something cartoon artist have been doing for so long , you can find some answers here ,but  personally I think that normal hand for a cartoon character will look cluttered and hard to work with .

Add the following effect

Then rotate the arm and move it to it’s position . Duplicate , flip horizontally and  rotate the arm to create the other arm .

Step 11: Shorts

Again start with a rectangular with the color (#6d7116) and add the inner shadow and the gradient fill with the following settings.

Now choose the pen tool , make sure the subtract shape it selected from the top bar and draw a triangle . Now we will have a gap. Work with the points to get the size and basic shape you want like in #4 (See the arrows).

Add new points to red areas in #5  and move them according to the arrows direction .

Step 12: Shoes

I choose a simple style for the shoes .Start with a circle (#a2a646) . Add the following style effect.

Delete the lower point and move the segment line up .

Duplicate and rotate

Duplicate again , change the color (#a2a646) and resize to create the front to the shoe.

Step 13: Shadows

Create a circle ,rotate and resize it and change the color with a dark shade (#6d7116) to create the inner side of the shirt.

Use the pen tool and draw the shirt shadow on the arm , color it black and opacity =13%.

For the  shadow under the shirt on the shorts. Start with a rectangular shape (black color , opacity =13%). Delete the lower left point .

Add 2 new points and push them upward . Like so

Use the pen tool to draw the ear’s line . Color it with black and change the opacity 19% . Duplicate , flip horizontally and move to the other ear .

Finally

I tried to keep this tutorial  simple but informative and useful . As an artist I can see that there is a room for improvement actually as an artist you always judge your work and feel that there is a room for improvement  . You can add more shadow or more details  or add some details to the background or some props ..etc. Good luck .