AuthorTopic: What's the difference between these 2 sprites?  (Read 2687 times)

Offline wanderer123

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

What's the difference between these 2 sprites?

on: December 08, 2016, 02:00:06 am


The one on the left uses colors weakly while the one on the right is professional. Here are some questions:

1) Is the one on the left using colors with too high saturation? If so, should 2 different hues between the colors be less saturated?

2) Or is it that just the contrast is too high between those? If so, can anti-aliasing help?

I think the contrast is too high in the left one and I don't know whether anti-aliasing or less contrast will help.
« Last Edit: December 08, 2016, 02:37:07 am by wanderer123 »

Offline 32

  • 0011
  • **
  • Posts: 535
  • Karma: +1/-0
    • @AngusDoolan
    • http://pixeljoint.com/p/19827.htm
    • View Profile

Re: What's the difference between these 2 sprites?

Reply #1 on: December 08, 2016, 03:28:34 am
The blues in the left image are pretty much fine. The only issue is the green mid tone being too close to the green highlight. In this case in the left image the overall contrast is high (between the darkest blue and the lightest green) but the contrast of just the green skin tones is quite low.

The important thing is that the colours are distinct from one another. Saturation isn't really an important value in an of itself. It's about the perceived brightness of a colour, you can make perfectly readable images with the saturation of every colour turned all the way up.

Anti aliasing won't help. This drawing is already anti aliased. To fix the left image increase the contrast of the green tones. And balance the brightness of the coat to match the skin as both ramps use the same two darkest tones.

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: What's the difference between these 2 sprites?

Reply #2 on: December 08, 2016, 03:32:55 am
32 posted while I was typing and said more or less what I wanted to say, but I figured I'd post what I wrote anyway:

There are a number of issues with the left sprite that the right one fixes.
- Saturation is consistently high. High saturation can be a great tool for drawing attention to something, but if everything is saturated, then it loses its ability to direct the viewer and causes eye strain. The fixed version uses saturation more sparingly, so it's easier on the eyes.
- Contrast is too low in some areas, making the forms hard to read. A lot of the details and AA is almost invisible in the left version because of the poor contrast.
- The shadows and highlights are mainly just darker/lighter versions of the midtone with almost no hue-shifting, looking rather bland and disconnected. The fixed version shifts the shadows more towards blue and the highlights towards green This both looks more dynamic, and unifies the palette overall, making the character and cape look like they belong together and that light bounces between the two.

Overall, the left version is just harsh and and difficult to read. The right version is much better. That said, I don't think the drastic shift towards green was necessary in the fixed version's cape, so don't take all of those changes as necessary.

Anti-aliasing is never a good solution to poorly chosen colours. Anti-aliasing is a solution to an entirely different problem.
« Last Edit: December 08, 2016, 03:36:00 am by eishiya »

Offline wanderer123

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

Re: What's the difference between these 2 sprites?

Reply #3 on: December 08, 2016, 06:14:38 am
So can it be said that one thing that makes the left sprite bad is too high of a contrast between the green and the blue?

Offline yaomon17

  • 0011
  • **
  • Posts: 660
  • Karma: +0/-0
    • YaomonKS
    • taiya.sun
    • http://pixeljoint.com/p/28472.htm
    • yaomon17
    • valedev
    • playvale
    • View Profile
    • portfolio

Re: What's the difference between these 2 sprites?

Reply #4 on: December 08, 2016, 07:24:59 am
Too low of a contrast between the green and green.

Offline MysteryMeat

  • 0100
  • ***
  • Posts: 1997
  • Karma: +1/-0
  • "The new alternative to q-tipping your cat!"
    • mysterymeat
    • spoiledmysterymeat
    • View Profile
    • My rad art blog!

Re: What's the difference between these 2 sprites?

Reply #5 on: December 08, 2016, 08:02:53 am
So can it be said that one thing that makes the left sprite bad is too high of a contrast between the green and the blue?

sort of but not really! Read the responses again, to boil it down to one line the big problem here isn't that the contrast is too high or low.
It's that because the two colors are both vying for attention by nature of being so bright they wind up drowning each other out.

The other part is that, within that green especially, there's not enough contrast between the various parts of the shading, giving it too soft an appearance.

Here, I redid the left sprite with updated colors to show off possible fixes without changing it beyond that, all I did here was darken the green some!


EDIT: And a compiled gif, to better see the changes!

« Last Edit: December 08, 2016, 08:05:15 am by MysteryMeat »
PSA: use imgur
http://pixelation.org/index.php?topic=19838.0 also go suggest on my quest, cmon
MAJOR BORK TALLY: |

Offline eishiya

  • 0100
  • ***
  • Posts: 1266
  • Karma: +2/-0
    • http://pixeljoint.com/p/28889.htm
    • View Profile
    • Website

Re: What's the difference between these 2 sprites?

Reply #6 on: December 08, 2016, 02:18:00 pm
Seconding MysteryMeat.

I don't think the contrast between the green and blue was a direct issue. Mostly the problems are with each colour. The lack of hue-shifting and unity I mentioned is the only one that ties into contrast between the green and blue, but to describe that as a contrast issue is to misunderstand the problem.

Colours can contrast in three ways:
- their values, one can be dark while the other is light
- their saturation, one can be dull/grey, the other can be saturated
- their hues, e.g. yellow and blue contrast more than yellow and orange (at the same value/saturation, anyway)

In this piece, the value contrast is fine (maybe even a little low!). The saturation contrast was low because everything is over-saturated. This is where MM's analysis of the two colours clashing comes from.
The hue contrast is fine.
However, if the shadows are hue-shifted towards each other, that would leave the main shapes the same colour that they were (and therefore contrasting the same), but just the shadows would contrast a little less. This would be a contrast change, yes, but it wouldn't be one most people would immediately think of as a contrast change. Instead, it would just feel like the skin and cape exist in the same world, affecting each other.
Edit of MM's edit, with the two darker cape colours shifted towards green, and the darkest skin colour shifted towards blue (compared to the original):

(However, note that I also lowered the saturation and value on the mid blue slightly. This actually increases the contrast with the greens, but the lower hue contrast makes up for it. Starting to see why this isn't really a contrast issue?)
« Last Edit: December 08, 2016, 02:49:38 pm by eishiya »

Offline ErekT

  • 0010
  • *
  • Posts: 330
  • Karma: +0/-0
  • fistful of pixels
    • View Profile

Re: What's the difference between these 2 sprites?

Reply #7 on: December 08, 2016, 06:36:32 pm
I agree with everything that's been said. Just like to add a little extra to the bit about evenly high saturation that eishiya brought up. The reason you don't want even saturation across the color spectrum is because human eyes don't work that way. Basically, the less light, the less color the eye is able to pick up. So if your dark colors (meant to simulate areas in shadow) have as much saturation as bright areas, then the entire thing will look self-illuminated. Like a garden gnome with a lightbulb inside of it.

Hue-shifting also helps build the illusion of natural lighting. I say illusion because on a computer screen or TV every pixel you see is illuminated of course. If you shift darker colors slightly towards the cooler end of the spectrum and brighter colors towards the warm end you can create an impression of afternoon sunlight for instance.