AuthorTopic: Just beginning pixel art, criticism on shading a sphere sprite  (Read 5036 times)

Offline jtb

  • 0001
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile
So I'm trying to learn the basics of doing pixel art, hopefully for a game I'm coding (my skills are with coding, but with practice I know I can do art too… well practice and advice). The end goal for the style is like a SNES platformer, but really I'm comfortable just learning any way I can.

So I've made a little green spherical sprite character (lacking appendages for now, but that's OK). I'm just trying to get the lighting right. So the light source is in the top left-ish corner (not super important where the lighting goes for this example, this just happens to be where I decided to put it).



I don't want it to be super realistic, just kind of cartoony (like it could be in a Mario game). I think it's looking OK but I'd love to hear some feedback on him. Just be gentle with me :)

Thanks!

Offline EyeCraft

  • 0011
  • **
  • Posts: 597
  • Karma: +2/-0
  • What are you scared of?
    • View Profile
    • Death By Dev
Hello and welcome to pixel art  ;D

You have picked the perfect subject to begin with and shading-wise it's pretty spot on. It can of course be taken further with reflected light in the shadow and speculars, but breaking the form into highlight and shadow is the most critical concept and this you have done well.

Game-wise it's best to have your lighting coming from directly above, so when you flip the sprite the lighting stays coming from a consistent direction.

I did a couple of edits;





I got a little carried away with stuff that might not be pertinent to your learning at this stage, but I will go over it anyway:

The colours you've selected are all max-saturation and sit on the same hue across the value scale. That means your brightest green is exactly the same hue as your darkest green, and all the greens in between. This leads to a couple of problems. The first is harmony. Imagine you select your palettes for all the sprites and tiles in the game in the same way; all the hues sit at the same respective position for each graphic element from shadow to light. So this guy is all-the-same-green, an enemy is (for example) all-the-same-red, a wood tile is all-the-same-brown, etc etc.

What you end up with is all these elements existing in their own independent colour space, leading to a disharmonious composition. You want to bring elements together, and make them feel like they belong in the same space. Tinting shadows and highlights towards a common hue is a great way to do this. It can be as simple as deciding "my light source is a bright yellow sunlight from directly above, my shadow is a cool sky-blue". So with your green ball guy, you tint the shadow green more towards blue and the highlight green more towards yellow. This is what I did in my edit. People often refer to this as "hue shifting", though that term refers to the more general practice of adjusting hues across your palette for any number of reasons, not just to match lighting conditions or harmonise multiple elements.

Okay, that's about hue. Next is about saturation. Saturation is how "rich" a colour is. ie, how green a green is, how blue a blue is, etc. The less saturated a colour is, the greyer it is. The more saturated a colour is the more "neon" is becomes. Your green ball is neon-green. This partly ties back into the idea of harmony. If you have a whole bunch of neon colours throughout the composition, you are blasting the viewer's eyes with all these strong colour signals that are demanding attention, and it can exhaust the eye. After a while, people want to look away. You need soothing neutrals to counterbalance any chromatic intensity. The piece (in this example, a screen of the game) should have its exciting parts that stimulate the eye, and relaxing parts that let the eye rest.

Game sprites are important to the gameplay, they need attention, so typically you want your saturation to be pretty high on your sprites so they grab the player's attention. Backgrounds are much less important to gameplay, and they take up large areas of the screen, so you generally want them to be lower saturation and soothing for the eye. The player only notices them subconciously or if they conciously decide to really look at them.

The second consideration in my edit is design. I know its a ball, and I said a ball is a very good selection for you to learn form and shading. But lets pretend we really want to make this as interesting a character as possible. What makes a character compelling is when we feel like we know what the character is thinking or feeling. It's when we empathise with a character that we are most invested. To this end, you need tools for communicating how a character is feeling or what they're thinking. For this reason increasing the amount of space the face takes up in the sprite (giving you more room to make facial expressions) is a good practice. We can see how the character feels. We can begin to feel like the character is more than a ball.

The pink cheeks are almost over-cutifying it. I threw them in on instinct. Part of it might have been your mentioning of Mario (pink cheeks common). But its also that red is the complement of green, and the desaturated pink is a soothing counter-balance to the saturated greens.

Okay, I think that's everything I wanted to say. Let me reiterate: I highly approve of your selection of subject! You are on the right track, continue to the next step  :)
« Last Edit: June 03, 2011, 02:46:12 am by EyeCraft »

Offline pikminboy111

  • 0001
  • *
  • Posts: 8
  • Karma: +0/-0
    • View Profile
post a piece of art and i will edit to make it look as great as i can. and explain what i did. please no plastic brick or anything!!!!!! :lol:

Offline Froli

  • 0010
  • *
  • Posts: 293
  • Karma: +1/-0
  • Dragon Highlord
    • View Profile
post a piece of art and i will edit to make it look as great as i can. and explain what i did. please no plastic brick or anything!!!!!! :lol:

Eyecraft already did a fantastic job with his advice.

Offline HolyHamsteR

  • 0001
  • *
  • Posts: 1
  • Karma: +0/-0
    • View Profile
Just want to thank EyeCraft for his fantastic post.
Completely demystified those same looking colour bars for me  :)
Thank you!

Offline jtb

  • 0001
  • *
  • Posts: 2
  • Karma: +0/-0
    • View Profile

I got a little carried away with stuff that might not be pertinent to your learning at this stage, but I will go over it anyway:


Tremendous! Thank you so much for your kind words and your advice on the theory behind it. This will help immensely. I'm back to coding this weekend but I think over the next few weeks I'll be back here with more artwork as I struggle through and learn how to do better. So thanks again!

PS: The three colour values I selected for the ball sprite were lifted directly from the green shells in Super Mario World (I've shamelessly just been re-making sprites from SMW lately just to get practice on their techniques, and I like the style quite a bit). It's great to have some real theory behind it, though!