If you’ve read my previous blog post, you now know how easy it can be to create basic game art. The next step is to add proper lighting, textures, and details. Whether you want to draw rocks, some foliage, or a giant robot, there’s a trick for every effect. Let's dive right in and have a look at different shapes, colors, textures, and other details!
Every drawing starts with a few basic shapes. By rotating, scaling, and positioning these shapes, you can create complex compositions. Try to imagine how a complex figure is built using only a few basic shapes (like displayed below). This will be a great starting point for your sprite.
Create and combine basic shapes to create complex objects.
Sometimes you want to make it clear that a shape or sprite is a certain material or has a specific use. When working with 3D models, it’s easy to tweak material settings and get them looking exactly like they do in real life. When creating 2D art, you’ll have to perform some tricks. It all starts with the color.
Same sprite, different colors (and thus materials).
As you can see in the image above, the same texture is applied on blocks with different colors. Most players would figure out what these materials are solely based on the color. Textures are equally important however, so let's see a few tricks.
Adding textures and patterns to an otherwise boring surface can add a bit of detail without straying too far from the overall look of the sprites. The easiest way to create a texture is to randomly duplicate a tiny sprite along the surface.
An egg shape, triangle, tiny leaf, or even just a rectangle can create natural looking textures for foliage. Try to experiment using different shapes; it doesn’t always have to be realistic!
A few different ways to texture foliage.
These techniques can be applied to other materials as well. Scattering the details randomly is great for natural materials, but for man-made, it’s best to follow a grid or structure.
Creating seamless textures can be hard, but there’s a trick. Simply create the shape you want to use for the texture, duplicate it in all corners, and remove the overflowing lines. Then, fill the rest of the shape using the same shape. Now, you can place tiles together and the shapes will align perfectly.
Sample textures for various materials and patterns.
Try different shapes for brick walls, cobblestone roads, or wooden planks. Make sure to also duplicate any shape that isn’t in the corner, but overflows on either side.
Figuring out where shading should be applied can be a difficult process, especially for artists with little experience. A common mistake is to apply ‘pillow shading,' a technique where shading occurs in all directions. Assuming there’s only a single light source (the sun), shading should be applied in a single direction.
While not common practice, it can make things easier to have the light source directly above the sprite.
If you’re planning to flip sprites horizontally, you can save some work by making the source of the light directly above the object. This isn’t common in art, but it will save you some time creating multiple sprites.
Imagine your sprite in 3D for a guide where shadows are cast.
Unsure where shadows and highlights should be applied? Try to picture your sprite in 3D, that way you can draw an imaginary line and see where a shadow would be cast, and where highlights are needed.
Add depth to metal surfaces using shadows and highlights. To add even more detail, you can add bolts and screws. These come in all shapes and sizes, but the easiest way to draw one is just to create a circle. You can add a darker diagonal line (or two) for a bit more detail.
Most metal you’ll come across isn’t brand new and has some wear and tear. Create a single line and duplicate it below the first line, make the top line a darker color and the bottom line a lighter one. You can create straight lines, or go wild and scribble some lines for more realistic scratches.
Metal plating can be done by adding random shapes of darker and lighter color, adding screws (or even simple circles) in the corners to convey the plating effect.
Various ways for adding details to metal surfaces.
Create a specular effect by drawing several diagonal lines, then change the color to a slightly lighter one than the background. If you’re more familiar with drawing tools, you can use a gradient (from light to transparent) for more realism.
Painted metal often chips along the edges, so add ragged edges (a combination of triangles, or random geometric shapes) around the outline and show the bare metal color.
When drawing either paper or fabric, try to stay away from straight lines. Draw a line and bend it slightly, then duplicate and flip it to create a wavy line. Use these wavy lines to create the shape you need, as shown below.
Add tears to paper by adding randomly placed triangles along the edges. Place a triangle and cut away the shape inside. Try different sizes and positions for a random effect.
First create the shape using wavy lines, add random triangles for tears, then add fold lines that don’t overlap.
Maps and flyers often get folded, and there’s an easy way to give an effect like this to your sprite. Simply draw a grid of lines on the sprite, but never let any of the lines cross. Cut away (or erase) the crossings. Pick a slightly darker color than the sprite itself for the grid.
If you’re drawing cloth or a fabric (sails, awnings, tents etc.), you can add patches or cuts to add wear. This works especially well if the material needs to look a bit older.
When drawing things made out of wood, it’s a good idea to first draw a couple of boards, using those to build the structure. Use straight boards for nearly-created objects and change the size, position, and rotation to random values for crooked or old objects.
First create planks, then use those planks to create structures.
You can also apply some techniques for other materials to wood. Torn paper, screws, and scratches work really well for making wood look a bit more natural.
There are a few simple ways to add moss to stone. The first is to create small stars and randomly placing them along the surface, preferably close to the sides. A different way is to create edges (just like the chipped metal) using a green color.
Adding moss, cracks, and edges to stone or rock.
Similar to the scratches of the metal, you can add cracks and edges to stone.
By now you’ve learned a few different tricks to create sprites, apply shading, and add textures. There’s much more to explore however and the best advice I can give you is to try and experiment yourself. If you keep experimenting (and failing!), you’ll keep learning and your next sprite is going to look better than your previous. Good luck!
If you enjoyed this post, check out my other articles:
Kenney Vleugels is an artist from the Netherlands who shares game assets (sprites, models, audio, fonts and more) with game developers. Recently, he founded Pixeland which is a physical community hub where every game developer in the world is welcome to learn, teach, meet, work, and play.