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.