15 Years!

Tools of the Trade: Inkscape

This week’s TotT post is for the artists on your team. Since I’m an artist myself, and an advocate for FOSS (free and open source software), you’re going to notice more opinions in this week’s post than last week’s.

There are two types basic methods of creating 2D art on a computer – raster and vector. Raster images are commonly called bitmaps, but have multiple common file formats with different strengths and weaknesses. You’re probably already familiar with .BMP, .JPG, .GIF, and (hopefully) .PNG* file formats. These images are made of individual pixels of color and cannot be made larger without losing a lot of information.

Vector images are created by programs like Adobe Illustrator, an expensive and proprietary profesisonal-grade application, and Inkscape, a free and open-source professional-grade application. Inkscape uses proprietary file formats and Inkscape uses the SVG (scalable vector graphic) format, which is an extension of XML and can be viewed by most modern web browsers (finally).

We will make it better - with math!Vector images are created using mathematic calculations to define geometric shapes. Every time you scale a vector image the math is recalculated, meaning you always get crisp clear lines… unless you’ve applied a mathematic formula to blur the edges, in which case that gets recalculated too, so you always have a predictable amount of blur.

Many people are under the impression that vector images are only good for logos and text, but as you can see from the Inkscape screenshot to the left, a talented artist can do so much more than that with vectors.**


Now, those of you who’ve used GameMaker Studio or Stencyl before know that they allow you to import raster files, not vector. So why would you want to use Inkscape to make art for your 2D game? Scalability is the most important answer. You may decide to increase the resolution of your game and scaling all of your art assets is not going to be fun if the originals are all raster files. Inkscape easily exports to the PNG file format, so if you need a character or UI element to be larger, it’s a simple matter of re-exporting your art to a higher resolution.

Personally, I also prefer to work large and with clearly delineated forms as opposed to working small and with shades of color. Crafting 32×32 grids comprised of dots of color simply doesn’t make a lot of sense to my brain. With Inkscape, I can work in a manner that makes sense to me and still contribute meaningfully to projects that require small icons and sprites.

 Finally, if you’re working on an HTML5 game, SVG files can be used natively and programmers tend to love them, since they can open them up and edit them using a text-editor to create groups and assign item names that make sense to the code and structure of the web page, all without touching the art you so carefully crafted for them.

Inkscape is a free program that runs on Linux, OSX, and Windows. Download it today and see what you can make with it!

*As an illustrator and designer who loves crisp lines and rich color palettes along with clean transparency, .PNGs are the only raster file type I like to use for my work.

**That’s not my work, sadly. Click the Iron Man image for more examples of great vector art.

Leave a Reply

Your email address will not be published. Required fields are marked *