Little Harder Than I Thought

[madartiststan]

Hoi, so I started to make a character sort of sprite today, fighter sprite if you will for practice and it's something that really made me start pixeling in the first place! But the shading makes me want to go nuts. I've been trying for about an hour now to lay down some decent base shading and get some nice shadows and details into the pants but it's driving me crazy as it all keeps coming out like crap. Some serious crits would be helpful right now, so lay it on me!

[Draco9898]

I'd rather try to explain in words how to do this, but an actual example works better. The same things can be done even if your sprite is woefully small.


A glorious example of clothes shading by one of our own forum members, I hope he doesn't mind


Terry from fatal fury, an example of shading jeans

Your jeans (I presume of course, it could be pair of blue kung fu pants for all I know) have no direct source of light and therefore look pillow shaded and blurry.
The lines on the jeans are way off, giving FAR too much emphasis on the idea of what shape you wanted the pants to look like and need to be cleaner and straighter. When comparing the legs to each other the one on our right is too skinny and misshapen.

[Froli]

This is just an advice, I really think you should study some anatomy before attempting a fighter sprite..  with that knowledge you can make good dynamic stances.

your idea of fighting stance --> application of anatomy/sketch/refining it -> pixel fun

Unless you are an expert  like some of the guys here, you can jump to spriting.

As mentioned from Draco, you also suffer from pillow shading as I have seen from your thread "iso fun", you need to understand how light source works and how it affects an object.

[LoTekK]

While the anatomy isn't off, per se, the pose lacks dynamic, as Froli has pointed out. As also mentioned, the pillow-shading is really killing those jeans, and they're lacking a lot of contrast, making them feel puffy.

Did a quick edit, but bear in mind I'm still relatively inexperienced with pixel art (the dithering may or may not work, I dunno).



I changed up the colors a bit, with some hue shift and saturation changes, plus more contrast.

edit: added an extra shade

[Skull]

A vast improvement on those jeans.
A nice palette too.

I'm not sure what's going on with the upper body, though.

[Opacus]

A vast improvement on those jeans.
A nice palette too.

I'm not sure what's going on with the upper body, though.

That's an edit from another member, Skull, not the updated peice

[LoTekK]

That's an edit from another member, Skull, not the updated peice

Ha, yeah, that was an edit.
Just occurred to me, though: I'm not out of line doing that, am I? Not too sure on how far is too far, where edits are concerned (though I've seen the awesome edits that Helm has done). I just kinda was having fun with the jeans, lol.

While the anatomy isn't off, per se,

Uh, I looked again, and it actually is off. The legs are too short, for one (when you bring your knee up, it should just about reach shoulder height. With longer legs, your arms will need to be lengthened a couple pixels (fingertips should fall somewhere around mid-thigh).

[madartiststan]

Lotekkl: No! I really appreciate that you editted for me to give me an example and something to work off of, it was quite a good edit at that as well. I'll be having an edit soon, just got up.



  I think I'm getting somewhere good now! But, ignore the shoes, it's just me messing around temporarily for some style of shoe or so.

[LoTekK]

Couple of things:

1. First thing's first. You've gone and turned the pants into a bit of a mess of noise. It looks almost as if you're trying your best to get rid of jaggies by placing intermediary shades, which is looking very confusing. It may be better to just forget the AA for now, and focus on getting the main forms down with the light and shadow. You'll notice in my edit that while I dithered a bit here and there, for the most part I retained patches of solid color.

2. While you're starting to get away from the pillow shading, there still doesn't appear to be a very defined light source (not that my edit was fantastic in that regard). It's better than the first effort, but could use improvement. Again, rough out the main forms first.

3. It looks like you've started to define some folds and drapery in the pants, which is good, but they're pretty haphazard right now, especially around the knee and lower leg. The bunching around his left ankle seems a bit arbitrary. Throw on some pants, and take pictures.

4. You've lengthened the legs, but they're still too short. A good rule of thumb is that armpit/clavicle to mid-crotch should be roughly the same distance as mid-crotch to knee should be same distance as knee to foot.

5. Lack of contrast. You've added a darker shade (which is barely in use), but you've also reduced the lightest shades by the same amount. The usage of these has improved somewhat, but the overall contrast is still lacking. You've also got 5 shades, though the two brightest shades are exactly the same value, just with different saturation levels. Bump that "highlight" color up a notch or two in value.

6. Hue shift. Or lack thereof. Your shades at the moment are exactly the same hue throughout, and are the equivalent of the mistake in traditional media of adding black or white to a color in order to lighten or darken it. Try some hue shifts. In my edit, the hue on the jeans runs from about 200 to 260 (on a 360 hue ramp), with warm darks and cool lights. (Note that it's possible to widen that gap even further if you wish).

I actually cheated in that. The two lightest are the same hue. I musta forgotten to hue shift when picking my lightest. :X

Uh, I can't think of any more offhand. Hope that wasn't too harsh or anything... >_<

[Zee]

OK, that was the best explanation of hue shift I've ever gotten. Thank you so much.

[madartiststan]

I really appreciate all of your help Lotekk, and don't think I'm not listening. I just had done a whole lot more prior to refreshing this page and reading your new comments, so I started on a shirt and the makings of a hat, but the pants remain the same.

So I'll post where I'm at now and go work on the pants a bit more.




Edit: Playing with some hue shifting, tried to get some "warmer" colors as Lotekk said, for the darker areas. Currently reworking the right leg (our left) and I still have to clean up and redo the left leg (our right).




Edit 2: Been cleaning up the legs and making them look better. I know the shirt is pretty terrible and it was sort of just a test to work with stuff. And see what sort of colors I could go for. In the end I'll go for something really vibrant with the shirt, hat and shoes.

But until then:

[LoTekK]

One thing I forgot to add about the dithering and excessive AA. If you've got excessive dithering and AA, you're going to find it a nightmare to animate the sprite, since you'll more than likely end up with a hellishly flickery and swimmish animation, with spots jumping all over the place. You could put in a lot of effort to match them up, but (a) why put yourself through that hell? and (b) especially at this resolution, you're not likely to be able to match everything perfectly.

Looking forward to seeing your next update.

ps. Work on that pose, too.

[madartiststan]

I also ought to explain the stance as well....

I hope to have some sort of cane or so under that ridiculously outstretched hand and his right arm (our nonexistant left  ) placed on top of his left arm (our existant right  ). I haven't drawn in the non-existant arm just yet (obviously). But definitely all still WIP.

And Lotekk's comments have really been helping. =D

[philipptr]

One thing I forgot to add about the dithering and excessive AA.

Have I missed something? I can't see any AA on this piece O_o

[madartiststan]

Nearing completion, which I hope to achieve today, the facial features and shirt especially are really giving me such hell it's unbelievable. Of course, this is my first time doing something of this nature.

It's going well tho I think.

[LoTekK]

philip - Might be a case of me using incorrect terminology. I was referring to the not-quite-AA-but-not-quite-dithering on the pants in stan's second pic:


stan, I see what you're saying about the pose, and it does make more sense now. That said, there are still some anatomical issues. With your arm outstretched to the inside like that, there would be more clavicle movement, which would bring the entire shoulder/arm forward. From the angle we're looking at him, that would mean the shoulder/arm wouldn't be sticking out to the right that much. Additionally, legs are still too short. Take a look at the first example in Draco's post for a better idea of leg length (Terry is a mite exaggerated).

Now the hue shifts.
I'll start with images, since my 4am brain can't think of a good way to explain with words (these are referring to the HSB/HSV sliders in Photoshop; click the little arrow at the top right corner of the color pallete, and select "HSB Sliders"):

H=Hue, S=Saturation, B=Brightness (aka V=Value)

You'll notice that as B increases, S tends to decrease (this can be the opposite, but generally you can stick with this relationship). Also note that H follows a trend as well. If your lights are warm, your darks will tend to be cool, and vice versa. Hue shifting, as you can see, gives you a much more interesting "gradient" to look at than simply altering the brightness and saturation. (third gradient copies S and B from the previous gradients, while fourth gradient only copies B):



At the moment your hue choices are a bit haphazard, with 3 of your 5 shades sharing the same hue, and 2 inbetweens going in opposite directions on the color wheel.

Shading so far on the pants, imho, is still noisy, but improved. Lighting seems off, assuming his left foot is supposed to be further away from the viewing plane than his right (if this is the case, his left lower leg should be mostly in shadow, with maybe some light catching on the cuff of the pants where it's bunching up around/resting on the shoe).

The shirt right now seems to have a couple of folds that make sense, but most of it seems rather random. Again, put on a top that's close to the fabric you'd like the character to be wearing, put yourself in that pose, and get some reference shots. Fabric and drapery are tough, make no mistake. Use reference.

And I swear, if I'm talking too much, please let me know. :p

[InvaderLupus]

Here's a quick edit I did of the pants:



I feel as if you didn't really pay attention to LoTekK's edit earlier. The shading is EXTREMELY messy all throughout the piece. It's extremely difficult to determine the light source, and it looks blurry. I think you really just need to simplify things: pick a light source and a good few shades, and then do the basic shading. Don't get too complicated or it's going to look like a big mess. Dithering isn't necessary for a piece this small, and can really make it look worse. You don't need nearly as many colors as you have, either. Pay attention to the edits, and learn from them.

I'll let someone more knowledged correct your anatomy issues.

[madartiststan]

Bah, you're not talking to much.  At least not for me, as I talk quite a bit myself irl, besides the more indepth you go the clearer the explanation, the more it helps. So thanks for that. Also thanks for the little tip on HSB sliders.

I use photoshop but don't know much outside of brush, blur (other arts I've tried to do), and pencil. And of course the eraser. I'm working on some updates so it's coming.


Hoi, sorry posted while Invader Lupus was posting his edit, ah yeah I'll definitely take that into consideration to make it look cleaner. I've been trying to get rid of this messyness as you said.

E: Really trying to make it less mess and complicated similar to what Invader Lupus did in his edit to make it look somewhat smoother, but I'm still trying to get some crinkles and such for the jeans worked out.

[poingo]

I'm not an expert on pixel art by any means at all, but if you were intending on animating this, I'm pretty sure you would want to make it as simple as possible, while still retaining looks.  Otherwise it will get tricky.

[LoTekK]

Painful as it may sound, the best (and, ironically enough, the most painless) way to get rid of the messiness at this juncture is... to simply block in the shades again. Fill those pants completely with a midtone, and block in your lights and darks (emphasis on block, so keep it rough, don't worry about hard transitions). Think about where the light will hit: upper leg, light; lower leg, dark; cuffs, light. From there you can refine the forms, without the currently-existing dithering to distract you. For this stage, try and limit yourself to 3 tones: midtone, light, and shadow. After this, you can add a highlight, and possibly a deep shadow. Remember (especially for this size), keep the forms simple!

edit:
Just noticed your edit. Much better, infinitely more readable. Though your pallete choices are still a tad haphazard (easy to fix, though). Uh oh, legs are still short. Fix up the proportions and anatomy issues before you go any further. Don't even touch the shading and folds on the shirt until you've sussed the arm/shoulder issue I mentioned earlier (it'll make things easier on yourself further down the line).

One last thing I just noticed. The main part of the hat (uh, the bit the head actually goes into, I'm blanking on the name) is too narrow for the head. Widen it by a pixel in each direction.

[madartiststan]

Stealth: At the moment I don't plan to animate this.

Lotekk: I thought I'd accomplished something to that nature with the last edit?

[LoTekK]

Stan, yeah, you did. Sorry, took me a while to write, and you had edited before I posted. See my previous edit for comments on your latest update. All this editing is going to get confusing. ^_^

[madartiststan]

Definitely a fix on the arm, brought it forward about 2-3 pixels, didn't quite keep count. Widened out the top of the hat and lengthened the legs some.

[LoTekK]

Um, crap. Got carried away again. Was just gonna do anatomy changes... o_O



edit:
Forgot pointers.
You've got 18 colors, you can make do with a lot less. I've unintentionally hunched him over a mite, but the shoulders are roughly in the correct positions. On second thoughts, they should probably be raised a tad, especially his left. Blocked in the lighting and shadows, shifted the head, tweaked the head shape, added a neck, tweaked the hat (it was still a mite narrow in your last update), and roughed in the second arm. Totally carried away, sorry. :O

[madartiststan]

Thanks for the final edit Lotekk, it really helped much with the shading on the shirt, I think I'll tweak it just a bit more and call this one finished! I appreciate all the help you guys gave for me concerning anatomy and this helped quite a bit.

Lotekk: Your edit really helped me concerning the shirt and the missing arm (I was wondering how I could pull that one off), but it helped so much for me to finish it finally and get it done. I believe I have been working on this for two days.

[LoTekK]

There's still a couple anatomy issues to be addressed (primarily in the shoulders, especially his right), and the way you've shaded the bit above his left arm is looking a bit confusing. I still feel you can push this further, but that's ultimately up to you.

[madartiststan]

In short, the guilt was killing me.

[philipptr]

Why did you add pillowshading to the jeans? In my opinion this made the sprite much worse. You were on the right way..

That's an edit helm did some time ago. Look on the shading very closely. The gradient to the knees is much more realistic and adds much more depth to the sprite than simply pillow shading the whole jeans.

[AdamAtomic]

yeah what happened here?  you were really headed in a great direction, but then out of nowhere senseless squigglies on the thighs?  beep beep back the truck up

[Helm]

In short, the guilt was killing me.

what does this mean?

I think from what I've gathered from madartiststan's threads is that he's probably young, or if not that, isn't actually assessing the critique he's getting on a fundamental level. Meaning, he doesn't see why people tell him do this or that, but he does it anyway, and he's not always equipped to tell at the end, if what he's made was better than what he had before.

This sort of 'art-blindness' would require madartiststan to work on his own strengths outside the field of critique for months or a year or something, I feel.

[madartiststan]

Adam: My hope wasn't to make senseless squiggles but try to make some sort folds at least.

Helm: You got it right on the dot that I am young. Tho, alot of times I do understand what people say when they critique my art. Or, I at least do my best to try to. 

[InvaderLupus]

In short, the guilt was killing me.

I see now. He just copy+pasted the pants from lotekk's edit.

[madartiststan]

Erm, no. I meant the guilt that I should "finish" it. But didn't.