Making High Quality Non Pixel Art for 2D Games

Who This Topic is Aimed at

This topic is aimed towards 2D game programmers new or old that have issues with creating art that looks smooth and non pixelated.  For sake of argument, I will use only free software, and basic drawing tools. This will help you develop art quickly and masterfully for any library, or game maker. Including but not limited to, YoYo GameMaker, C++ with a graphics library, XNA, RPG Maker, and many more.

Software You Will Need

Inkscape: Vector image editing software. Price: Free

Paint.Net: Bitmap editing software. Price: Free

Whatever form of game making you use

Step One:

The first step in creating amazing video game art is drawing on a piece of paper. This is a very important step, because you can really edit the art in any way you want to a unique look. So, start with a sketch. So for this example, I created a very simple drawing that we will call Blobby. I have sketched him on a plain old sketch pad, but you can use printer paper or any other surface. But just a tip, the clearer the surface is that you draw the sketch on the easier this process will be. And please do not shade the drawing, or color it. It will make your life harder in the future. Only shade concept art on paper. Not something you plan to convert to a digital image.

After the initial sketch, you need to do a thing called inking. This is a simple process of going over permanent lines of the sketch with a dark pencil or pen. I prefer to use a charcoal pencil for this process which you can get at Walmart in the sewing section(for some reason), but you can use any regular old pen. The thicker the lines the better for this process. But common sense for line thickness should be used.

As you can see, the lines are dark and easy to distinguish. Perfect.

After you are done drawing the images, you need to have a way to upload them to your computer. For this I will give you a list of easy ways that just about anyone can do. First, and the most simple way is to use a camera. You need to take a picture with a digital camera with still capabilities, and then save them to your pc. Or if you do not have a still camera, you can use any camera phone and send the image to your email address. Easy as pie, but if you have the hardware, you can use a scanner, or maybe even a tablet to trace your image. But I digress…

Step Two

Open up Inkscape and you will see this screen.

Click File:Open: and fine the sketch you saved. After opening, it should look like this.

At this point, I will not be explaining how to use Inkscape. But here is a Youtube that should get you up to date enough.

After you have a good handle on Inkscape, you can start tracing the image in Inkscape. You do this by using rough shapes in Inkscape then sculpting them into your desired shape. This allows for a very high level of detail, accounting the fact that in vector graphics, you can zoom in as much as you want and add a line or two to give it a textured look. So here is my example of traced Blobby.

I just traced him with the tool. Then I edited all of the lines with the tool.

After you create all of the shapes that you want in the image, then you need to select all the vector lines with the mouse tool towards the top of the tool bar. and click and drag until all of your drawing is highlighted. Then you need to go up into the menu bar at the top and find Object:Group. Then click that. Now you can move around your entire sketch without it falling apart, or morphing. At this point, you can copy your trace into a new vector drawing and save it with no color, or you can color it in and give it texture.

Step Three

Select your vector drawing and hit CTRL+C to copy it. Then in Inkscape, make a new document with no matter what size you want. And hit CTRL+V to paste your vector drawing in it. It should look like this.

TIP: When you make vector images for use in game, always save a copy that is still a vector image so you can resize it cleanly and just save it as a bitmap again.

At this point, if you do not want to add color you can just resize the image to what you want and hit File:ExportBitmap. This will give you a few options that look like this.

You do not want to export the selection, unless you know specifically what you are doing. What you want to do, is click drawing to get your entire vector image. or if you have a specific page size you want, then click page. but like I said, for now you want to hit drawing. It will give you a few options, and you will have an output of a black outline with clear innards and surroundings. Saved as whatever file type you like. This can be imported into your game, or edited further in a bitmap graphics editor like Paint.net or MSpaint.

Step Four:

If you would like to add color, then what you need to do is ungroup the image. You do this by clicking it once and going into Object:Ungroup. You might have to hit it a few times to get everything apart. But when it is all finished, you can click on individual body parts. So what I am going to to is make Blobby green, with blue pupils. Very simple, just to show you what to do.

What you need to do is click the shape you would like to fill, and go up into Objects:FillandStroke. Just click it once, and a tool box will pop up on the side.

with this, you can change the size of your stroke, the color of your stroke, and the style of your stroke. Also you can change the color of your fill, the gradient of your fill, and the blurry-ness of your fill. Just mess around with this on your drawing, and remember that you can undo any mistakes you make. So have fun!

The end result is this.

After this point, you can mess around with detail in your image, add some style resize it to your preferred resolution, then SAVE THE VECTOR IMAGE!, then you can export it as a bitmap as explained in Step Three.

Final Note:

All of this together, will create very high quality smooth sprites for your game that you can resize at any time without ruining the image. Giving your game a professional look for free!

On a side note, if you are a tile artist, you can create very realistic tiles in Inkscape, but its a very time consuming process.

Special thanks to every one that helped me write this blog post, and I hope it was helpful.

Here’s Blobby!

No pixelation, and very smooth lines. Yummy.