Simplified Hands

Inkscape Tutorial

This tutorial is yet another ‘quick and out of context’ tutorial. After having been asked about character design, I realized the struggle it can be to create a half decent looking hand. Hands are one of the hardest things to get right realistically. We usually quickly see when it looks off – but getting it right is tricky.
A lot has to do with anatomy and I won’t go down this lane in my tutorials – if you want something more elaborate and realistic to understand how to draw hands I would suggest checking the many tutorials and reference images out there e.g. suzannart (drawing hands).

I want to show you some easy ways to create simplified hands for your character designs by using basic shapes and strokes instead of laboring with the pen tool.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru simplified hands

Let’s start with a bunch of rounded edge rectangles.

One base shape for the fingers. All you need to do is convert it to a path and adjust the upper nodes to change the length.

The thumb gets two more nodes for a slight angle.

The rectangles are somewhat hard to modify. The easier alternative would be to use lines.

Note:
Holding STRG will keep the line straight.

Go to the ‚Fill and Stroke‘ panel (Shift + CTRL + F) to adjust the thickness and the cap to get rounded ends.

2Dgameartguru simplified hands
2Dgameartguru simplified hands

In order to get more dynamic hands, bend the lines a little bit with the edit tool (F2).

The lines allow for quick variations. Simply move the nodes add more nodes to emulate the joints and bend it the right places.

2Dgameartguru simplified hands
2Dgameartguru - spacer

Finger count

You will often find just 4 fingers on cartoony characters. When using thicker/ shorter fingers it can easily look cluttered or the hand will look too wide. If your character doesn’t have to be realistic you might want to try ‘losing’ a finger and see how it looks.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar
2Dgameartguru simplified hands

Once you set up the right pose, you can convert the lines to paths via Path/ Stroke to Path (CTRL + ALT + C).

Those objects can be combined via Path/ Union (CTRL + +) to create outlined shapes or make it easier to shade the hand.

Note:
Even when going for a simplified or cartoony style it is helpful to check reference images.

Shading helps determine front and back of palm and fingers.

2Dgameartguru simplified hands
2Dgameartguru simplified hands

For a side on view, modify the palm shape to a narrower more triangular shape.

Adjusting the stroke colours helps to distinguish between the fingers.

2Dgameartguru simplified hands
2Dgameartguru - spacer

This is just one quick way to create hands – one of many. Keep in mind that in order to make the more realistic you will have to modify the lines – add nodes for the joints and change the thickness of the fingers towards the tips (among other things).

I hope you find this tutorial helpful… and I will try to post again more frequently and more in line with what I started writing about earlier… ;)