GR#218 - Pixel Face - Colors

[effete-denizen]

 I'm working on a small game in class and trying to use it to improve my pixel art. I'm very new to it and want to make my work the best it can be.

 Most of the game is now 3D assets painted over using pixel art and a combination of photoshop effects so they don't count anymore, but the player heads which are displayed on the screen to denote a players current state, the power-ups and a few other bits are remaining pure pixel art.

The Characters

Player One





Player Two





1. Normal   2. Holding the pick-up  3. Stunned

 They look a little funky at the moment, there will eventually be four but the other three aren't in a state to get feedback yet (two don't exist and one is just outlines). This guy will be dispalyed as part of the players UI at 64x64 or 128x128 depending on the final design.
 
 They're supposed to be reminiscent of the caricatures in old arcade games =D


 I've also had a go at creating the games power-up sprites. I've tried to use colour to denote good/bad but not sure how well it comes across. These will be displayed at 64x64 (half the resolution shown here).



1. X2 Movement speed  2. 360 Degree Attack  3. Shield  4. Control Inversion  5. Random  6. Half Speed

 That's all so far, any C&C very welcome!

[Manupix]

These show the classic beginner mistakes: very low contrast, too basic color choices, color ramps instead of palette building.
I'd suggest to read this tuto (and others), esp. the part about coloring.
Then pick one of these pieces (or another) and try to improve it as far as you can with critique.

[effete-denizen]

Yikes I see what you mean! Thanks for pointing me to that tutorial, think I needs to make some changes!!

[effete-denizen]

 Ok just to clarify, this is the difference between a Ramp and how you would go about shading using a Pallet? I really want to get this right. A Ramp would be using shades within a colour and shouldn't be done?

 Pallet is Green circle, Ramp is Red box.

[michelcote]

I hope the image is self-explanatory 
edit: Try to remember that stuff that needs to capture the player's attention (player character, UI icons/health, important environments, baddies, etc) should generally have higher saturation, while lower-key things (usually background elements, UI display, generally unimportant things) can be more grayed out.
While not a rule, it's a simple way to let that player's mind easily organize at a glance what game elements are important, and a simple way to start with game art in general 

[AlcopopStar]

Essentially a ramp, as far as I understand it, is a hopefully harmonious pallet used to shade and colour a picture, ranging from light to dark often over a number of different colours.

This tool might be of some help:
http://www.pixelfor.me/crc/

michelcote has posted a good start, but as you can see through a desaturate there isn't a lot of tonal contrast in that ramp.


Here is a messy edit:







Hope that helped. (and sorry to commandeer your post michel!)

[Manupix]

I hope the image is self-explanatory 

What I understand is you seem to advise 100% saturation in all colors, and I can't agree with that 

A Ramp would be using shades within a colour and shouldn't be done?

Critique about 'color ramps' in these parts usually means a palette made up of independent ramps wherein all colors share a single hue, and sometimes a single saturation.
If this is done without a compelling reason, it usually gives poor results.
By contrast, a good thoughtful palette has colors picked across the whole range of hues / saturations / brightnesses, chosen so that they 'work well together' in most combinations, as well as offering solutions for a specific piece pixeling challenges.

More about this here.

The usually associated mistake is to use these ramps in specific and exclusive areas of the piece: the ramps are then truly independent, instead of an 'organic' palette where colors are 'recycled' throughout the piece to unite it.

Consider your player 1's colors.

There are at least 5 independent ramps: hair, skin, eyebrows, eye pupils, mouth + blackened eye.
Most saturations are in the 20-27 range, except the hair blues and eye purple.
Additionally, 32 colors is a huge lot for this piece, considering that many are used in very few pixels (you can see where each color is used by hovering over the palette; you can also sort colors by hues and other criteria).

To get a better understanding of these issues, I'd recommend practicing palette challenges, here or at Pixeljoint. These will force you to find creative solutions and get rid of the color ramp mindset. The smaller and crazier the palette, the better!

Edit: also check this thread.

[michelcote]

...you seem to advise 100% saturation in all colors...

I didn't mean that at all, sorry my post wasn't as well articulated as it could have been. Either way you and Alcopopstar certainly conveyed better advice!

[effete-denizen]

 Wow thanks for all of that! Wasn't expecting quite that much help.

 I've been busy with other projects but managed to quickly redraw it this morning. Maybe still not enough contrast? I'll keep tweaking this today.

 It needs to be really expressive to communicate the player characters state at a glance so I'll be enlarging the eyes.

[r1k]

AlcopopStar, you should realize there are two ways to make a picture grayscale.  Converting the image to grayscale, and setting the saturation to 0, which is not an indicator of actual contrast of value between colors.  I see you did the later.  Heres a simple image I made to demonstrate this to someone else a while ago



the HSL color system is a little different than you might think.  The LUM value (lightness or darkness) does not represent an absolute lightness or darkness.  Basically how it works is a LUM of 120 at highest saturation is the brightest/purest version of every hue.  The purest blues happen to be dark and the purest yellows happen to be light, even though they have the same LUM.  So when you just set the saturation to zero that blue and yellow are both gonna turn into the same gray.  Thats why you have to convert to grayscale if you wanna compare value contrast between colors.