Digital Coloring
Process by Susan Bonner
Characters designed for First and Goal
-a Mobile Game by Underbite Games
References
I love Google!
I search google images for action poses. For this project I pulled images of bodybuilders, football poses, the movie 300 and Gladiator and facial expressions by Rhianna because these are the tough ones!
I collect them all on a pinterest board for the project.
Character Development
The 3 characters below are the concepts approved for character design.
Concept Drawing
Using the approved look I design an action pose first starting with a blue line.
Then on another layer named refined line use pencil brush to create a refined line with more details.
Versions of Concept Art
Sometimes it takes several tries to get an approved file. I showed my client 3 versions before going on to production.
Finals for Win and Loss Images
Line Drawing
Then use actions - White FIll
White Fill Action
Accessing the White Fill Action
1. Download the Steve Heneveld Actions click here.
2. To access your Actions menu go to the Window > Actions.
3. To open Heneveld's Actions, click the panel menu button in the top right corner of the Actions panel and choose "Load Actions..."
White Fill Process
because you have duplicated the line and done the white fill you will need to do a HUE SAT adjustment shortcut (command or control U)
pull lightness to all white, this allows for you to have a white shape to turn into flats.
Flats Process
Select sections of your white fill and change to appropriate flat colors
Fills Using Paint Behind method
Make a selection then use the paint bucket on paint behind mode and fill.
Using this method start with smaller objects first like the skin under the gloved sections of the hand.
I use the cowboy lasso.
Fills Using Paint Behind method
Fill selection with paint bucket set to paint behind mode
Warping Graphics
The number is sketched but does not look acurrate so I find a font that works and type it and rotate it.
Command or control T is the free transform tool.
Warping Graphics
First Rasterize type layer - go to layer > rasterize type
Then Free Transform (Control or Command T)
This shows the warp tool on the top.
Twist until it fits the fabric.
Hit return to say yes.
If that is not enough use Filter > Liquify.
After warping the graphic merge the layer with the flats.
(Shift click the layers you would like to merge and click Command or Control E)
Line Work
I use a custom brush for line set to normal at 100% opacity.
I use a darker color of the flat color with a more refined line quality.
Line
Line is completed in this image - You can see the skin has a brown where all other areas are in blue.
I turn the refine line done in pencil brush to a low opacity so I can see it and work on another layer titled line for the actual line I will use in the final.
Value Adjustment Layers
Because I am working on many of these images I drag the previous value adj layer from another file.
That is why you can see the shape of the dive player on the left in the kicker file.
Value Adjustment Layers
I then go to the mask and fill with black so that I can start over with this image’s value.
Edit >
Fill >
Black
Normal
100% opacity.
Value
I am going for a flat value look so I paint in the mask with a flat clean up brush white where I want the darks and black where I want the lights. (I know it is opposite but you will get used to it.)
You can see the little arrow on the layer is attaching the mask to the flats layer below.
To attach the layer mask to the layer below click on the adjustment. The adj panel comes up click on the arrow to attach it to previous layer. You can only attach it to one layer at a time.
Lazy Nezumi
- Awesome way to get lines in photoshop to smooth like flash - only currently availble for PC.
Value Adjustment Layer clipping to previous clipping mask
This screenshot shows the Hue Sat Panel and the icon to select to do it.
Lightness is set to -42 on the first value adj layer.
Value and Line complete
Turn the refine line off done in your pencil.
2nd Value Adjustment
I create another layer of values using a value adjustment layer.
This adjustment goes darker by about 10 but use your judgment that is what worked for these images.
Skin Painting
I go to flats, select the skin flat with the magic wand tool, then make another layer called paint and use a custom brush that is very soft and blends beautifully. I got it from concept artist Jason Chan.
You can see final skin rendering in the file on the left.
Skin Painting
I get references from a google search for correct lighting and muscle tone then use simple paint strokes - set to about 40% opacity.
Skin Painting
I paint using more light on the top where light is going to be and more saturated darks in the darker areas.
You can really see strokes right now and I want a slightly more blended feel...
Skin Blending
I blend areas of the skin where I want a soft feel, leaving a hard edge on the light edge.
Use the blending tool set to 20-40% using Jason’s nice brush.
Selecting the whole layer
Control or Command Click on the flats layer to select it then go to the second layer adjustment layer and control or command shift click to inverse selection and delete the value outside the form. (Because you can only have one mask attached to the previous layer.
Clean up
Clean up is essential. Look for lines not connecting or a bit wabbly. I use a custom clean up brush and clean up eraser set to 100% opacity.
Final Art
Shadow applied and all clean up complete.
On the left is the PNG with transparencies used for in game.
On the right is the final in context of the green I use to test the files with.