character design theory

Discussion of techniques and methods to design characters as well as visual language and narrative concepts found in effective character design.

Super Mario AAA Concept Process

super mario concept art tutorial

Here is a step-by-step process of a Super Mario concept art I did for practice. Including some dirty Photoshop tricks.

Concept art smarts used:

  • Photobashing for quick character ideation.
  • Liquify filter for quick shape correction without repaints.
  • Custom brushes.
  • “Selective Color” adjustment for quick color correction.

Let’s go…

Alright, step one: Proportions and pose.

There are plenty of ways to play around with proportions an poses. From thumbnails and silhouettes to fast sketches. Sometimes you just want to grab the right reference from a stock library you can use. However, with stylized characters like this, a few tweaks are in order. Using just super quick and dirty lasso moves I shortened and thickened the arms and made his hands huge. No need to worry about ugly edges right now, they will be overpainted later.

To properly capture the plumber’s iconic likeness, I just pasted part of an official promotional artwork on top of my Frankenstein creature.

photobashing concept art tutorial

Step two: Drawing on top.

For now, I’m happy with my character build. Maybe I change stuff later, but I’m ready to go to the next phase. Always keep in motion and do what comes to you first. Anything can be tweaked later.

I reduced the build layer opacity to like 40% so that black lines on top are easier to read and started drawing on top of my custom anatomical reference. Using “overlay” in a layer above, I separate different grey values, using different shades of grey. Note how you can still see many snippets of the photos below, but pants, skin and shirt are separated by value.

photobashing and overpainting

Now, I fill in my drawing with grey tones where needed. Mainly using the color picker here and grabbing shades from the photobash layer below. A moment later

mario triple aa concept art

Step three: Painting high priority details.

Now, I’m starting to get anxious about nailing down Mario in a AA context, so I need a benchmark for the painting. I need to paint a part of this layout to get familiar with the level of detail and quality I’m aiming for. So let’s paint the head. While I can draw plenty of support from the shading data from the photobash – using the color picker – this step is just plain and simple painting. Sorry, no secrets here, just practice and patience.

concept art process

Step four: More tweaks and first paint layer.

The current state of the head tells me where I want this painting to go. I can now fill in all areas of the layout with the necessary layers of paint to move on. What it also tells me is where I need to tweak the pose and shapes. The more I work on a painting the more I’m able to see and fix. For the first steps I was really able just to go with the flow, knowing tweaks can be done later and now is the time to get serious about some stuff.

character concept art step by step

Lasso and repaints are used to reposition his arms, while the filter>”liquify” was used to sculpt the painting of the head into something more round full. Here is a comparison gif for the before-and-after. Note how I did not repaint anything for the new fuller shape, just moved things around. Oh yeah, and a second ear helped (which I literally just copied-pasted from his left ear):


More detailed painting. Just working myself through all the areas of the layout. For the sledgehammer I used a photo reference, to get it right. The Bob-Ombs and painted within a circular selection, to get the spherical shape right. The smut on his arm is made with the first use of a custom brush in this piece, only regular round hard Photoshop brushes until now.

anjin anhut concept art

Step five: Coloring.

Now that I’m happy with the value painting, let’s add color. I pulled up official Mario Promo art, to have quick access to offial colors via the color picker tool. The colors are painted on a new layer, set to “overlay”.

by concept artist anjin anhut

Step five: Final Retouch.

Finally, some retouching… Same stuff a photographer would do to spice up their shots. Color correction via image>adjustments>selective color. I added some cyan and magenta to the blacks, making things more vibrant. Fire is painted using custom brushes again. Super thin blue rim lights add the final crispiness.

values painting to color painting tutorial

I hope this was a fun insight into how I sometimes work. Keep practicing and show your stuff. Bye.

Like what you read? Please, share and consider supporting the site!

How To Tackle Character Design For 2D Games?

character design for 2d games, sprites and illustration and animation

This user asked:


I’d like to know how to design a 2D character for a poin’n’click adventure and animate it. What techniques and what software would you use? What would be the best resolution for common devies?Kind regards

-Johannes W.-

I’d like to expand on that question and answer this for all genres when it comes to 2D games, since there is nothing too particular about point-n-click adventures, when it comes to the art part. We have to think about two things: On the one hand there is your own artistic/stylistic preference – can’t really say much about that – but there is also production issues to consider.

Form follows function in character design as well.

Form follows function? What function?

A video game character needs to be appealing and to convey the themes and messages of the game. Alright. But the design should also enable the creative team to produce all the required content to make the character work ingame and in promotional art.

You don’t just want to go with your gut and taste and create Awesome McUbergamecharacter only to then later struggle to get all the animation done in the long run. You need to plan ahead and consider your resources and skills and come up with a design that is interesting but also production-friendly enough to allow you to even finish your game.

As an example, let’s have a look at one of the most iconic character designs for animation purposes ever, Mickey Mouse as created by Disney in the 1930s. Why does Mickey look like he does? Mickey’s form follows more functions than you might think:

character design for 2d games, sprites and illustration and animation

1930’s Mickey Mouse

  • A – Mickey’s design is almost completely made out of circular shapes. Circles and ovals are easy to draw by hand. You are also very unlikely to be struggling with perspective since there are no straight lines or angles to get right when it comes to perspective foreshortening or working with vanishing points.
  • B – Eyes are reduced to dots.This means there is no need to draw any other part of the eye except the pupils. If you want to articulate the eyes closing, you just squeeze the pupils flat to resemble shut eyes.
  • C – Arms and legs are bendy wobbly tubes. So no bones, no muscles, no joins. All limps look the same from all sides, they are never too long or too short. You just have to draw a thick black line from the shoulder to the hand and done.
  • D – His hands only have four fingers. Four fingers are quicker to draw than five fingers. Three fingers would not be enough to be articulate enough.
  • E – The white gloves have been invented to make hand gestures more easily readable. Turns out that you can best discern individual fingers, when they are draw with thick black outlines on a white surface.
  • F – The design uses a lot of completely blacked out areas. This means no details whatsoever in those areas to take care of. The front of his body looks exactly like his back or the sides, so no perspective to worry about either.
  • G – Clothing is heavily abstracted and there is no folding whatsoever. Easy to draw with just enough detail so that we accept the things on his feet to be shoes and the thing on his hips to be pants.

You see a lot of the iconic design of this character and his peers is beneficial to the production process. Remember that there is no such thing as a computer in the 1930s and each and every animation cell had to be painted by hand. This means any design decision that makes the character easier and quicker to draw saves time and money.

This is true for many designs for animated productions or comic books (where you would have to draw one character over and over again as well).

So let’s quickly go through a couple of production techniques and talk about designing with those techniques in mind…

Plain ol’ hand drawn animation

This is what most people understand when they think about animation. Frame by frame, drawn by hand. This started to be possible for games once the resolution allowed for it. Before that everything was mandatory pixel art animation.

character design for 2d games, sprites and illustration and animation

Monkey Island series / Deponia Series

Hand drawn animation is one of the most expensive techniques, since you have to produce a lot of content for each new frame. To minimize that cost it’s important to make clever simplifications. Try to find ways to work with very limited detail. Check this comparison between a comic illustration of the DC Comic’s character Poison Ivy with a similar version of the character but optimized for the 90s Batman animated series:

character design for 2d games, sprites and illustration and animation

DC Comics

Note how in the comics version her swimsuit thingy is comprised of individually articulated leaves. Think about the effort it takes to draw this and then look how they simplified that detail in the animated version. All that’s left of the leaves is the color scheme and the spiky shaggy edges where the legs start. It’s just enough to hint at the leaves material, but flat enough to be easy to draw. Same goes for her hair, which is almost reduced to a hood in the animated version.

If you want to go the hand-drawn route, I recommend going with a printable image resolution and then scaling it down for individual devices. Go big and scale down to be safe. …plus you can then use your game art for promotional material as well.

There are many pieces of software which you can use to produce hand drawn animation, such as Toon Boom or Flash.

How about pixel art?

I’d like to talk about two types of pixel art 16bit+ and 8bit. These categories are not technically accurate but work fine to separate two degrees of detail. The 16bit+ box is filled with pixel art (beginning in the 16bit console era and higher), where each pixel is carefully placed to create a low resolution image resembling a hand drawn piece of art. While 8bit is a collection of pixels, creating a distinctively blocky design.

Working with 16bit or higher fidelity follows the same rules as if you would be doing hand drawn animation, except for a few differences.

character design for 2d games, sprites and illustration and animation

Lucas Arts adventure classics: Maniac Mansion series and The Dig

Firstly, you can’t scale like you might want to. If the bitmap resolution of the sprite is not properly matching the screen resolution of the device you want to have your game played on, the computer needs to deal with that. This is either done by anti-aliasing, which interpolates the pixels and gives everything a kinda blurry appearances. Or anti-alias is turned off, which forces the computer to reshuffle the available pixels, messing your carefully crafted arrangement of tiny squares up. This is even worse when you try to rotate your bitmap.

Secondly, drawing with low resolution is more time consuming, than drawing freehand. You can not just draw a line, you have to build it. Each and every pixel needs to be in the exactly right spot. And finally – as a benefit – working with pixel art allows you to work with very few actual animation frames. This has something to do with viewing habits. Gamers are used to seeing pixel sprites with limited animation frames from back where it was technologically necessary to save memory, so you would get away with it today as being “authentic”.

When working with an 8bit aesthetic something weird happens…

character design for 2d games, sprites and illustration and animation

Legend of Zelda series / Legend of the Ghost Lion

Firstly, resolution becomes less of a problem. The individual squares you use for your character (your bitmap pixels) will be displayed so big on your device that they are comprised of many display pixels. This allows these squares to be scaled and rotated without loosing their shape or arrangement.

Secondly, the intense reduction of detail resulting from the extremely low resolution makes drawing easy again. To still have the necessary expressiveness, I recommend to give your characters really big heads, so you have more pixels available for facial articulation. Same goes for hands. And finally, you can be even more stingy with animation frames, since most gamers are used to really really limited animation for 8bit pixel art characters. Although a nicely animated 8bit sprite goes a long way.

You can use Photoshop to create pixel art animation or check out Asepire.

Rotoscoping to the rescue?

Rotoscoping is a term going back to the 1930s as well. It names an invention by Max Fleischer – the other big man in animation back then, next to Walt Disney. The device would allow an artist to project a film onto a piece of paper/canvas from below, so that the artist could then trace it – frame by frame.

Nowadays – in the digital age – we don’t do all that projection business anymore, but the name stuck. So you could consider filming somebody in motion and then tracing the frames with your art to create realistic animations. Some old but widely known examples include the original Prince Of Persia and Another World. This saves of course time, since you don’t have to build the animations yourself.

However, you would still need to come up with very simple character designs to make drawing them over and over again easy, but you would also have to be rather naturalistic in it’s proportions, since you are going to trace a real human being in motion.

character design for 2d games, sprites and illustration and animation

Rotoscoping patent illustration, Max Fleischer / Another World, 1991

Skeletal animation

So, when you have several separate graphic objects/bitmaps, each representing a body part of a character and if you attach them to a skeleton or to each other with joints, this is often referred to as skeletal animation.

This method is super popular for games and TV shows, anything where quantity is more important than quality. It’s super cheap to do, quick, takes very little memory space and flexible to use. The animation data is basically separate from the bitmap data as the animation is saved as the invisible skeleton inside. You can just swap graphics on the skeleton and the motion stays intact. All other animation methods discussed so far force you to redraw all relevant animation frames, if you decide to tweak the character design or if you decide to make variants of that character.

character design for 2d games, sprites and illustration and animation

Paperdoll by Basteldibix / Machinarium

Animation done in this style can come off quite cheap, if the character design does not support the jumping jack doll style motion. Characters made of solid objects, like robots or stone golems are perfect.

Also characters who are designed to mimic actual paper craft and solid silhouettes work fine to to either hide the jumping jack doll look or to capitalize on it.

character design for 2d games, sprites and illustration and animation

Alice Madness Returns / Limbo

All this can of course be done traditionally and then be photographed as well. Paper stop motion basically. Doing traditional paper based animations is weirdly uncommon for video games and if you choose to do it, could make your game stand out from the crowd.

If you go digitally however, most modern animation tools support skeletal animation, such as Flash, ToonBoom, Spriter or directly in engines like Unity – which has a native 2D support now.

character design for 2d games, sprites and illustration and animation

Monty Python animation sting, Terry Gilliam / Sounthpark

From 3D to 2D

If you have a 3D artist available, you could of course consider creating you 2D-style game based on 3D models. This allows you to cramp as much detail as you like onto your characters, since you don’t have to draw those details over and over again.. It also allows you to use dynamic lighting and camera angles. You never mess up proportions or details and are never off-model, saves you the time to create a complete styleguide as well.

It is however not cheap to do. And you also need tech artists / programmers to come up with working shaders to mimic the 2D style you were going for well.

character design for 2d games, sprites and illustration and animation

Guilty Gear series / The Wolf Among Us

You can however use 3D models and export your animations as image sequences or sprite sheets and then do touch ups in your preferred graphics software. Pre-rendering 3D characters has been popular since the 90s. It works for high detail animation as well as for pixel art, because you are in control of each final frame.

character design for 2d games, sprites and illustration and animation

Donkey Kong Country, SNES / Sanitarium, PC

Similarly weird to the overall lack of paper based animation in games is the scarcity of puppet based stop motion animation – or claymation. Working with puppets, clay characters and real sets and crafted backgrounds can make your game stand out as well. If you think about doing stop motion work, always incorporate the actual materials into your design process. You want to make sure, that the character you think up can be build as a puppet, and more often than not the materials give the character its edge.

character design for 2d games, sprites and illustration and animation

The Neverhood / Clayfighter series

We are talking about game(!) animation, so…

In film using overlay graphics and montages always feels kinda gimmicky and meta, since they are obviously something that happened in the editing room, not in front of the camera. These principles and viewing habits also translate to animated film – or at least western animated film, as anime evolved from manga, which already has a lot of non-diegetic symbolism in its language.

Anyway, with games however, overlays – graphical user interface elements, such as life bars – are part of the course. They are as native to any gameplay scene as the characters in it are. Capitalize on that and think hard about what kind of expressive function you want to have the animated character cover and what kind of functions can be outsourced to the GUI.

You can for example design a character with very limited expressive features and compensate by popping in character portraits whenever the character speaks. You can fill though bubbles (adapted from comic books), you can design emoticons to hover over a character’s head and more. Go crazy.

character design for 2d games, sprites and illustration and animation

Persona series / Machinarium

And finally, never underestimate the power of interactivity. Interactivity makes entities on screen feel like they have matter and energy, backgrounds become spaces and even the most abstract of shapes becomes alive, if you allow players to fill it with life through their actions.

character design for 2d games, sprites and illustration and animation

Thomas Was Alone

I hope this article give you some directions, when you think of your next 2D game and how to approach your character designs and technical production pipeline.


Like what you read? Please, share and consider supporting the site!