Jump to content

  • Log In with Google      Sign In   
  • Create Account

Interested in a FREE copy of HTML5 game maker Construct 2?

We'll be giving away three Personal Edition licences in next Tuesday's GDNet Direct email newsletter!

Sign up from the right-hand sidebar on our homepage and read Tuesday's newsletter for details!


We're also offering banner ads on our site from just $5! 1. Details HERE. 2. GDNet+ Subscriptions HERE. 3. Ad upload HERE.


Like
51Likes
Dislike

The Total Beginner’s Guide to Better 2D Game Art

By Mark Simpson (Prinz Eugn) | Published May 14 2013 01:09 AM in Visual Arts
Peer Reviewed by (evolutional, Dragonsoulj, jbadams)

art creative drawing pixel art shading shadows hue shifting sprite proportions character design concept 2d beginner getting started artist

This article will introduce you to basic art concepts to give you a head start in making your own 2D game art. This is not a Tutorial! This article is for those with some vague familiarity with 2D art for games, primarily people who are programming games but would like to create quality assets, or those just getting started with creating art for games. By 2D assets, I'm referring to 2-dimensional images used for games - anything from character sprites to large backdrops. This article focuses on giving a brief introduction to good old-fashioned art skills and the ways they can make your game better. It's meant to give you a brief introduction to some principles and ideas so you don’t have to waste your time discovering them the hard way or develop any bad habits you will then have to break.

Note:  I won’t be covering things like file formats, raster art vs vector art or what software to use in this article.


What I will be covering:
  • Form and Shape
  • Anatomy and Proportions
  • Perspective
  • Breaking Down Color
  • Lighting and Shading
  • Practice Makes Perfect
If those bullet points don't grip your heart and tear at your soul, here's this handy before-and-after demonstrated what you will learn:

Attached Image: BeforeAfter.png
An internet fact!


Okay, that's actually what my programmer friend made and my, uh vast improvement, but I think it's a pretty good example of what happens when you apply a little artistic know-how to a design.

We’re all used to looking at 2D images in everyday life, but knowing what things look good isn’t the same as understanding exactly why they they look good. Any 2D image can be broken down into basic elements, and you can think about creating 2D art as combining those elements in a way that 1) Looks like what you meant it to be, and 2) Is not super ugly. For example, we all know what a square and a sphere look like, but how do they fit into the process of making an identifiable character? To answer that, we're going to start with our first section:

Form and Shape


Knowing that shapes matter, you can apply them to make environments seem more or less friendly, or match (or intentionally mismatch) characters and objects to those environments. Start designs with only very basic shapes- I'm talking about circles, squares, and rectangles. Try a character made of squares, or one made out of just triangles, and then see who looks more like the hero and who looks more like the villian. Keeping your initial design thoughts to shapes only also lets you generate a lot of ideas without getting carried away trying to figure out the detail right away (more on that later with the "Practice Makes Perfect" section). Generally, sharp edges imply artificiality or evil while curves and roundness imply organic and good. Traditionally it's though of as a spectrum, with roundness on one end with jaggedness on the other, with squares somewhere in the middle.

For a great example, think about the landscape of Mordor in the Lord of the Rings films, versus the rolling hills of the Shire. A round, friendly looking character wandering through an angular environment seems more unsettling than the same character in a predominantly round environment. In the same vein, you can easily make stylistic choices to influence how a player thinks of an area.

Let's take a look at another particularly good example... Let’s break down two characters that have a lot, but also pretty much nothing in common: Godzilla and Barney the Dinosaur. What kinds of shapes make one look like a fearless killing machine and the other look like a friendly hugging, uh... machine?

Attached Image: BarneyGodzilla.jpg
Also, Godzilla has three fingers.(Barney image source, Godzilla image source.)


Think about it, both characters are T-rex-like monsters designed around the fact that a guy had to fit inside… but they’re on the opposite sides of the appeal spectrum. Why? It has a lot to do with one having smooth curves while the other is more angular with parts that are downright sharp (there are other reasons, which we'll get into later). At a fundamental level, this has to do with our general comfortableness with round organic shapes versus our discomfort with sharp angularity. It's no coincidence that "bad guys" tend to have spikes coming out of every concievable surface (Bowser in Super Mario Bros being the archetype), while "good guys" like Mario himself, tend to be, well, soft around the edges. When Sonic the Hedgehog was concieved as a cooler, more mature version of Mario, it's no coincidence he designed to be signicantly sleeker and spikier than Mario. Let's take a look at Barney and Gozilla again, this time in silhouette:

Attached Image: BarneyGodzillaShape.png
Evilness of a character is correlated with how painful the action figure is to step on.


Silhouettes are very closely tied to the shape of an object, and are a great way to break down the shape of a character. Apart from any any connotations of the shapes used, if a character does not have a distinct silhouette compared to other characters, it’s not a very good design. Some artists even go so far as to start with the silhouette and move inward to flesh out their subject. Reducing an object to just the silhoutte can also be a great double check after it's already started to make sure it's looking right.

In summary, when thinking up designs for your games, make sure you account for shape and form and connotations those shapes often have to get a design that conveys what you want it to. Also keep in mind that things are largely recognized by shape, so objects in your game should have distinct shapes in order for the player to identify them easily. Spikey the Sea Urchin as a protagonist, outside ironic appreciation, probably wouldn't have a lot of appeal among facebook gamers.

TL;DR: Everything is made of shapes and forms, and different kinds have different subconcious connotations.

Anatomy and Proportions


Figure drawing is often considered to be the most difficult field of drawing, since people are structurally complicated masses of interconnected cartilage, muscles, bone, and skin. I’m not going to go into super detail since I don’t personally have a ton of experience, but there are hundreds of books and websites dedicated to figure drawing. The essential idea is that there are certain rules and relationships in terms of length, size, and position of anatomical features, which is important because anatomical errors stick out. The more stylized a figure, like Mickey Mouse, the less important strict adherence to anatomy becomes, but it's a good idea to study realistic figures since by knowing the rules, you'll be able to bend them better.

You can think of human proportions as essentially shortcuts to get close to ideal anatomy by comparing the size of different parts of the body to each other. There are specific proportions to measure pretty much every part of the human figure, but the usual starting point is the head. Humans in real-life are around 7.5 heads tall, though often this is rounded to 8 to make a slightly more idealized figure:

Attached Image: EightHeadMan.png
There are many, many examples of available of this kind of diagram. Google is your friend!


Changing the size of the head of a character compared to his/her/its body can have a pretty big impact on how that character feels. Big heads are more child-like, and so are more associated with friendly characters, while small headed characters feel more adult or even grandiose. Yet again, Godzilla and Barney help us out:

Attached Image: BarneyGodzillaProportions.jpg
Godzilla might seem more mature, but Barney is waaaaaay creepier like this.


TL;DR: For people to look right, they have to follow certain rules regarding proportions, and messing with different proportions can change the "feel" of a character.

Pages to get you started: Proportions Guide by FOERVRAENGD, idrawdigital Tutorial: Anatomy and Proportion

Perspective


Perspective is all about creating the illusion of depth on a 2D surface by altering the appearance of shapes and forms, and is a pretty big subject so forgive me if I split it into sub-headings.

Geometric Perspective


Most 2D games simply avoid dealing with what I like to call “Geometric” perspective for the simple reason that implementing true-to-life perspective would be insanely time consuming for creating 2D art for games. Games like to cheat their way out of that problem by adopting unrealistic viewpoints, such as assuming everything is seen perfectly form the side (like a 2D Platformer), or from an isometric viewpoint which is no less realistic although more subtle in its unreality. I want to go over it because it’s probably the hardest overall principle to truly understand, and even a very basic understanding will get you vastly better results.

The Vanishing Point forms the basis for most formal perspective and is based around the idea that parallel lines appear to converge onto a single point as they recede from the viewer. LOLwut you ask? Like this:

Attached Image: Perspective Rail Plain.jpg
This would be a more dramatic example if there was an oncoming train.Image from Wikimedia Commons


Notice how the parallel lines (real and implied) converge? Maybe this will help:

Attached Image: Perspective Rail.jpg
So I could have added more red lines, what of it?


Red lines converge on the vanishing point. Got it. What you also see dividing the earth and sky is the Horizon Line, which happens on infinite (from the viewer’s perspective) planes. Vanishing points and horizon lines at their core enforce a really a simple idea: Things that are far away appear smaller than things close up, and the closer side of an object will appear bigger than the farther side. The above example uses one vanishing point, but there are really as many vanishing points in a scene as there are sets of parallel lines, with each set having its own vanishing point. Sound complicated? It definitely is, which why scenes are generally simplified down to one-, two-, or three-point perspective.

What normally happens with one-point and two-point perspective is that one or the more sets of parallel lines are assumed to stay parallel forever and never converge. Here’s an example of a cube and a cuboid in one point perspective:

Attached Image: Onepointperspective.jpg
That's right... pencil and paper, sucka.


Note how the horizontal and vertical sets of edges are perfectly parallel. Now, here’s two-point perspective:

Attached Image: Twopointperspective.jpg
It's traditional when you're starting out with perspective to lightly draw the other side of the objects as well to get a better feel for the 3D-ness.


Here, the set of edges that were previously perfectly horizontal now get their own vanishing point. The vertical edges stay perfectly parallel. Finally, here’s three-point perspective:

Attached Image: Threepointperspective.jpg
Three-point perspective pretty much entails epic-ness, at least in terms of height.


Now all edges get their own vanishing point. Good for them, right? It should be noted that vanishing points deal parallel lines the best, but by drawing guide lines or even full boxes you can get a better idea of how to approximate depth for complicated shapes. One, Two, and Three-point perspectives are by far the most common and useful, but there’s at least one artist who has used six-point perspective to create crazy spherical scenes.

There’s an important trick to drawing tubes or any circular object in proper perspective, since circles in perspective deform in special ways. Circles look like ellipses when they’re viewed obliquely, the more oblique, the more squashed the ellipse:

Attached Image: CirclePerspective.jpg
I cannot tell you how many people don't get this, so seriously and for real, circles turn into ellipses.


A simple rule is that when you're looking up at a cylinder edge (like the roof of a round building), the curve bulges up. When you're looking down, like at the base of telephone pole, the circle bulges down. The line through the middle of this image is the horizon line:

Attached Image: CylinderUpDown.jpg
This would have been a perfect candidate for shading to add depth, but we'll get there.


However, you should remember than many 2D games avoid geometric perspective problems by picking viewpoints (from the side, perfectly top-down) that minimize the need for it.

Foreshortening


A common perspective art concept in figure drawing is called foreshortening, which comes up often with how parts of the body appear in perspective. A fist held out at the viewer will not only appear bigger than it would be held at character’s side, but it eclipses a huge part of the arm, too. I’m terrible at figure drawing so this won't be the most professional-looking example ever:

Attached Image: Foreshortening.jpg
Seriously, I suck.


Often, artists eyeball foreshortening for characters simply because laying out all the vanishing points would take too long. But for your edification, here's forshortening with vanishing points and cylinders, which are often used as proxy forms for limbs:

Attached Image: Cylinder perspective.jpg
At least I can draw cylinders good...er, I mean "well".


Keep in mind that characters, human characters especially, can be thought of as a series of simpler objects which are easier to comprehend. Sketching out characters as a series of tubes connected by joints before filling in the detail isn't uncommon.

Page to get you started: idrawdigital Tutorial: Forshortening Tricks

Overlap and Parallax


Overlap is very simple: closer objects will overlap and mask farther objects. It's very important for 2D games since it's a very simple way to show the player their relationship to objects. Let's take a quick look at an extremely simple example:

Attached Image: Overlap.png
Also known as the weird hills in the background of every Super Mario game.


From this set of lines you perceive the circular thing (a bush?) on the right is in front of the others, while the tallest one is behind. This effect is sometimes called the "T-rule" since the line of the object in front forms the top of a T compared to the object behind. It's simple, but pretty powerful. In this example, all the T's are updside-down:

Attached Image: T-rule.png
More like ASCII Code 193 rule, amirite?


Parallax is another important perspective effect having to do with the relationships of overlapping objects. Parallax essentially is that objects that are far away appear to move less when the viewer moves, compared to closer objects. Parallax is great for 2D games because it’s pretty easy to implement, and you have no doubt come across it. Wikipedia actually has a pretty decent article on using parallax in games, and I'd hate to waste your time regurgitating it.

Atmospheric Perspective


Since 2D games often intentionally violate regular perspective rules for the simple reason that it’s easier to draw stuff for them, they have to rely on other means to get the idea of depth across. By making objects that are supposed to be far away from the viewer appear more washed out and less detailed, you can easily make the brighter, sharper looking things in the foreground appear more distinct. Here’s an example from real life, in a picture I took while visiting the gloriously smoggy People’s Republic of China:

Attached Image: AtmosphericPerspective.jpg
For real, it's pretty smoggy over there.


You can also see the parallel line perspective effect, although in this case the main vanishing point would be off to the left of the frame. The game applications are pretty staggering. Almost every 2D platformer ever made uses atmospheric perspective. Take this screenshot from Super Mario World:

Attached Image: super-mario-world.jpg
Also, overlap and parallax! Booya! Super Mario World Image Source


Notice that the farther in the background an object is, the more washed out it looks. In particular, looking at how dark the outlines are tell you how close they are to the plane of the player. This also folds directly into the idea of contrast. Contrast can tell the player what’s important and what’s not. Take a look at that Super Mario World screenshot again. Blue hills that are lightly shaded? Not important. Pipe with a white highlight fading to total black? Important. The only bright red thing on the screen? Super important. Remember, interactive parts of a game should always stand out from non-interactive parts unless there's a specific reason to obscure something from the player.

Pages to get you started: ArtyFactory.com Linear and Aerial Perspective, perspective-book.com Tutorial

Breaking Down Color


Color is a tricky thing, and one of the more subjective parts of art in general. Some colors look better to some people than others, and color combinations and connotations do not transcend cultures. White might be the color of purity in the west, but in Japan white often stands for death. However, there are a few basic ideas regarding color that will help you out in understanding what’s going on in your art. Let’s start with thinking about what makes up a particular color.

Hue, Saturation, Brightness


Note:  
There are many ways to break down color, but this one I think is the most helpful for beginning digital artists.


Let’s start by comparing two colors:

Attached Image: RedBlueBase.png
Red vs Blue, get it? It seemed pretty clever at the time.


Red and Blue. They aren’t the same color? Pretty simple, right? Well there’s actually a more precise term called Hue. The left square has a red hue and the right one has a blue hue. Other hues include green, orange, purple, and so on. While hue may seem just a redundant term for color, it’s not because the amount of any given hue in a color can change:

Attached Image: Saturation.png
Red vs Less Red.


So they are both red, but how are they different? The one on the right is just kinda... washed out. The term we’re looking for is saturation. Saturation is basically the term for how colorful, um, a color is, or how much hue it contains. I like to think of saturation as a measure of how much gray there is in a color. No gray = saturated. Lots of gray = unsaturated. So in this case, the square on the left is a fully saturated while the one on the right is desaturated. Pure gray is simply a color with no saturation.

Saturation is the most devious of color attributes for beginners to get the hang of in my opinion. Just be aware that saturation has a big impact on the “tone” of your art. Highly saturated colors tend to look more, well, friendly when used in large amounts, where desaturated colors are associated with grittier style.

The last attribute is Brightness. It’s much more straightforward - it’s just how bright the color is (sometimes the term "value" is used instead, no biggy). Here’s the same red as above, but with a darker version:

Attached Image: Brightness.png
Same red, but darker (not desaturated).


The relationship between brightness and saturation takes a little getting used to, since they can appear to overlap:

Attached Image: SaturationandBrightness.png
I like drawing spaceships and explosions, but I also secretly like magenta.


Here’s an example of how color can affect the tone of a game, with Castlevania: Lords of Shadow set against New Super Mario.

Attached Image: Mario.jpg
Also note the lack of gibs and bloodsplatter you'd expect a Mario that size would generate stepping on a goomba. Image Source

Attached Image: Castlevania.jpg
Nothing clever, just wanted to point out how well those bright status bars stand out from the background. Image Source


You know what also relates back to color... Barney and Godzilla! Whooo! So anyway, think about the ways color makes them so different in terms of hue, brightness, and saturation, and what would happen if one or more of those attributes changed. What would happen if you left one attribute alone but traded them between the characters? Would a gray Barney still seem huggable?

Attached Image: BarneyGodzillaColor.png
There is no escape from the Godzilla-Barney comparison!


RGB in Brief


Congratulations! You now understand HSB (Hue Saturation Brightness) color (sometimes the "B" is swapped out with the a "V" for value, but the meaning is the same). Pretty much any image software can use that definition along with Red, Green, and Blue (RGB), and Cyan, Magenta, Yellow, and Key /Black (CMYK). I think HSB is a much more straightforward way of understanding what’s happing with colors, especially regarding how bright and how saturated a color is, which is what you need when you’re working on shading. You will have to work with RGB color in different applications however, so let’s review that briefly.

RGB simply describes colors in terms of Red, Green, and Blue, since all colors can be described as a combination of those three, which has to do with how your eyes process color information. Take some time and monkey around with color values to see what both the HSB and RGB values change, and how they related to each other. Here’s the standard RGB overlap diagram (notice what happens when the colors overlap):

Attached Image: RGB.png
Also known as an additive color model, since colors are creating by adding light, rather than absorbing light (subtractive model)


Also note how when all three are combined, it makes white. You can think of all the colors playing in a tug-of-war, so when they all have the same value, the hues cancel each other out and make gray. But the colors different combinations yield can be kind of confusing, so for working on artwork, I would lean towards HSB.

The Color Wheel


Now that we have defined what a color is, let’s start looking at color combinations. Color theory is complicated and pretty subjective, so what follows isn’t meant to be an ironclad explanation, but a guide of what to think about. The color wheel forms the basis of most color theory. It’s basically an arrangement of hues by their perceived relationship, with Red, Yellow, and Blue at the thirds of the wheel (the so-called primary colors), with Green, Orange, and Purple (secondary colors) between them.

Attached Image: ColorWheel.png
Wheel of Color would be a really stupid game show.


Hues are also commonly split into Warm and Cool categories, termed color temperature, with red-yellow colors being described as warm and blue colors being described as cool, as below:

Attached Image: Temperature.png
Spike Lee's film Do the Right Thing was oranger than normal to make it seem "hotter." I learned that in a film class, and it seemed relevant to bring up.


I added a zone of iffiness, since those colors are kind of borderline but I’ve seen the yellow-green as cool and the magenta color as warm. The important thing to remember is that cooler colors are associated more with darker shades, so a cool shadow will be perceived as darker than a warmer one that is technically the same value (brightness).

Other relationships between colors can be explained using the wheel, too. Analogous colors are simply hues next to each other on the color wheel, like green, yellow, and the colors between. Complementary colors are colors (hues) 180 degrees from each other that appear more vibrant when used together. You’ve probably seen them in action, even if you didn’t know why; blue and orange has even become a trope.

Attached Image: ColorWheelColors.png
If you're using Firefox, look at the icon. Complementary colors strike again!


When working on game art, think about associating colors with specific factions or enemies and environments or levels. Color-coding isn’t mandatory, but you can use it as a way to bend player perception. Think of a set of colors for bad guys, but use unique shades of those colors for specific enemies, for example. But with using colors, don’t be afraid to experiment and try lesser-used colors. Using any reasonably-advanced art program, like GIMP, it’s actually easier to change color than any other attribute. It's one of the few things you can change after completion relatively easily.

TL;DR: Colors can be divided and related to one another in different ways, and different combinations of colors can make their individual component colors look different, for better or worse.

Page to get you started: Color Theory for Designers

Lighting and Shading


Note:  
I’m going to be using lots of pixel art examples, but they basic concepts are just as applicable to any other type of 2D art.


Light Sources


The most common issue I see with beginning artists is that they don’t understand lighting. Shading a drawing generally means to apply different shades to create the illusion of light in a drawing, just like perspective is the illusion of depth. And just like in perspective, you have to create some 2D stand-ins for mimicking real-world effects. There’s really only one rule: Light has to come from somewhere. It doesn’t just appear, which means that laying down colors in a drawing will always look wrong. What happens pretty often with beginners is that they try to “shade” their art, but don’t understand lighting, which results in objects that look like this:

Attached Image: PillowShading.png
Seriously, don't do this.


Compared to the unshaded version:

Attached Image: NoShading.png
You might even be better of with this version than the one above.


It’s called pillow shading, and it can be easy to do without thinking about it. It can seem natural to just color from the outside in with darker shades… but it looks completely fake. In order for lighting to look right, it has to be directional, with light/dark shades being chosen depending on the whether or not a side of the subject faces the light source(s). A light source could be the sun, a lamp, a boiling hot lake of molten lava, etc, but doesn’t have to be something that specific. For example, you can just assume almost all light is coming in at 45 degrees from infinity, and your subject will be shaded well enough for most applications. For animated sprites that are going to be used in a variety of environments, a little vagueness helps keep the sprite from looking too out of place on any background. Here’s an example using a light source coming from the top left somewhere:

Attached Image: AnchorShading.png
This also requires you to think about if there's a part casting a shadow over another.


Parts facing the light source are lighter and parts facing away are darker, couldn’t be simpler, right? Of course, it’s not always that simple…

Flat vs Round


Keep in mind that flat surfaces generally have almost the same shade across their entire surface, where curved surfaces will have a gradient of shades. Here’s a neat real world example (with fighter jets!) of how this works:

Attached Image: F-117.jpg
An F-117. I actually grew up with these flying over my house.


Notice how all the panels have the same shade unless they’re actually in the shadow of a different part of the airplane? Now, let’s look at a more normal jet (an F-15):

Attached Image: F-15.jpg
Whooo America! Except this one is actually Saudi Arabian - Gotcha!


Note:  
Relate back to the Shape and Form section. Which one of these bad boys would you cast as the good guy and which as the bad guy going on looks alone?


Here, you can see an actual gradient transition between light and dark. Check out the left wing, it’s an almost perfect gradient. Now let’s go back to that pillow shaded mess from earlier:

Attached Image: PillowShading.png
Attached Image: SimpleSHading.png
The light source for the cube and sphere aren't quite the same. What's different?


Note the cube only really needs one value per side at this scale, while the sphere requires many more values to mimic the gradiated nature of shadows on curved surfaces.

Bounced Light


The kind of shading above is simplified since light can also bounce off surfaces and light up shadows. This often means that the part of the shadow that is farthest away from the main light source is actually lighter than the other parts of the shadow. This is most noticeable when an object is extremely close to a reflective surface, or is just plain big. This is the classical example of how this looks:

Attached Image: SphereReflectedLightPencil.png
Also note how the shadow it casts also gives you a better sense of depth.


Here’s a couple digital examples of the same thing.

Attached Image: SphereReflectedLight.png
If these spheres were sitting on a blue surface, the reflected light on the cube would also be blue.


The left is an example of bounced light located off the edge, which happens with highly reflective surfaces. The shinier the object, the more obvious and distinct this bounced light appears. Speaking of shininess, lighting and shading can not only reveal an object’s form, but also its texture.

Hue Shifting


Hue shifting relates somewhat to bounced light, and comes up with pixel art a lot. It basically refers to how the hue of a shadow or highlight isn’t necessarily just a darker or lighter version of the base color. The most common usage is for objects that are supposed to be in the sun. The direct sunlight tends to be a little yellow, but the blue sky reflects blue light into the shadows, so you have yellowish highlights and blue-ish shadows.

Attached Image: HueShifting.png
This also relates back to warm colors and cool colors, with cool shadows and warm highlights.


This idea becomes more important when you have multiple light sources (like underlighting from lava or whatever) that's a different color from other light sources. Remember, colored light affects the color of the object. But hue shifting can also be simply a stylistic choice, and by exaggerating the effect or substituting complementary colors you can get some pretty neat effects:

Attached Image: StylizedHueShifting.png
Doing this too much will make your game look like it's trapped inside Instagram.


Keep in mind that shadows can also appear to be less saturated, and that less-saturated colors can appear darker than they really are. There’s not a total consensus on hue shifting in the art world, so find a way that you like, but keep in mind the more you shift, the more surreal your art will seem.

Shading and Texture


The texture of an object affects how light bounces off of it, so naturally changing how you shade something can also change what its texture looks like. There are specific terms for certain types of textures that will help you in thinking about different types of texture, too:

Attached Image: SphereTextures.png
Knowing this will let you buy paint without having to ask the forlorn-looking old guy working in the home improvement department for help.


A Gloss surface is just a shiny surface, where the light bounces off a particular angle of the surface almost all in the same direction with very little scattering. What that means is the brightest part is very bright (since you’re getting lots of light from that one place at once) and the darkest part is very dark (since the light is sticking together and going somewhere else). A good example of a gloss surface is the body of a freshly waxed car.

A Flat texture is the opposite, where light scatters off the surface at many different angles. That means the brightness is more even, since no part of the object is directing all of its light in a particular direction. Old car tires are a pretty good example of a flat surface, as is modeling clay.

A Matte surface is somewhere in-between. It reflects light in chunks, but scatters a lot too. A lot of plastic has a matte finish, like most keyboards.

So when you’re drawing, think about what kind of material that you’re shading is supposed to be. Is it shiny metal, or flat cloth? You don’t want your medieval characters wearing plastic-looking garb, and you probably don’t want your sleek sci-fi armor to look silky soft.

TL;DR: Light has to come from somewhere, or look like it does, for 2D images to look right.

Page to get you started: Android Arts Tutorial by Niklas Jansson

Practice Makes Perfect


So now that all those concepts are laid out, what are you supposed to do? Well, start trying stuff out! Don't be afraid to jump right in. It really is true that anyone can draw. Sure, some people have a particular knack, but the biggest separator between a bad artist and a good one is how much they’ve practiced. You gotta do it a lot to get good at it. Practice, but practice smart. Game projects also provide a lot of opportunity for practice, so if you have a project in mind, start creating art for it if you haven’t already (after reading this article all the way through, though). If you don’t have one in mind, find one! Even the smallest game project has enough art that you’ll get enough practical experience that by the next one you’ll be noticeably better. And fortunately for non-artists, game art doesn’t have to be Italian renaissance level quality to be functional.

Three P’s: Pencil, Paper, Practice


The only way to get better at drawing is to practice, and the cheapest and easiest way is to do it with good ol’ fashioned pencil and paper. It might be tempting to simply stick with digital-only for all steps in the design process since that’s where your final product will be, but resist! Drawing by hand gets you more involved in the process and will help you avoid some of the more dangerous habits that relying on software tools will get you. Those tools can be great and it might seem easier at first to make sprites using the square tool, but trust me when I say that you would do ridiculous and ugly things that would be impossible to do with a pencil sketch. There will be plenty of time later to mercilessly exploit tools, tricks, and shortcuts when you’re conscious of the basic principles. It might seem awkward at first if you’ve gotten used to doing things digitally only, but pencil and paper are the starting point for artists the world over for a reason.

With that in mind, I recommend buying a sketchbook, some pencils (I like mechanical pencils, but it doesn’t really matter at this level), and a separate eraser like a Magic Rub since you’ll be erasing way more often than the #2 pencil designer gods intended. You don’t absolutely need a sketchbook - the real key is that you need to practice, and to that end the margins of your class notebook or a sticky note at work aren’t worlds apart. A sketchbook does let you keep all your work in one place, though, so you don’t have to hunt down that one really sweet design for an enemy that you put on the corner of your homework or a memo at work.

Sketching


The key to pencil sketching is to think of all the lines as temporary suggestions rather than permanent representations. What? Don’t get attached to your lines! Sketch over them, erase them, make new ones without regard for old ones. Of course, make all your lines fairly light when doing this. Start with the basic shape of your subject, and add detail incrementally. Most things can be approximated by basic forms, namely the sphere, the cylinder, and the box, which is especially useful for drawing objects in perspective. For example, don’t draw a more or less finished head, then move to the chest, then arms, then legs, etc. because focusing on detail will make you lose sight of how those parts fit together. Start with a big rough sketch of everything together and add detail on top of that. Don’t get attached to any lines in the beginning - don’t be afraid to ignore lines and draw other lines on top until you get an overall shape that looks good, and don’t be afraid to simply restart if things aren’t going your way. This video illustrates this perfectly, as the artist builds the basic framework of the character, puts some rough shapes on top, the proceeds adding more and more detail - and erasing and re-doing parts that look bad. Here's a little image out of one of my old sketchbooks, complete with funky-looking man:

Attached Image: Figure Drawing.jpg
Another figure - Don't look! Um, I guess he has a huge zit on his face? What was I thinking?


Draft, Draft, Draft


It might sound crazy at first, but you should sketch at least three versions of any character/object/setting before committing to a digital version to use in a game. Major studios often create literally dozens of concepts for a single character before even thinking about picking one. Even for background assets like trees or bushes that aren’t interactive, sketching three versions to get one final asset is not an unusual ratio. Just like turning in the first draft of a term paper, making the first version the only and therefore final version is a huge risk and not one worth taking. By trying three different ways, you can also then take the best parts of each version and combine them to make a stronger final version.

Here's a simple example of a couple cool space helmets, both of which are different than the final design below (and based on even rougher earlier sketches):

Attached Image: HelmetSketch.jpg
Shout out to Anatomy and Proportions section since it's hard to make a helmet without knowing how skulls are shaped.

Attached Image: Helmet.png
The top part should really be casting a shadow on the visor... oh well.


This might seem burdensome, so it’s important to keep in mind that these sketches are rough, rough, rr-rrr-rooouuugh drafts. Don’t spend time on them. In fact, the less the better many times, since the longer you dwell on a piece, the less flexible you become about revising it or making the next version different. Leave the detail out at first, just get the general idea down and move on. If you feel like it, you can then go back and add more detail to your first contender.

Be prepared to draw, a lot, and be prepared to get a little frustrated sometimes. If your art looks iffy at best to you, congratulations, you are a human being. Your next drawings will probably be better, and the ones after that better still. Remember, getting frustrated is standard - if drawing was as easy as it looked, there wouldn't be this article. In fact, if you aren't getting at least a little frustrated drawing for a while, you either aren't pushing yourself or your contacts fell out and you've convinced yourself that blurry mess was totally your intention all along.

TL;DR: Draft all your game art by sketching out several versions first with pencil and paper, without worrying about being perfect.

Related Page: Sketching: The Visual Thinking Power Tool

Conclusion


Hopefully now that you are familiar with these concepts, you can go forth and create with the knowledge you need to not suck. I mean, be incredible! Seriously though, creating art isn't easy and it takes a lot of practice, but just having some idea of these concepts is fantastic. As I said in the introduction, most of the information here is in the context of creating 2D art for games, and doesn't necessarily reflect what you would get in an Art 101 class.

Further Reading


I've included links within the text, usually at the end of relevant sections, but if you're interested at all in any further information about game art, particularly character creation, I have to highly reccomend Chris Solarski's book Drawing Basics and Video Game Art. This article owes a lot to him and his book, and you can read some of his writing on Gamasutra.



About the Author(s)


Mark "Prinz Eugn" Simpson is a hobbyist game artist who specializes in mechanical design and pixel art. Most of his art can be found at his deviantart (http://prinzeugn.deviantart.com/).

License


GDOL (Gamedev.net Open License)




Comments

Thank you for this awesome article! It's a very good starting point for an adventure with art :)

Wow, I want to go make my own awesome art now...Thanks for the education.

This is one of the best articles i have read about improving the concept art, excellent job keep the good work going!

Thanks! I use this information to level up my pixel art skill. And after several years I achieved results, which can satisfactory to=))

This is a great article, I lots of great information for beginners like me. I am going to re-read it catch anything i missed

Glad you guys like it! Let me know if you have any problems or if there's anything you find vaguely confusing (comment or PM me) so I can update it.

One small typo:  in the image for "think about shape" Barney is described as "roud" rather than "round".

 

Great article, thanks so much for taking the time to write it!

One small typo:  in the image for "think about shape" Barney is described as "roud" rather than "round".

 

Great article, thanks so much for taking the time to write it!

 

Fixed! One of my friends on Facebook also pointed out I swapped RGB and RBG in a few places, too.

 

Glad to help!

This article seems very useful! I've got it bookmarked now and plan on reading more deeply into it later.  Thank you for writing it!

 

For now, I noticed a typo:

"Let's take a look at a another particularly good example..."

There's an accidental 'a' before 'another'.

 

If I find more later, I'll let you know.  :)

Absolutely incredible! As a long-time programmer, I always relied on my artist friends to make my game art for me. But now I want to break that trend, and this article really answered a lot of questions. On a side note: you have a great sense of humor! Thank you! :)

Very good article! Pretty much how I would explain it all. Definitely good job emphasizing practice above all else.

On thing that I would recommend you revise, is your sudden shift from saying "value" to suddenly saying "brightness." Perhaps also state that most art programs use the abbreviation "HSB" over "HSV."

Otherwise, fantastic! A great starting article for beginners!

Great article, I'm horrible at game artwork and am trying to read up on the topic to get better. This really helps =)

I can't help it, i love barney

this is cool article 

Amazing article. Thank you for sharing!

One year anniversary! I will try to fix all the remaining typos this weekend.

 

Thank you all for the support!

 

EDIT: Fixed! Just comment if you have any more feedback, I'll be notified automagically.

Great article!  Extremely helpful for folks like me who want to do their own graphics, and still look decent :)


Note: Please offer only positive, constructive comments - we are looking to promote a positive atmosphere where collaboration is valued above all else.




PARTNERS