How to improve a character sprite.

[Dualnames]

Well, I'm mostly satisfied with my background art and now that I've removed lens flares blurs and all that rubbish, people considered my graphical style to have been improved. However my character spriting abilities still not feel as satisfying as I want. For one reason. I make them as fast as possible without taking care at detail. So I know some guys around can sprite. So in case you want to improve my sprite and tell me how you've done it, I would definetely appreciate. A redirecting to tutorials is nice, but I would love if you didn't. I won't mind though.

So enough talk, here's the sprite.


Link

[R4L]

I think you answered your own question.

"I make them as fast as possible without taking care at detail."

Just take your time when drawing a sprite.

I would give you a paintover, but my mouse is broken until Christmas.

All I can suggest is looking at human anatomy, and looking at some professional sprites. Also, your colors are a bit saturated, especially the skin tone, but your sprite is still nice and functional.

[Ghost]

Your style's quite unique and doesn't mix to well with my own, but here's a quick draft to give you some ideas.

x2

It's Arthur Dent, a plain english nobody.
When the book starts, he already has had a bad night, and then he lies in mud, is shouted at, and his planet explodes, he needs tea and has a fish in his head.

This should show. Stubble of beard, morning gown a bit ruffy, a shirt he has surely slept in, maybe even these ugly loose slippers. And I never saw a tasteful gown. They are ugly, the most impractical bit of clothing ever invented.

One thing I try to put into my sprites is a "signature stance", something in the body that is a sign of the character's attitude/personality/whatever. Beverly's exaggerated, arching spine or Red's blank expression, something to make the character unique. Amazingly enough, this is simple when you're using low res. Here we have sagged shoulders, a slightly worn face. Go for whatever you want.

Apart from that, I messed around with the colours a bit, but just because in my eye, the pinkish skin palette as used by LucasArts always looks a bit wrong.

As for sprite making, well, I usually start with the head. Low-res heads are easy, start with a simple shape (block, circle, triangle...) and add detail. Then I make some reference lines for the body, and from then on, it's clear sailing. I usually stick to about three shades per colour (see skin and gown) and prefer a clear, dark outline, but that's all a matter of taste and style. Avoid simple monochrome blocks though, it often looks better to use two similar dark shades (hair).

Just for the books, this sprite took me about five minutes, so there's nothing to say against "quick spriting". It *can* keep things fresh- stare to long at those pixels, and you may come up with a beautifully crafted robot...

[Dualnames]

R4L: Well, agreed. Definetely should put some time on my sprites.
Ghost: First of wondeful edit. Don't really agree with some colour choices, but I get a lot of ideas concerning shading and stuff. As for the skin colour, yep, you're right. I'm posting my edit below.



2x


4x


For the record, this took me 22 minutes. The right hand is weird I know but I overall like it. Mostly the hair and the slippers.

[Shane 'ProgZmax' Stevens]

What you need to do, aside from focusing more on design and anatomy, is to pay careful attention to color selection and contrast.  You should select your highlights and shades carefully; in your latest edit I can barely make out the shades from the highlights, and this translates to wasted effort.

Also, never, ever draw on a high-contrast or bright background.  Ever.  It distorts your perception of certain colors entirely, often resulting in a much darker sprite.  Stay away from programmer purple and use a more neutral grey or brown, something that doesn't clash at all with your color choice (so you can clearly see ALL the colors you are using).


Another thing you need to focus on is to move away from lumpy drawing.  Your latest effort is a perfect example of lumpy drawing; the shoulders are misshapen, his feet vary from jagged to blobby.  This just doesn't look good, honestly, and it shows a lack of attention to detail and a lack of interest in what you are doing.  Focus on clean lines as free of double pixels as you can and straight lines where appropriate.  Don't try to freehand everything.

I've made a complete redraw of Arthur Dent (using the miniseries as a reference) and took a very simple two color approach to shadows and highlights.






I've left your palette in place and made my own below it.  Some things to notice:

1.  The character proportions match between directions.  In your version they do not match up, and this often confuses the viewer (the white lines are there to illustrate).

2.  The shape of the character is clearly defined, without a lot of excess pixel blockiness.

3.  The colors are selected to compliment each other so the highlights stand out from the shadows.  Note that in your version, the pinks are very saturated and you can barely tell the difference between the skin tone and the shadow; in my version there is a clear distinction, which makes adding facial features like cheekbones or brows much easier.  This applies to your edit as well.  The skin tones are barely distinguishable at all, and the same goes for the grey shirt (and to a lesser extent the pants).

4.  Cartoony characters lend themselves well to less complicated designs, so I went for something cartoony but recognizable here.  There's no actual 'rule' to making cartoony characters except that they tend to have exaggerated anatomy, particularly the heads, hands and feet.



Basically, what I've done here is completely redesign the character using better colors and a more careful attention to the lines, and I think the result is obvious.  It's also safe to say that if you spent some extra time on these things you could easily achieve what I've done here.  One other thing you might try is to calibrate your monitor colors.  Color choice isn't always the fault of the artist but rather what they see.  I've seen some major color differences as I've switched monitors over the years, so it's important to make sure you are seeing the colors as they should look. 

Here's a website with some simple instructions on how to adjust your colors for good results:

http://epaperpress.com/monitorcal/

[Dualnames]

I've tried to put as many of those I could together and work on a sprite.
Sorry if it's a mess.
4x

2x

1x


1. I decided to follow your tip to go with neutral grey, and well, it was better and more easier to choose colours.

2. It took me a very long period to decide the stance and the place of shoulders. I tried to avoid freehanding cause well , yes, indeed I lacked interest.

3. I've added a little(in purpose) Dent's not being shaved thing( damn sometimes can't speak properly).

4. I've decided to unblend the pants which was indeed a problem.

6.I've added mouth and eyebrows

Well, mostly I'm happy. Never sprited this good a character before. So nevermind my enthusiasm. What feels wrong?

His pockets. I want to add the effect that his hands are in his pockets but can;t figure out how they would appear as full.

His right foot feels weird as well.

[Ryan Timothy B]

Progz gave you some advice that can be very important to pixel art characters.

Two of them were:
No double pixels.
Avoid using shades that are very similar to the main color.  It's nearly impossible to notice them, making them useless to even do.

I noticed you have LOTS of double pixels in your new character.


See here.  The double pixels in 'orange' make the character look very low res and blocky.  Especially if the character is mixed with double pixel outlines and single pixel outlines; in 'blue'.

I honestly didn't even know the character had a light shadow for facial hair until I was editing the image.
The dark shadows on the coat almost match the dark outlines.  Therefor making the outlines appear VERY bold and giving no sense of shadow.

I agree that out of all the characters I've seen you draw, this is a very big improvement.  I'm no artist, nor pixel artist, but it's pretty simple to follow easy guidelines.

Here's an edit (to keep your style intact--so you can see and understand the difference):


I made his face wider by 1 pixel.
Changed the bright color of his undershirt.
Removed the double pixels.
Changed the close shades of colors to more noticeable ones.
And changed his facial hair color and added a brown outline for it.
To make his hands look like they were in the pockets: added brighter color on top and darker on bottom.
EDIT: Forgot to mention I lowered the location of his hands making his arms longer.

Keep practicing, you are getting better.

[Ghost]

Keep practicing, you are getting better.

Seconded, there's lots of potential- you're almost there. Mostly small details, but it all adds up. The original Arthur and your latest edit show a great change, and to the best.
How does it feel, levellin' up? 

[Dualnames]

First of all, special thanks for making an edit on this. As I was working on it, I had trouble riding of the double pixels. So I didn;t. However working on it more, I accidentally did. And noticed that man,it looks better. I've also changed the difference between the shades. Thanks for the wonderful edit I got the idea about hands in pockets. Though I hate the socks (No hard feelings for that it was a joke). As for the facial hear, I decided to skip them. Also changed his right arm(appears a little weird).

I'll try and post the sprite, when I feel it's ready(so all your points are taken to action)

Ghost: Thanks a lot. It feels weird.

[bicilotti]

This has been a very instructive and interesting thread. I'll try to add a brick to it.

First of all, Dual, here's the second sketch you've made + a diagram of the palette used:

As some have pointed out, many of the colours are wasted (i.e. the difference between one and another is almost unnoticeable, making the various nuances useless). But that's not what I wanted to talk about.

I've noticed that, for making shades, you're modifying the basic colour adding/subtracting luminosity. This is a clean and simple way to obtain them, but I feel that, if overused, can lead  to oldired palettes.

Let's take a look of some colours from Ghost's edit:

I've picked up 5 of them and pasted the correspondent HueSaturationLuminosity value. I don't know wheter, while drawing, he handpicks tints or uses the HSL slider; fact is that, between shades, the Saturation (and sometimes even Hue) values too are different.
I think this minimal effort makes the colour choice immediately more interesting, recognisable, clear, natural and fresh to the eye.

Finally, a really tiny edit:

I've left the outline+pixeling untouched and focused only on the colours. It's not a revolutionary improvement but there are a couple of things to be noted:

1- Now Gow+Pants use only 6 colour (instead of... errr, many )

2- The bright red of the Gow is the same as the one of the pants, even though they may look different to the eye. This is called metamersism and is very useful, not only when on a fixed small palette (for example in a "continuous" background like a jungle setting or so).
This property is more easier to exploit if you spend few extra seconds playing with the "Hue" slider.

[Ghost]

Kudos for bringing up metamersism- now I know another word to impress the ladies!

I don't know wheter, while drawing, he handpicks tints or uses the HSL slider; fact is that, between shades, the Saturation (and sometimes even Hue) values too are different.

I follow McCloud's "rule of diagonal picks": Starting with the middle colour (unshaded, normal default), I select the brighter shade somewhere up left of the spectrum and the darker shade down right. There are no maths to help you, but it's a good rule of thumb.



LucasArts stuck to the rule a lot, but it should be noted that Legend Of Kyrandia 2, a game that has some of the best graphics I've yet seen in an adventure game, used it all the way through, and when you check some screenshots, you will notice the extremely natural, clear palette. Learn from teh masterz, says I

[edit] Khris, yes, true, but I keep that rather low. I hardly ever bump the hue as long as the result looks okay 

[Khris]

That's exactly the opposite from what I learned e.g. over at Pixelation.
They say that hue shifting is important; using the same hue for highlighting and shading makes the image appear bland and flat.
Plus, darker shades are supposed to be less saturated because the absence of light leads to less color.

[Shane 'ProgZmax' Stevens]

I don't actually use Ghost's method either, though I can't say it's 'wrong' if the result is pleasing to the eye, which is how I pick colors.  I will typically start with the color base for something (skin) and then using the rgb sliders to adjust the values for shadow and highlight.  Sometimes I like darker, redder shadows and sometimes I like them more brownish, so my skin tones vary from time to time. 

One thing that will help anyone improve their color usage is to force themselves to work with a limited palette for a time, like the nes palette for instance.  When you only have a select range of colors, you quickly learn how to get the most use out of all of them, and this often includes using colors you wouldn't normally see for shadows or highlights (but the results are often interesting).  Something I learned early on with the c64 palette was how the dark brown could be used as an additional shade of grey to good effect, and I liked the result enough to bring it over into some of my other stuff. 

I think you're still suffering from color contrast problems, Dualnames.  Did you try adjusting your monitor settings?

[Dualnames]

First, happy Xmas to all.
Second, interesting post bic.

As for the colours. It all depends on a theory I've created which has been proved wrong. To sum up for colour choices, yep they have just a few differences to the eye due to I paint a sprite all the time with 5x zoom. That makes it difficult to notice that on real size colours don't really differ. Which goes to progz edit.

Now, thanks for pointing this out. I'm currently changing a lot of sprites from the game based on all those info. Btw in some of my sprites I accidentally sprited using Ghost's method of colourpicking.

Why did i choose those colours?

Not by luck. First I've removed 2 colours from the gown, they prooved to be too much colours so that goes:

4 colours head
6 colours upper body
4 colours pants
5 colours down body

sum=19 colours- those alike=16 colours

Why 16, well, it's actually a short of limit I put to myself.

Summing up:
Yep, I do use wrong colours. My monitor's just fine. It's that thing I said about looking a sprite from close up. Thanks for all the suggestions. I'll try and restrict myself from choosing 16 colours per sprite. I'll try to sprite with way too less.

Question to be answered:
Is Bic's opinion of colour choice better than mine(not a rivalry to be intented just a simple question desiring answer)

Cheers.

[Shane 'ProgZmax' Stevens]

No, I wouldn't really say it's better, just different.  For instance, one of the jacket shades he picked is very close to the black he uses on the inside of the arms, which makes people ask 'why?'.  When two colors are so similar that placing them beside each other (or swapping them) yields little to no visual difference, the solution is to get rid of one or change the contrast between them significantly enough that they stand out from one another.  Just adjusting brightness isn't really as interesting visually as actually changing the color's values.  A little bit of blue in a dark red shade to make it just a bit purple (not much, but enough to see a difference) would work well as a shadow, and more red and green would make a decent red highlight.

I also draw my images with zoom (sometimes at x36), so that really shouldn't have a thing to do with picking proper colors.  Of course I zoom out from time to time to see the complete image, but everyone should do this.

I've taken your edit, fixed the anatomy a bit and changed and reduced the colors from 26 to 12.  They could be reduced even more, really, but this will hopefully show you how I make better use of 12 colors than you do of 26. 

I've drawn some boxes to show you how I've changed the colors here and there.  You should be able to see the differences in hue and contrast for most of them pretty easily.





If you pay attention to what I'm actually trying to show you here with color usage and better line work your art will improve tenfold, I promise.

[Ryan Timothy B]

Progz, the master at work.
That's a much needed improvement.

I really like what you did by showing his knees and skinny ankles.
The dark solid and straight eyebrows are excellent as well.  Although it gives the character an angry look but still great.

One question though.  You showing a 'slightly' purple coat and using a red highlight, wouldn't that imply the fabric is of velvet, nylon or silk?
To me it makes the coat appear matte when purple, but once the light hits it, it's very reflective.

But yes, none the less.  It's very talented.

[Shane 'ProgZmax' Stevens]

I didn't pick colors directly from this, but this is what a burgundy smoking jacket looks like under light, which is sort of what I was going for (the colors, not the style).  It could be darker but I really wanted to show contrast here between the original and my version.

http://www.designerexposure.com/images/products/20885_1_large.jpg