UPDATE: Experience my poor art in a game, thanks to JonathanW!
I get peeved about things for no good reason a lot. One of those things is crappy art in games. I’m not really a great artist so I don’t know how to make good art, but I do know what I don’t like about bad art, so I decided to complain about it in the form of this exciting tutorial! I figure knowing what to avoid is at least as important as knowing what to do, so here is my guide to making really bad art for your game!
Color
Picking the wrong colors is obviously an important part of crappy art. The wrong color scheme can make people stop playing your game, or even not download it at all just based on the screenshots. It’s good to know how you can encourage that behavior.
Avoid complementary color schemes like blue/yellow, green/red, orange/purple at all costs, as they provide a good contrast and balance of hue. The mockup above is not the best example of this, as it manages to find balance between the green of the grass/foliage and the brown (red) of the wood, as well as the yellow sun against the blue sky. An easy way to avoid picking complementary colors is to use a scheme with only hues that are closer together, like nothing but green and brown.
Make sure to neglect the other laws of color balance, too: brightness, saturation, and contrast. The mockup again fails to totally break balance in brightness, as it contrasts the bright sun and grass with dark wood tones and black outlines. However, notice that most of the colors are highly saturated, with the fluorescent radioactive grass taking up a significant portion of the viewing area, successfully creating a palette that is a total eyesore. Also, the bright red on bright blue text in the upper left creates a clash that can literally cause your monitor to ignite if left on screen for too long.
If you use shading, always use basic photoshop gradients rather than drawing shadows by hand. Gradients look especially cheap and cheesy when applied to complex shapes. Make sure the colors are flat without any highlights, which are areas of lighter color on the side of an object closer to the light source, which create a sense of believable lighting. Same with shadows.
Detail
If you have picked a simple set of matching colors, or perhaps a minimalistic palette of black and white, don’t worry, because there’s still a lot of ways to go wrong. Detail is the way colors are put together on a small scale. Artistic styles are made and broken in the subtleties of how things are represented in your art. Use the following tools to achieve a feel of poor stylistic choice: geometry (perfect rectangles/ellipses/lines), complex textures applied to simple shapes, large soft brushes or special brushes, ugly fonts.
Flawlessly rendered geometrical shapes are quick and easy to make, and give a sense of inorganic coldness and unrealism. Carelessly applied textures or photographic imagery in an unrealistic world (like the bell peppers in the mockup above) add unnecessary detail, deprive the imagination of the ability to “fill in the blanks”, and instantly cause stylistic clash in your game. Very soft and unusual brushes in a single color turn game elements into cheap photoshop scribbles, again creating detail that destroys the imaginitive nature of simpler art.
Make sure to use as many of these techniques in combination as possible. The bigger the variety of art styles on one screen, the more conflicted the game world becomes, and the easier it is to break immersion. If one game element has a black outline, use a blurry outline on the others! Make some things flat-colored stick drawings and others photorealistic, so that it becomes difficult to imagine them interacting with each other.
Composition
Let’s say that despite your efforts, you ended up with a decent color scheme AND a consistent art style. You still have one last chance to ruin the game experience. Composition is the arrangement of parts of objects, scenes, or levels on a larger scale. Draw all objects in poor arrangement and out of proportion, and you’re sure to create distasteful art out of the highest quality graphics.
Composition is the art of directing the gaze of the eye around the scene. Break the flow of a composition by crowding elements together and leaving unnecessarily large gaps of space. Notice how the “health” text is huddled annoyingly close to the edge of the screen, even though there’s plenty of open space available for it. The bell pepper next to the tree nearly touches it, and creates a pocket of blue sky that traps the gaze of the eye as it moves across the scene. The sun is crowding the tree, with open space to the left of them, again creating compositional imbalance. With enough lack of practice, you will be able to create many more of these annoying layouts and pockets of space than I was able to in the mockup above.
The shapes and sizes of objects are another place to create disarray. Notice how the trunk of the tree is too thick for the size of the foliage implied by the blurry blotch. The roof of the house is slightly too large, making it look top-heavy and leaning to the right. The sun rays, in particular on the top and right, generate a subtle aura of awkwardness with their sloppy restricted shape. The bell peppers may seem unrealistically large compared to the rest of the scene, but giant versions of small objects are not so uncommon in games. A more jarring size imbalance is the fact that the tree with a trunk the width of a door is no taller than a one-story house. Furthermore, the doorway does not seem capable of accomodating the stick man’s head.
Conclusion
Armed with clashing colors, conflicting styles, and careless composition, you are now able to make the worst art indie games have ever seen. If you like, make your own ugly eyesore and post it in the comments!
Thanks for reading! Questions and feedback are welcome.
Also recommended: Better Programmer Art, the classic tutorial on actually making art.
Tags: art, how to, programmer art, tutorial
<- Sketch of me armed n’ ready for the compo
