Game Art Tutorial for the Technically Minded [Part 1]

For programmers, art can be scary, but it doesn’t have to be! This game art tutorial outlines the basic workflow a more technically minded person might go through to create beautiful assets for a game.

In this post, I put together a tractor from Tractor Trample.

tractor

Here are the high level concepts covered:

  • Design workflow
  • Drawing & manipulating shapes (rectangles, circles, stars, paths)
  • Adding shadows

As you read/watch, try to imagine what your next step would be, and see how it compares to what I do. It will help to think critically about what’s being accomplished in each step, so that you can apply these concepts to anything you’d like to draw. I’ll be using Inkscape, a vector editing program, so it might be helpful to gain a baseline familiarity with it on your own, or with another one of my posts.

Here is part one:

I try to start with extremely simple shapes to form the initial outline of what the final character will look like and use images from real life/other people’s work to inspire how I detail those simple shapes. Below, I’ve outlined the steps I go through in part 1 in a little more detail:

  1. Inspiration
  2. Basic outline with basic shapes (or trace!)
  3. Add color
  4. Add detail

1. Inspiration

The number one obstacle I had to overcome when learning to draw was learning how to disconnect my mental imagery from actual objects. Don’t try and draw things from memory! Hell, if you’re just starting out – don’t be afraid to just trace! In fact, that’s what we’ll start off doing here today.

In this video I use Google Images for inspiration. Google images is good for when I know what I want to draw and want to start forming ideas of what I want it to look like in my head. For example, if I haven’t settled on an art style yet, google images can provide all sorts of different imagry for me to browse through. It can also be helpful if I need to be more specific in the object I want to draw, for example – I want to draw a tractor, but what kind?

Some of my other go to sites are as follows:

  • Behance – great for the ability to filter and fine tune your search
  • Designspiration – for when you’re hitting a wall, creatively
  • Game-Patterns – an excellent resource for studying recurring UI elements in games

2. The Basics

Now, a blank canvas is staring you down.  What next?!?! This step is probably the most intimidating but really, it’s the easiest! If you’re brand new to the art process I would suggest copying any inspirational art you’ve found and just pasting it directly into your document. And then trace. Yes, TRACE!

tractorbody

Tracing art or even real objects that you want to draw is a great way to force yourself to notice the little things. Zoom all the way into the pixel level, take note of the characteristics of the lines, the curves. Appreciate the colors used and shadows dropped to add depth. And start simple! Trace out the basic shapes that make up what you’re trying to draw, and move on from there.

tractorwheel
Don’t be afraid to trace in order to get the initial proportions right!

3. Colors

Once the basic shapes are in, I like to add color so that I’m not just staring at a bunch of flat black rectangles and circles. No need to get the colors perfect, we can always tweak them later. This step is strictly to help you see a rough outline of the image we’re trying to draw.

coloring
Adding some color so we know what the object is supposed to be

4. Details

Now we’re going to move from object to object, adding little details to make rectangles turn into a tractor chassis and circles into wheels.

The video covers how to alter paths to add some curvature to the tractor body, as well as how to manipulate the star tool to create a cool looking wheel with huge treads.

Converting rectangles to path objects allows us to deform the rectangle as we please
Converting rectangles to path objects allows us to deform the rectangle as we please
We manipulate the properties of a star to turn it into a tractor wheel!
We manipulate the properties of a star to turn it into a tractor wheel!

Finally, I add a thick black outline to the entirety of my tractor. Adding an outline to each object in your image can help differentiate each object when drawing in a flattened style, as we’re doing here. The outline also helps achieve a nice ‘cartoony’ feel.

outlining
No outline, outline. No outline, outline! Aren’t gifs fun?

Congratulations! You’ve got a reasonably finished tractor. In part two, we’re going to add a few more elements like a racing stripe and a steering wheel, as well as give our tractor a little attitude. Then, we’ll finish off with step five by adding shadows.

On to Part Two!

About Nabil

Thanks for visiting! I'm a software consultant, rock climbing enthusiast and I like to draw in my spare time. I hope you've been enjoying our work so far, feel free to drop us a few comments if you see anything you like! (Or don't like)

8 thoughts on “Game Art Tutorial for the Technically Minded [Part 1]

  1. very nice, i found this helpful. but i personally find it to be a worse problem when you have things that don’t have easy real-life representations. e.g. aliens, generators, and in-game resource blocks/tiles.

    1. That is true, but you can certainly start off looking at how others have drawn things like aliens, etc… More often then not, you should be able to find other games to draw inspiration from. Try emulating other people’s work to start off, and once you have a feel for how other people have done it, you will have a much easier time coming up with your own style.