Let’s get started on a simple 2D character. There are a lot of resources and tutorial out there on character creation and animation. Most of then written by and for artists and animators. Let’s go with a simpler approach. I will try and break in down to basic elements and easy to follow steps.
Note: Some of the techniques used in this tutorial have been covered in the earlier post. They should help you work your way through this tutorial which is a little bit more complex.
Something similar to this can be found when searching online for examples of ‘2D character animation’. A simplified body shows the head, body, and limbs moving through an animation cycle (e.g. a walk). Translating these examples to an actual game character is the tricky part.
Let’s take the character and split it up into its parts. It’s made up of the head, the body, the upper and lower arms, hands, the upper and lower legs and finally the feet.
The same elements (with the addition of a neck and a set of wings) make up this little fairy character.
This nude version of a famous plumber…
or this ninja character…
… or this little game character created for a mobile phone game template is based on the same principle of separated limbs.
Joining the upper and lower parts of limbs reduces the character to even fewer parts.
While creating your character keep the available space and proportions in mind to make sure the character fits the ingame needs.
The actual size inside the game is the starting point for creating your game character.
The height and width available determine the character’s proportions and the level of detail.
Thin and long limbs and a high level of detail might look good in the vector illustration but can cause problems when taking it to a small size bitmap image.
Creating and animating a character with a lot of detail Takes up more time. Make sure it’s visible.
Finally, yt’s time to start getting creative. Building a character from scratch starts with the head, then the body and limbs before assembling the elements into the final figure.
When working from a sketch, scribble or concept drawing it’s helpful to import the bitmap image into a new layer at the bottom of your stack and work on top (Layer/ Add Layer or SHIFT+CTRL+N). Bring up the Layers (SHIFT+CTRL+N), select the sketch layer and import the bitmap. Lock the layer and select the work layer (e.g. Layer 1).
Start with some circles.
Convert the nose to a path and modify the nodes to form a nose shape. Create a gradient fill to make the nose stand out and add some more circles. Shape the eyebrows convert the head to a path [SHIFT & CTRL & C] and shape it to form a chin.
Add two more circles for a hat modify the nodes of the top one to connect.
Add another circle and a square for some decoration.
Modify the circle to form the base for a feather. Use the straight lines tool to create some triangles.
Use the Path/ Difference command to ‘cut’ them Select the hat elements and rotate them a little.
Add some more circles for a neck hair and an ear. Lower and raise objects [Page Up & Page Down] to place the hair and ear below the hat.
The body is made up of a modified circle. A duplicate is combined via (Path/ Intersection) with the darker circle for the pants.
Add a rectangle for the belt, a circle and a triangle for the shirt. Convert the rectangle to a path [SHIFT & CTRL & C] and shape it to form the belt.
The arms are made up of two more circles and a rectangle with rounded corners.
Modify the nodes after converting the objects to paths. Add duplicates and darken the colours just a little.
Start with another circle, convert it to a path and modify it to form the shoe.
A duplicate of the shape functions as the sole and two circles add a little detail to the shoe.
Add a duplicate of the curved arm object for the leg. Group it and create a duplicate of the group.
Assemble the objects and lower and raise them (Page Up & Page Down) to layer properly. Arrange the back arm and leg at the bottom of the stack and the front arm at the top.
Note: Make it easier to animate the character later. Group elements and assign pivot points in better positions is really helpful. Turning e.g. an arm at its centre makes little sense. Move the pivot to turn it at the shoulder. Make logical groups. In order to do that, select objects that ‘belong’ together, group them and move the pivot point of the group to the matching joint.
The hat for example turns into a helmet…
Add some circles to form a shield…
A spear made up of four modified circles turns the character into a guard or knight.
Group the shoe objects and set the pivot to the ankle. Continue with the other parts and adjust the pivots to be in ‘joint places’.
Afterwards move the groups and rotate them into place.
Note: Some vector programs (e.g. Corel Draw) allow group hierarchies. You can group the shoe group to the leg and move them together, then STRG & Click the shoe group and then rotate the shoe in the new position.
This concludes the creation process. Now it’s time to go in and play with the shapes and create some variations. Let’s make the most of the objects we have created so far.
Now it’s time to change the pivot points in order to rotate the body parts properly.
Select the body
objects. Group them and double click to get to the pivot point. Move the cross marking it down to the hip area.
Do the same with the arms. After changing the pivot point for the hand group the arm and change the group’s pivot point.
A different colour for the shoe and two squares forming the buckle are combined by difference.
A long rectangle with rounded corners and a few circles form a scepter for the king.
His crown is made up of the band of the hat and the shrunk top of the head – duplicated and coloured.
Silhouettes are another quick modification once a character is set up. A new set of eyes and some decoration complete this transformation.
A change in brightness and colouring can easily change the look and feel. In this case, it’s a shift towards yellow as well as some desaturation.
I hope you enjoyed the tutorial so far. Have fun with vectors and stay tuned for the next post ‘Taking on animation in Inkscape’.
Get the source art (svg, pdf, affinity designer and coreldraw file) of this tutorial for free!
(only includes the main character created in the tutorial plus the ‘king scene’)
Privacy & Cookies Policy
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.