May
11
2008

Create cartoon with simple shapes and gradient tutorial

In this tutorial I’m going to write about how to prepare nice cartoon, based on simple shapes with gradient fills.
Although it’s hard to make detailed graphics this way, the cartoons have one strong advantage – you can scale it downto a very small size and it’s still clear – that’s why it’s perfect for logos and icons.

First we start with a sketch – in our example I’ve made a very nice bear – his name is Teodore.

Teddy sketch


So – we scan Teddys’ sketch and import it to Flash (you can also make it with any other vector editor – like Illustrator or Inkscape).

You can see that Teddy is actually made from many simple shapes. We’ll create each element individually – let’s start with eyes.

Each eyeball is made from three circles. You need one black circle for base and two white circles for reflexes.
You can add radiant gradient fill to the base to make it look nicer.

Teddy’s eyes

Than we move to eyebrows. Make it simple rectangles first – than you can round its shape a little

Teddy eyebrows 1

Teddy eyebrows 2

Let’s move to the ears.
As you can see the ear is also build with two simple elipses. You can use radial gradient fill to make the shape of the ear more clear.

Teddy’s ear

We can also flip one ear – to give a little character to the Teddy.
(just cut a part of the ear, paste it to layer above, change it’s color to something bright, and place it mirrored at the ear).

Teddy’s flap ear 1

Teddy’s flap ear 2

We can move to face and body now – both head and torso of the Teddy are build with simple elipses.

We use two elipses for the bear’s face.

Teddy’s face

To make the nose simply put straight vertical line in the middle of the elipse (tip: make the line a Movie Clip, select both the line and elipse – and use align option). Than finish the nose with two bent lines.

Teddy’s nose

Torso is made with two elpises (Do you understand why this post is titled “Create cartoon with simple shapes”, right?). Elipses are filled with radial gradient to make it look more realistic.

Teddy’s torso 01

Teddy’s torso 02

Finally we move to the legs.
Outer shape is a elipse (again). To make the inner shape we need to use Pen tool. (here’s the link to tutorial how to use the pen). We fill the shapes with radial gradients.

Teddy’s leg 1

Teddy’s leg 2

That’s all – our Teddy bear is completed:).

Teodore the Teddy

Feel free to download and check the .fla file here.

You can use this to any work you would like (commercial or non-commercial). If you use it please drop a comment about it.

5 Comments »

  1. christopher Sep 15, 2008

    cool

  2. ms Dec 05, 2008

    Beautiful design

  3. Asian Liver Center Feb 09, 2009

    Hi – We loved the teddy bear and used it in our informational brochures to educate pregnant women about preventing hepatitis B transmission to their infants. Thanks!

  4. Robert Feb 10, 2009

    Glad you could you use with good purpose;) Cheers

  5. [...] Click on the picture or here to see the tutorial!!! 0 Comment [...]

Leave a comment