menu button

Shading

The Source Sprite

Spaceman Source Zoomed In



Above we have a zoomed in view of the Source Sprite.

This is the sprite you should save for later editions.
It is very easy to replace its colors.

It is just the Flat Sprite expanded and raw shaded.

Expanding

Increase Layer Size Icon
Click the icon Increase Layer Size to expand the flat sprite.
Now the sprite size is 120 x 200 pixels.

You have more space and can do a careless painting.
The Source Sprite will be shrinked later fixing many details for us!

Note:
Read again Scaling to understand how scaling affects the sprite.

Raw Shading

Brush Icon
You are ready to start the raw shading (tool Brush is recommended).

Don't forget the point of view.

Don't forget we are using diffused light.
Plus a small light source from the upper left corner.

Don't forget the general rule of simple shading:
salient surfaces must be painted lighter.

The Colors For Raw Shading

Bright Contrast buttons



Panel Color has buttons -Bright and +Bright (hotkeys: O and P).
Which we use to create shades from current palette colors.

The Palette

Spaceman Palette 2



Attempting to make the raw shading I came to this complete palette.

Translucent greys applied directly by BobSprite during antialiasing are not part of the palette.

Note:
The grey colors in the center are just the background of empty slots.

Note 2:
The dark orange color will be used later, not now at the raw shading.

Note 3:
We can save any palette as a png file after press button Display in panel Color.

Memory Slots

For safety we save the ongoing work from time to time.
But doing this may pollute the computer with too much files.

Sometimes we want to register the work for a just short time.

Memorize Image Icon
Then the memory slots is the way to go.

Note:
Learn more reading the tooltips of slot memory icons in BobSprite.

The Helmet

Helmet Source Zoomed In



Above we see the zoomed in view of the helmet after raw shading.

The glass reflex is curved, representing the spherical volume of the helmet.

Always reserve white (rgba(255,255,255,255)) for glass reflex.

The Chest

Chest Source Zoomed In



Above we see the zoomed in view of the chest after raw shading.

Notice the (not centered) shadow made by the helmet.

Red area: shoulders and center triangle use a subtly lighter color.

Orange area: parts near shoulders use a subtly darker color.

The Arms And Legs

Arms And Legs Source Zoomed In



Above we see the zoomed in view of the arms and legs after raw shading.

Very simple.
One main color.
One dark color, for peripheral shadows.
One light color, for hands.
No subtleties.

The Boots

Boots Source Zoomed In



Above we see the zoomed in view of the boots after raw shading.

The salient parts are lighter.
The lightest parts are not centered.
Because of the small light source in the upper left corner!

Conclusion

While we respect the simple basic rules,
we can do a lot of small changes in the raw shading (Source Sprite).
And always have the same final perceptible result.
Some details matter.
Others don't!

Now we are going to polish our work.