Working with bitmap output in mind

Inkscape tutorial

This tutorial on how to approach work that will have a bitmap out was another request.  Basically, it’s combination of requests put into one tutorial. How to work with outlines? Can you create vector art that looks good in a small e.g. 48×48 px size? How do I export png-files properly in Inkscape.
One of the advantages of vector graphics is it’s lossless scalability. You can easily create an image and scale it up and down without sacrificing the quality. There will be no jagged edges or visible blocks when you increase it’s size by a tenfold. It also works nicely the other way round by creating source files that can be used for smaller in-game images.
To me it’s a lot easier to create a few circles and boxes than to pixel a character from scratch. It can then be animated in inkscape and exported to bitmap and worked on with a bitmap tool (e.g. gimp) afterward.
I like to work with files 2x the output image for a slightly larger work area. Also, I find the scaling algorithms work better in bitmap tools then exporting straight to the small size in inkscape.
For this tutorial we are going to create a small boy with an outline style. If you have questions about strokes and elements, check the tutorial I wrote earlier on creating outlined characters.
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Let’s get started on a Bitmap Character

2Dgameartguru - spacer
2dgameartguru - creating with bitmap output in mind

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.

2dgameartguru - creating with bitmap output in mind
2dgameartguru - creating with bitmap output in mind

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.

2dgameartguru - creating with bitmap output in mind
2Dgameartguru - spacer

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.

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Addding Detail to the Character

2Dgameartguru - spacer
2dgameartguru - creating with bitmap output in mind

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.

2dgameartguru - creating with bitmap output in mind
2dgameartguru - creating with bitmap output in mind

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.

2dgameartguru - creating with bitmap output in mind
2Dgameartguru - spacer

Working with the Bitmap file

Now we have our character and it’s exported to a 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).
You should have something like this: a 96×96 px image with a transparent background and the little guy in his full glory. Thanks to the antialiasing it doesn’t look much different from our vector shape.
Now we open the file in the bitmap tool (e.g. gimp).
In gimp we reduce the size via ‘Image/ Scale Image’ to 48×48 and should get something like this. It still has the antialiasing which rounds of the edges and smoothes the steps.
If you are after a more pixelated look I suggest reducing the colours (e.g. to just 16 colours) and manually touch up the image, removing AA outlines and redrawing the outer lines to be even.
This would be a topic for a whole new tutorial – and I will add it to my todo list. For now I hope you enjoyed this tutorial and keep creative with inkscape.
Some engines (especially for the iOS and android require set dpi (dots per inch or x and y resolution). I find it hard to adjust my art properly in inkscape to export to the right dpi straight away. Instead I change the dpi in the bitmap tool whenever needed. In gimp it’s done in the ‘Scale image’ tool. You can set the x resolution and y resolution (e.g. to 72 dp[i for iOS applications) when scaling down.
2Dgameartguru - spacer

Get the source art (svg file) of this tutorial for free!
2Dgameartguru basics - circles
2Dgameartguru basics - squares
2Dgameartguru basics - shading
2Dgameartguru basics - align
2Dgameartguru basics - picking colours