Insights into 2D Sprite Shading
/Hey there, budding game artists!
We're neck-deep in our current project so I don't really have any spare time, but as I'm hammering away at the aesthetic for our current game I realized that a small piece of my process may be helpful to some of you.
I've always had a problem with shading (and I still don't have it right), but over the years I've developed a sense of shading depth with my work that really helps to make the art *POP* out at the player. I took a little bit of time this evening to quickly detail a brief step-by-step of the shading/highlighting process for one of my characters. Let's begin!
First make sure that you have your character built and ready in your tile sheet. Make her however you'd like, in any stance or pose that you'd like. As usual I'm using GIMP, and I've decided to begin detailing one of my bosses. We'll call him "Jack."
Step 1. Make sure your coloring is solid and that you're happy with it. In the end you will collapse multiple layers and it will be A PAIN to re-color.
Step 2. Set up a Grid for yourself (if you feel comfortable with one) in order to get better situated with the canvas. Then get ready to split some layers.
Step 3. Make a DUPLICATE of your sprite's layer, and then with the duplicate layer selected, press DELETE to erase everything inside of it. This will give you a fresh layer with the exact same boundary perimeter as your original layer.
Step 4. Rename your fresh DUPLICATE layer "Shadows" or "Shading" or whatever you'd like, so long as you know this is your shading layer.
Step 5. Select your ORIGINAL layer and decrease the Opacity by at least 50%. This will more clearly indicate the areas on your character that you need to shade.
Step 6. Return to your DUPLICATE/"Shadows" layer and fill in all of the deep crevices and creases with solid black pixels.
Step 7. Reduce the "Shadows" layer's Opacity to 50%.
Step 8. Increase the ORIGINAL layer's Opacity to 100%. This will enable you to notice any bad spots and subsequently touch them up as needed by reversing this process over-and-over until you have it right.
Step 9. Turn Off the Grid to get a better look at your pixel work so far.
Step 10. Now we're going to add some Highlights. Turn your Grid back On, and make a DUPLICATE of your ORIGINAL layer once more. Then name it "Highlights":
Step 11. Turn the ORIGINAL layer's Opacity down to 50% once more, so you can see what you're doing easier:
Step 12. Increase the "Shadows" layer's Opacity to 100%. This will help you to see which dark areas to oppose with highlights:
Step 13. Start highlighting! As a general rule when I'm working with "moody" environments or creatures, I will increase the depth of the shadows, and narrow the depth of the highlights. In other words, I use less highlights and more shadows. This helps to draw focus to the more animal and terrifying aspects of the work:
Step 14. Decrease the "Highlights" layer's Opacity to 50%, and change it's MODE to "OVERLAY". Decrease the "Shadows" layer's Opacity to 50% as well. This will draw out the brightness from the colored pixels on the ORIGINAL layer, and contrast them against the "Shadows" layer's shading:
Step 15. Turn Off the Grid and check over your work. Feel free to go back and darken/highlight anything you need to for your own preference, and mess around with the different Layer MODES to get a feel for them. Notice the highlighted areas on Jack are subtle compared to the darker areas. That's the way I want it for this piece, as the backgrounds I'm developing for this project are dark and that makes these differences even more striking than they are otherwise right here:
And there you have it! I hope this was helpful for you and gave you some inspiration to go out and work on your own game art! Please feel absolutely free to leave a comment or even a suggestion for future insights or help that you'd like to see me cover.
Until next time, keep developing and keep gaming!
~Anthony