Making Better Game Graphics

Do not use gradients

Gradients are a cheap, unrealistic approach to shading. In real life, there are no 'true' gradients. And it doesn’t matter if you’re trying to make realistic graphics - anyone with a basic knowledge of computer art knows that gradients are the tool of choice for a quick, cheap fix. In reality, give your game a sloppy PowerPoint-esque appearance. As with any rule, there are exceptions. The point is to use sparingly, if at all.

Do not use the default colors of MS Paint As a matter of fact, don’t use highly saturated (or 'bright') colours in general. They are ugly and painful to the eye. They are a distracting. There’s no better way to explain this. Even if you’re looking to make a bright, fun game, the default colours of MS Paint are much too fluorescent. Generally, a good saturation level exists between 120 and 180, but it is also good to contrast between higher levels and lower levels. Just be sure that all of your colours don’t exceed 200 - that’s the 'pain zone', where people have lost their vision.

Note that to change the saturation level of a colour in MS Paint, you must double click a colour in the colour tray. A box will pop up which allows you to edit the colours. Click on the button that says 'Define Custom Colors »'. A new saturation level can be entered into the second box of the first column (appropriately labeled 'Sat').

== Do not use MS Paint ==

On the topic of MS Paint, don’t use it. Some pixel art purists will probably disagree with me here, but the idea is to make your life easier. Spriting in MS Paint is difficult - more difficult than it needs to be. There simply aren’t enough tools to work fast and efficiently. I suggest using GraphicsGale. It’s a free download, and is much better than MS Paint. Others promote Paint.NET and Photoshop, which are also good choices.

GraphicsGale comes with a much more eye-appealing default colour palette, and the interface (although it may not appear so at first) is very similar to MS Paint. Particularly useful are the shortcuts of GraphicsGale: To select a colour from the canvas, you only need to right-click on the colour (in MS Paint, this must be done with the eye dropper tool). The selection tool is also only a right mouse button drag away, making it easy to move things about. It is also possible to use layers and create animations in GraphicsGale, tools that cannot be found in MS Paint.

Do not pillow shade

This is a square that has been pillow shaded:

Note that the edges are darker, and get progressively lighter towards the center of the sprite. This represents an unrealistic style of shading that turns otherwise good drawings into bad drawings. The fact is this, light almost never hits an object exactly above it. This is what makes pillow shading so ugly. When in doubt, never pillow shade.

Those are the major 'do-nots' of making game graphics. Now let’s be a little more positive and list some good things that you can do to improve your graphics.

Make small sprites

Large sprites can be overwhelming to draw, and the larger your canvas is the more opportunity you have to draw something out of proportion. It also becomes difficult to shade large sprites realistically, and fluid animation is near impossible without a good deal of practice.

No one is going to think you’re cheap for making a 16x16 sprite. In fact, the old-school style is celebrated by many. However, if you’re set on having large sprites, you can always set the resolution or change the scaling of the view (set the 'port on screen' size to double the size of the 'view in room') so that your sprites appear larger on-screen.

Shade

The idea of shading might be intimidating, but it’s not overly difficult. Let’s assume that we want to shade a circle. Only three colours are needed: A dark shade, a medium shade, and a light shade. From here, it’s only a matter of choosing a light source. This is where the hypothetical 'lamp' or 'sun' is assumed to be; generally it is in the top-right or top-left corner of the sprite.

Using the medium shade, fill the entire circle. Use the darkest shade to colour the portion farthest from the lightsource, and the lightest shade to colour the portion closest to the light source. It should come out like this:

Of course, this is an oversimplification. Realistic shading on some objects can be difficult, but the same rules apply. Those portions which are farthest from the light source should be darker, while those closest to the light source should be lighter.

Use less colours

Using more colours does not result in a more realistic game. A minimalistic approach, as suggested, can clean up the game and keeps things consistent. It limits your time with the colour palette, meaning less opportunity to create clashing colour schemes.

Stick to what you know

Drawing takes practice, a lot of practice. If you haven’t got the time or attention span to commit, then stick to what you know. A well drawn, nicely shaded geometric shape will always be more attractive than a poorly drawn cow. Those are the basics of making better game graphics. If you’re looking to really improve your skills as an artist, the Internet is full of pixel art and Photoshop tutorials. Otherwise, I hope this article was able to point you in the right direction.