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

Anda baru saja membaca artikel Situs GAME NETBOOK GRATIS .exe .zip .rar yang berkategori dengan judul Working with bitmap output in mind. Anda bisa bookmark halaman ini dengan URL http://netbook-game.blogspot.com/2012/02/working-with-bitmap-output-in-mind.html. Terima kasih!

Posted by: templates-office.com Working with bitmap output in mind Updated at : 16.56

http://netbook-game.blogspot.com/ - Game Netbook Populer Lainya 2014 :

Home » » Working with bitmap output in mind