Working with bitmap output in mind
Let’s get started on a Bitmap Character
Let’s start with a square.
Set the width and height to 2x the bitmap size (for easier handling and better export).
All elements have to stay within it’s borders in order to fit into the bitmap image.
Lock this layer and…
…create a new layer to work on.
Next up we create a little character starting with a circle for the head.
Duplicate the shape and scale it down a little to form the highlight.
Next up is a deformed circle for the the body and a duplicate of the shape for the neck.
The legs are another deformed circle with an added node to form the base.
To more deformed circles make up the show (mirrored for the other side along with the leg).
Duplicate the leg shape and move the bottom right node down to form the arm. Make the bottom left node a corner to create the fist.
Add another deformed circle for the shirt and place the arms with the body. Copy and mirror them for the left side.
Three more circles make up the ears. Make a ‘banana shape’ and scale it down to match the stroke width.
The main elements are there and it’s time to check what our little character will look like in its small in-game size. I primarily want to check if the outlines will still work in 48×48 or if they become too thin to be readable or are just too big and overwhelm the character.
Addding Detail to the Character
Now is a good time to do a quick export check. Unlock the base layer (we want to export the box as well).
Select all elements and export via ‘File/ Export to bitmap’. Choose the ‘Selections’ option and set the bitmap size to 96x96px. Inkscape will create the dpi accordingly. It’s easily fixed in a bitmap tool.
Open the image in a bitmap tool and scale it to e.g. an ingame 48×48 pixels. Check the image and adjust the stroke if needed.
Use the straight lines tool to add hair to the character.
Select all the hair nodes and turn them to curves and corners. Adjust them to look nice.
Add some rounded rectangles (~the width of the stroke for the eyes) and some circles for the nose, mouth and cheeks.
Unlock the bottom layer and select the square. Set the fill to ‘no paint’.
Select all elements and export to bitmap (SHIFT + CTRL + E).
This time the bitmap has a transparent background.
Working with the Bitmap file
I skipped the addition of more detail (e.g. the shadow line of the hair (which is basically just a copy of the hair shape without the stroke and coloured in a 50% alpha dark violet) and the highlight in the hair (which is a quick squiggle with the freehand lines tool).