"Life is too short to make bad art."

Thursday, February 23, 2012

Working with bitmap output in mind

Here's another request (or a a combination of requests) put into a tutorial. How to create vector art that looks good in a small e.g. 48x48 px size. 

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) afterwards. 

I like to work with files 2x the output image for a slightly larger work area - and because I find the scaling algorithms work better in bitmap tools then exporting straight to the small size in inkscape.

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 48x48 or if they become too thin to be readable or are just too big and overwhelm the character. 

Now we have our character and it's exported to a bitmap file.

Note:
I skipped the adding 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 96x96 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 48x48 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. 

Note:
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.



Get the source art (svg file) of this tutorial for
USD 3.00

buy

17 comments:

  1. woah what a nice tutorial :)
    thx for releasing so much good stuff in a short time

    ReplyDelete
  2. 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 :)

    ReplyDelete
  3. ur ona rolll !!! nice tutorial man , that character looks good ..info good ..good!!!

    ReplyDelete
  4. 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! :)

    ReplyDelete
    Replies
    1. No worries, Michael... My pleasure... Good luck with the game...

      Delete
  5. 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.

    ReplyDelete
    Replies
    1. 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.

      Delete
  6. Hi there Sprite attack.

    You are so awesome! Can you do a few tutorials on isometric characters and animation?

    Keep rocking out!

    ReplyDelete
  7. 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. " ?

    ReplyDelete
  8. 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!

    ReplyDelete
  9. @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.

    ReplyDelete
  10. 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 96x96, 80x80, 72x72, 64x64, 48x48, 32x32, 24x24, 16x16).

    ReplyDelete
  11. 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):
    <group
    id="iconpreview"
    autoRefresh="1"
    pack="1"
    selectionHold="1"
    showFrames="1"
    selectionOnly="0">
    <group
    id="sizes">
    <group
    id="default">
    <group
    value="16"
    show="1"
    id="size16" />
    <group
    value="22"
    show="0"
    id="size22" />
    <group
    value="24"
    show="1"
    id="size24" />
    <group
    value="32"
    show="1"
    id="size32" />
    <group
    value="48"
    show="1"
    id="size48" />
    <group
    value="50"
    show="1"
    id="size50" />
    <group
    value="64"
    show="1"
    id="size64" />
    <group
    value="72"
    show="1"
    id="size72" />
    <group
    value="80"
    show="1"
    id="size80" />
    <group
    value="96"
    show="1"
    id="size96" />
    <group
    value="128"
    show="0"
    id="size128" />
    <group
    value="256"
    show="0"
    id="size256" />
    </group>
    </group>

    ReplyDelete
    Replies
    1. 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... ;)

      Delete
  12. 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 32x32 using nearest neighbor, then i took that and scaled it back up also using nearest neighbor http://dl.dropbox.com/u/1789373/oldschool.jpg

    ReplyDelete
  13. 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.

    ReplyDelete
    Replies
    1. 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. 256x256) and scale down from there?

      Delete