Draw draft on paper, scan it to computer.
Import into PS. Need to decide the pixel size of the character. Comparing with other creator's work, 27~30px is ideal for the detail amount I want to have. (in the screenshot here all 3 pictures is 400% zoomed)
The window size in my game is 800×600. In the picture below I prepared a 400×300 canvas, put my drafts on it to find the proper size to show in the game. I found that my target percived size of a character is around 70px on the 800×600 window. So it would be no big problem to still use the 27-30px size as in step2. Later I just need to enlarge all image to @2x.
First, here is some prepration before drawing character:
resize the canvas to include the full map.
color the background to a less bright color
Then I realized maybe I should make a swatches set. I already have a colored painting of this scene (the ground of a school). So I used the color in that painting to make up my swatches. The result is not very ideal. Things seems too dark.
After making the basketball ground color more saturated and light. I had a decent background.
I plan to draw black outline first same as in that second reference pic. And then change the outline to some lighter color if it appears too bold. When drawing the front facing view, I soon realized that it is quite tricky to keep the body and head size constant since we are working on a pixel scale. Things happened that 2 px is too small, 4 px is too large and 3 px will lead to asymmetry of eyes positions. Or, outline of the legs will form a ugly 2px wide black line if you use a even width.
When drawing the 135° view, I let he stand back to back with the 315° view so that I can keep a good balance.
The last two is the side views. The position of the back of body and leg is imporatant. FInished!
I do want to add breathing effect to the character, but due to its small size, a pixel level movement looks choppy. Sub-Pixel animation is needed. Have to leave this to later after coloring (if time permitted).
Luckily, I came across an amazing book Pixel Logic by Michael Azzi. So I decided to take a break and study systematically before going on.
I learnt from the book to make colour ramps using Hue Shifting and Saturation Shifting. Trying it out here:
These are the most colors I can get from Pang Zhai. There are light, middle and dark values. I don't know if there is need to do any color shift. Let just see if it works out.
Another thing I learnt is determining the black tone. Here for PZ the black tone is some dark brown.
First build a bigger shape for him. I guess it's recogonizable enough.
Then I added AA and shadow (with a new mid tone for the skin). Changed his pose to be the same with standing drawing, made the skin shadow darker and less saturated and used the original skin shadow on his shirt. Added dot under his eyeball to make it looks like he is squinting his eyes. The glass is really hard to draw in such a pixel limit.
It's possible to add a month for him. Quite cute!
In order to hand in to programmer as quick as possible, I decided to make a rough version of all elements. But as you can see in the following pictures (~ 5 hrs work), I still can't resist the temptation of adding color etc. Anyway the AA is skipped so the other characters do not look as good as PZ.
As for Hayato (隼人), in the story he is wearing clothes from the revolutionary operas in 70s. It might be interesting to make him completely B&W visually. I used a 50% B&W filter on him
A friend of the staff kindly provided us a song cover, so that we can play it in Civia's band performance. Usually in this situation some CG slide show will be played. But we don't have time for that. But a 3-frame pixel animation might be easy to make. Just use some music note to create a sense of motion.
© 2015-2023 Class-2 All rights reserved. It was the winds descending from the great mountains of Norway That spoke to you in low voices of better freedom. -- Arthur Rimbaud, "Ophelia"