2D Art for Game Developers / Character Art
Animation-ready characters
After this page:- you can create a game character using the pen tool in Photoshop
- you can prepare a game character for animation
- you can export the animation-ready game character for a game engine or animation software
THE Funny waiter
In this chapter, I will make an animation-ready game character called the Funny Waiter. Animation-ready means that the game graphics are built so that they can be exported to an animation software without editing.
The Funny Waiter is a non-player character (NPC) in a restaurant-themed mobile game. He's a humorously moving stout waiter who hovers around the restaurant taking a drink order to a customer.
Because the game platform is a mobile device, the objects on the screen are quite small. The character's proportions have been created so that the player will pay more attention to the head (it's bigger) and less to the legs.
For the animation, the character's moving parts are created on 11 separate layers: the body, head, right arm, left arm, right hand, left hand, right leg, left leg, right foot, left foot, and the tray.
VIDEO: Sketching
In the video below, you can see me sketching the Funny Waiter in the Procreate app on iPad. I start with the outline, using a pencil and eraser. Once I have finalized the form, I choose the right colors, and finally add a final touch with the soft airbrush.
VIDEO: painting THE animation-ready character in Photoshop
I continue my work in Photoshop. I import the sketch into Photoshop before starting the final character.
1. Blocking out the body parts
The first phase is to block out each body part with the pen tool. This way, I will get all the parts I want to animate on separate and editable layers. This character's form is very geometric, and a vector-based pen tool works well for the purpose.
If a body part has more than one layers (like the head and body), I insert the layers in a folder to keep things organized.
The sketch has nice colors, so I simply select them with the eyedropper tool. To adjust a shade, I use the color wheel.
2. Final touch
Most of the character's coloring is flat. There are no shadows or highlights. To make the waiter's skin tone richer, I use a large round brush tool with 0% hardness and 10% opacity. I also put some red on the waiter's cheek and hands.
3. Exporting the art
The final art has to be exported to png files so that it can be used in an animation. All the body parts have to be in separate png files which will be put together in an animation software or a game engine.
Method 1:
In Photoshop, choose File > Export > Layers to Files
Photoshop will create a separate png file for each layer. In the dialogue box, remember to tick the transparent box!
Method 2:
Some game engines, like Unity, read Photoshop's .psb file format and import the layers and their position directly to the game scene.
In Photoshop, choose File > Save As > Large Document Format
NOT COMPLETED
Complete all exercises on a page to complete the page.
Toony character Excercise
Intermediate - 4 h
NOT COMPLETED
Complete all exercises on a page to complete the page.
Total completion:
0% 
You have completed 0 of the 25 pages.
Completed pages give a full star. Full stars are added to the total completion.
Continue
Next : Toony Mouse
Home