Designing a Character with Outlines

Inkscape tutorial

Here’s one request I have had a few times now: ‘How do you make a character with outlines?’. It’s not much different from any other character creations you just add a little more difficulty and a few problems to work around. Most of my tutorials have characters or elements without outlines/ stroke because it’s just easier. Plain and simple!

Issues

The main problems I see with a lot illustrations using outlines are:
  • the inconsistent line weight (different thickness of the stroke for different elements on the screen). It’s a little more complicated and takes some thought to design the screen balanced. My advice is to keep it either keep it all at the same thickness or use a thicker brush for all the focus elements (eg. characters, logo, UI elements) and create the background with a thinner stroke.
  • the colouring of stroke vs. the colour of the shape.
  • the line weight does not correspond with the illustration. You might have noticed it in comic books, illustrations or animated cartoons – the stroke is not consistent in thickness. It starts thinner, goes thick and ends thin again giving it more of a brush feeling. If it’s done right it really enhances the image but it’s a time-consuming art. Simply put, using tools in Adobe Illustrator or Corel Draw to create dynamic brushes ends up looking wrong.

Let’s get started

All those problems aside. Let’s start with something simple. In this tutorial we will do a little piglet with a plain black stroke. I will keep consistent throughout all elements. In one of the next tutorials I plan to cover more complex and modified outlines.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2dgameartguru - working with outlines

Let’s start with a circle, convert it to a path and move the right node down…

… to create the head shape of the piglet. Duplicate it and scale it down for the shading.

Add a stroke to the outer shape. Keep in mind to make it thick enough when exporting to bitmaps.

Add circles for the eyes (base shape, highlight and in this case a mark around the right eye).

Next up create the ears using a deformed circles with and added node.

Duplicate the shape and scale it down a little to form the inside of the pig’s ear.

2dgameartguru - working with outlines
2dgameartguru - working with outlines

Duplicate the two shapes, mirror them and scale the width down a little. Then place them behind the head.

Now for the most important feature to make it a piglet – the snout. Start with a circle, convert it to a path and create a duplicate.

Deform the circle by pulling the left node out and adding two more nodes.

Place the snout on the face and add two circles for the nostrils. The outlines pose a problem as we don’t want the line on the left visible.

Using the straight line tool draw a shape covering the outline on the left…

and give it the base colour of the skin. Add another line to form a mouth.

2dgameartguru - working with outlines
2Dgameartguru - spacer
The last two steps show one of the main problems with outlines: the overlapping of elements. Lines are created, that we don’t want to see. You could  combine the snout and the head. Simply making it one object would result in problems animating it afterwards. This becomes even more visible with arms and legs. As a solution, I add shapes to cover these overlaps.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2dgameartguru - cartoon piglet outlined

Another circle is deformed into the body shape…

with a scaled down version for the shading – similar to the head. The lighter shape won’t need the stroke.

The legs are based on another deformed circle.

Use the straight line tool to draw the hoof shape – it’s basically an odd rectangle with an indentation.

Convert the lines to curves and curve the top and bottom lines.

Duplicate the shapes and darken them for the legs in the back.

2dgameartguru - working with outlines
2dgameartguru - working with outlines

Position the elements and arrange two of the legs behind the body shape [Page Down].

Create another circle for the tail, make it a path and add a node to the lower left and pull it out…

… turn that node into a corner and adjust it to form a sharp point. Add a triangle and another circle for the base.

Place the snout on the face and add two circles for the nostrils. The outlines pose a problem as we don’t want the line on the left visible.

Using the straight line tool draw a shape covering the outline on the left…

and give it the base colour of the skin. Add another line to form a mouth.

2dgameartguru - working with outlines
2Dgameartguru - spacer
The tail might not look like  the usual corkscrew design you see in a lot of pig illustrations. It was one of those cases of thinking you know how it looks versus the way it looks. In the end, I checked on Google images [the best invention since sliced bread]. After having had a look, this cute little tail seemed more appropriate.
2Dgameartguru - spacer

Finally, add two circular shapes to the hip and shoulder. These cover up the lines and connect the limbs to the body.

2dgameartguru - working with outlines
2Dgameartguru - spacer
I hope you enjoyed this tutorial. Get out inkscape and start creating!

Get the source art (SVG file) of this tutorial for free!