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).
woah what a nice tutorial :)
thx for releasing so much good stuff in a short time
Epic tutorial. Love it.
Since I only know how to use gimp, I was always wondering how to do a bitmap output on inkscape. Inkscape grid system, canvas size thinggy etc was confusing. Now it's not anymore :)
ur ona rolll !!! nice tutorial man , that character looks good ..info good ..good!!!
Woah, this was fast! Thank you a lot!
I'm 16 and my parents are in not so good financial situation so I figured maybe I could make some money by making Flash game, but I'm pretty bad with graphics so this means much to me! Thank you! :)
No worries, Michael… My pleasure… Good luck with the game…
Great stuff as always.
A quick question. Do you ever work with png sprite sheets? If so, is there any difference for how to handle the scale down? I'd like to do some art similar to what's seen in games like Kingdom Rush – tiny cartoony animated things, but in png format.
It would work just the same… I would advise creating the single images first and then run it through a spritesheet maker to pack the content as good as possible. Working on a spritesheet in vectors and exporting the spritesheet might cause problems with the antialiasing (when shapes are bordering of a pixel in the output file) as well as the alignment of the animations.
Hi there Sprite attack.
You are so awesome! Can you do a few tutorials on isometric characters and animation?
Keep rocking out!
Great tutorial as always, but I have a question: what exactly do you mean with "removing AA outlines and redrawing the outer lines to be even. " ?
It would second both the idea of isometric characters and animation (currently it seems most tutorials focus on side-view perspective) and art like Kingdom Rush (which is also more pseudo-3D and not side-view). Your tutorials are great (please continue making them), but I find it hard to adapt them to a more pseudo-3D look. It would be fantastic if you made a tutorial about that!
@John and Anonymous – I agree an isometric tutorial would be a lot of fun – but it's quite a step up from the 'simple' things covered so far. I was going to start with isometric content first – taking a cube and turning it into terrain, buildings, trees, etc. and keep the character for part 2 or 3… Let me have a think about it.
@Sefi – Most bitmap graphic editors would use antialiasing to make a scaled down image look better… This is ok if you have a lot of colours and full alpha – but it doesn't work if you go with a a limited palette and just 1 colour transparency. You end up with stray pixels and shading / colour replacements that are off. You then have to manually go in and erase some pixels in the outline of the image and place other with a non-antialiased brush to make up for it. I am not sure if this made more sense – it's a good topic for a tutorial now that I write this.
Just a suggestion: instead of exporting to see if the outlines are ok before completion, you can use View -> Icon Preview… it's customizable with the sizes you want (personnally i have set 96×96, 80×80, 72×72, 64×64, 48×48, 32×32, 24×24, 16×16).
In case you're wondering how to customize Inkscape, "preferences.xml" is your answer. For Icon Preview, here is my example (indentation is deleted by the comments system):
Thanks… that's a great tip… I am an illustrator… and I play with the shapes and effects inkscape offers but I rarely look for the hidden treasures that the tool has… Well… maybe I should do that more often… that's if I can find the time… ;)
sprite, another good technique to use if you want a old school pixel look is to use nearest neighbor in the pull down of the image resize window of photoshop when you resize, it removes aa, in the following example i took your original pic, an resized it to 32×32 using nearest neighbor, then i took that and scaled it back up also using nearest neighbor https://dl.dropbox.com/u/1789373/oldschool.jpg
hi,I use your way to create an icon 48 * 48.But it is quite blurred in my app… I do not know why. I create a svg 96 * 96 and output as a png. Then scale it in the igmp,then output as a png.The png is quite blurred… Could you tell me why,thank you.
I am not sure why this happens. Usual gimp does a good job at scaling bitmaps. Have you tried exporting from Inkscape in a bigger size (e.g. 256×256) and scale down from there?