Trench-sprites

[Babar]

Although with my impending exams and all, right now is the worst time (and therefore the time I dot it), I wanted to tackle sprite art. I really didn't want to draw just 'anything', so I asked my friend for a concept. He gave the idea of a trench-coated, sarcastic and whip-witted detective type fellow with a cat. I started out (mostly forgetting about making him sarcastic and witty), before realising that the pose is somewhat similar to a villainous Mr. Smith. I opened up the image (it may be a bit stretched due to pixel aspect correction), and then made a big mistake: I wondered, why can't I draw like that?

I know the white pixel next to the "cat's" ear is irritating, but please, bear with it for now.

The shading on Mr. Smith's waist-coat and pants seems almost random, but it works! His trenchcoat is better, and I tried emulating it by having those wavy lines under my own fellow's pockets, but it didn't work . Also, while Smith may be slightly wider, he still seems to have much more detail packed into him than my own fellow. I tried adding a one more 'highlight' colour to my man's coat, but that made him look like some sort of cut-out square box-man.

I will probably be sleeping for the night right now, so I can't really respond until tomorrow, but I would really love some help. And hell, a sort of 'art mentor' for the summer would be a great boon for me. I would pay you back in dense packets of gratitude.

[GarageGothic]

I think he looks great, in fact I prefer him to the FoA sprite. The simplicity is just brilliant. But no, he doesn't look very sarcastic - more like a just-the-facts-ma'am Jack Webb-style detective. My only criticism would be that the left side of the coat is too straight.

Edit: And maybe you could work with the colors to make him look less like Inspector Gadget?

[InCreator]

Well, shading is not random.

Easiest way to figure out is to wear something, let's say a bathing robe, take a picture of yourself and then pay attention what causes wrinkles and which direction they go.

Also, it's kind of funny how you posted image of two men, same height, side by side and didn't really notice that your guy has way too short hands. Unless that was intended? Anyway, fixed this.



4x:

[Matti]

Ha, InCreator, you outworked me. For my picture would have looked similar (and not as nice as yours) I'm not finishing/posting it. Yes, shading makes sense and the arms have to be longer.

I darkened the buttons of the coat too. 

[GarageGothic]

Won't that shading be a pain to animate? As I said, I love the simplicity of the original sprite. I think the shading ruins that a bit. And while his arms may have been a tad short, I think it really gave a feeling of him being tall and slender. The re-proportioned sprite has that squat LucasArts stature where everyone look like hobbits. I much prefer the original's Trilby feel. You may want to work a bit on the cat, even without that extra white pixel it still makes be think he's blowing a puff of smoke or something. But perhaps animating the cat will help on that.

[Tuomas]

Took me a while to notice that the thing I thought was the cats head was actually your palette. Suddenly the cat makes sense too.

Usually you'd want to consider where the light is coming from. Usualyl the shadows are easy enoguh to be drawn just under wrinkles, while above them you use a lighter colour. And you notice, that the armpits and under pockets of the example guy are even darker because naturally those are the places light doesn't go into. A random wrinkle might look good if you have luck, but usually a bit of thinking and considering tells an artist from someone who just knows how to draw a bit. The pants might be a bit darker just under the coat too. If you take a picture, you'll notice, that you have such a variety of shades, that some 3 possible, light, medium and dark won't be so easily detectable. But if you reduce them witha program, it'll find something of the kind.

I would also like to point out, that your guys head is almost two times smaller than the example you used. You might want to make it a bit bigger. That'd make, say animating a talking view a bit easier, if you had a place for mouth or so

Take a look at Victor Loomas for example. It doesn't have to have as much colours or as much detail anyway, if that's what you prefer: http://www.arno-fleck.de/werbespiele/vl.htm

[fertoff]

ok, it looks pretty good. i like it
another thing, i just downloaded firefox 3 and the scaled up picture appears all smoothed out. somebody knows how to turn that off??

[InCreator]

Hm, I seemed to go a bit overboard with palette. Few pixels with additional color.
Actually, only 3 shades of gray would do. Of which, one should be much darker than other two.

EDIT: I noticed that this sprite from Indy shows it well even without my words--

If there's an area on my edit that would still need some work, I'd say it's the area a above pocket, over the ribs. That one didn't turn out so well...

Won't that shading be a pain to animate?

No, not really. Even in most inexperienced hands, it's hard to mess totally up. Even random attempt without really knowing what are you doing would still produce better result than no extra shading at all.

Infact, animating so-called "pillow shading" or gradients is much, much worse.

But tip for animating: I suggest to draw all frames without that extra wrinkle shade, get them absolutely, finally, right, and only then apply extra shade. This tends to work much better, avoids messing up and redoing hard work, and helps to see the "big picture" better.

P.S. Firefox 3 blur annoys me too! 

[Babar]

I tried adding a few dents and angles on the left side of his coat, but it always ended up looking like some sort of a dress.


And although the shortening of the arms making him look taller was completely unintentional, I see it does actually look cooler , so I didn't change it.

I don't have a bathrobe, but I tried making a few wrinkles. I don't get it, InCreator, you make it, it looks normal, I make it, and I'm wondering why his coat isn't waving along with the wrinkle shading, and when I make it wave, it looks silly (I guess it is a problem of the low resolution). I also made the face wider and taller (and showed the mouth as it would be in the talking frame). I'm not sure if either worked:

[InCreator]

I like your second version. But you have to add darker shade along most rightmost edge to make coat look more cylindrical, otherwise it looks too much like a cardboard cutout.

2-3 pixels longer hand would still be good idea even if you like them short. Right now, this guy belongs to a circus. Or rather like two kids on top of each other wearing daddy's trench coat. If this guy needs to pee, how would he reach his zipper? 

Okay, to show you some logic behind all this, I really tried to put together a kind of physics map for raincoat...
MSPaint in all its glory... didn't turn out so well, since my brand new Razer Kraitâ,,¢ gaming mouse turns out to be total crap if I try to draw anything, ever, and is meant for racking up frags only... 



Numbered arrows show forces that possibly manipulate wrinkles and curved lines are wrinkles:

1 - pink arrow. Shoulder(in a sleeve) tries to pull sleeve away from rest of the coat. This causes fairly straight wrinkles near sleeve (blue lines around shoulder).

2 - orange arrow. Hand in a pocket pushes pockets forward and down from raincoat. This causes wrinkes around pocket corners (red lines near both pocket corners). Since this area gets most force and wrinkles, they appear longer and continue down where gravity and friction tries to straighten raincoat.

So, from pocket to the bottom edge of the coat, hard, long wrinkles happen. (See also my edit and Indy sprite - this is where those large darker areas come from). Wrinkles are curved near where stretch is strongest but try to get vertical as they move downwards. Physics.

Also, notice that pocket wrinkles and wrinkles near place where sleeve is tailored to the coat are strong enough to cause tension - therefore wrinkles between them (green curves near ribs)

3 - magneta arrow. Hand in a pocket also pushes pocket out on third axis. Like, away from body. There's no special wrinkles for this, it simply explains why wrinkles in pocket area are SO strong and also why pocket area is lighter on Indy sprite -- they tried to make it look like pocket is a bit more forward (closer to the viewer) than rest of the coat -- which is correct.

4 and 5 - yellow arrows. The point where hand is bent pulls both ends of the sleeve together, which also causes wrinkles - which again, try to get more vertical as they move away from that tense point. (All blue curves on sleeve)
---
Thin red curves -- note that depending on raincoat thickness, coat buttons pull other side of the coat towards them too. But on your sprite size, it's almost impossible to make them visible on your sprite due small size.

........
Now this is a helluva long story for a really simple physics observation. Also, my sketch is way too detailed for such a small sprite. But it's good to know, even better to understand. For a small sprite, you have to take most strong and important wrinkles, shade them, and voila.

No, I don't really start calculating wrinkle physics when I draw a sprite. Over time and experience, it's kind of gets pre-programmed into artist's vision, you don't have to think to draw right.

How did I learn this? Not really by posing in a bathrobe but by being amazed about those crazy Japanese animators (no, not anime). Neo-Geo games. Which I strongly recommend to you -- there's whole sprite banks for those games and you can also visit local arcade, find first 2D arcade fighting game and take a long, thoughtful look.

It's good to start here:

http://www.gsarchives.net/index2.php?category=all&system=neogeo
Click-click-click.
See those marvelous sprites. How few frames they took to make lifelike animation and so on.
Zoom in! They have 2-5 colors of shade per tone. Only. Though it looks like so much more.
Games to check out: Art of Fighting 1-3, King of Fighters, Garou MOTW, Samurai Shodown (all).


Good luck!

[Shane 'ProgZmax' Stevens]

Here, I did a quick edit to address a few things.

1.  Got rid of the cat.  Get one sprite design right first, then work on another.  Also, the cat was just distracting.

2.  Increased size of hat by 1 pixel, made neck 1 pixel longer.

3.  Adjusted position of legs.  The way he was leaning just didn't look right to me.

4.  Brought arms down and outward.  This helps to make them look bowed like they are going into pockets rather than passing through the coat altogether.

5.  Changed the darkest tone for the hat and pants to darker, better contrasting colors and reshaded with an approximately overhead light source.  I also eliminated one color.






Basically, the main problem you're having is establishing a light source to shade from.  In one version the light source looks like it is behind him on the left while another version looks like the light is in front of him on the left.  Settle on a place where light will be for all your characters and then imagine what the light will hit from that direction; for instance, in mine the light hits primarily on the top of the hat, the top of the shoulders, the forearms as they go into the coat, part of the chest, and the sides of the coat that stick away from the body or bend into the light.

If you make your colors right you will find that you can reuse some of them as shades, which is what I did with the coat and the pants.  Keep at it!

[Dualnames]

I'll agree with Progz note number 1. I like the sprite but the cat looks weird. So just fix what needs to be fixed with the sprite you have and then go for the cat.

[GarageGothic]

I must say I still prefer your original version with the re-colored coat. The re-proportioned paintovers in my opinion makes him look way too cute, not like a cool, sarcastic detective. There's something almost art-deco about the original's simplistic, angular style. And personally I find the attempts to shade of the coat unnecessary and visually a bit distracting since you already nailed the iconography.