[C+C] Trophy

[Insominis]

I'm super new at this (any art form in general to be honest) and practicing pixel art so I can develop a game in the future. Currently following the #dailypixels challenge on twitter so I decided to try and make something from scratch.

I think I struggle with a lot of things so it would be nice to have a list of stuff to focus on as I do these challenges.

[eishiya]

To post an image, you need to use the URL of the image, not the page it's on. A quick way to tell if you have a good URL or not is to see if it ends in an image file extension.
You need http://i.imgur.com/lOhAjFH.png:


There are 3 yellows in this but they're hard to tell apart. Don't be afraid of contrast! Make those colours different enough that they're all clearly distinct without zooming in.
Trophies are usually smooth and shiny. Dithering creates the look of texture, the opposite of smoothness. Try to define the shape of the trophy using just solid areas of colour, don't try to blend between them.

[Insominis]

I'm not sure I understand the use of contrast in this case. Should I be using another dark colour like a brown to shade or outline the overall shape of the trophy as opposed to using another yellow to blend?

Thanks for the help eishiya! I edited my post so that it links properly as well!

So for instance?

[eishiya]

You don't need to pre-zoom your art. Post at 1x instead. This forum has a zoom feature, if you click on an image, it zooms in. Ctrl+clicking zooms out.

By contrast I don't mean using more colours, but making some of your existing colours darker or lighter so that they're not all so similar. Example edit of your first version:

This uses the same number of colours as your first version (4 yellows+background/transparency), but the two darker yellows are significantly darker, so that they're actually visible. Notice that I didn't just change the outline, but all the yellows, so that they're all distinct from their neighbouring colours.
I adjusted the shading so that there's no blending, to give you an idea of how it can be done. Doesn't that look much shinier?

I also made a couple of changes to suit my personal tastes: I made the base of the trophy have a perspective more similar to that of the top so that it doesn't look bent, and I modified the outline (lightened it in some parts, eliminated it around the opening of the cup) to give the trophy more volume.

[Insominis]

Woah that's awesome!

Looks so much more like there's a shadow cast with fewer colors.

I guess my key takeaway from this critique is to create contrast and skip blending by skipping the intermediate colour!

[eishiya]

Blending can be good (whether with dithering or extra colours), it's just not always needed. With small sprites, transitional colours aren't as useful as they are for larger sprites, and there often isn't room for dithering to look like dithering rather than just noise.

Although you have improved the overall contrast, the contrast between the light yellow and the white is still low, as is the contrast between the two darker yellows. You may as well be using just two yellows with that level of contrast xP Make those colours useful, make them visible!

To illustrate the problem, here are the colours from my edit (top) and the colours from your latest version (bottom) and where they fall on the value spectrum:

See how mine are more or less evenly spaced, whereas yours cluster around 3 areas (especially those middle two)? That's why they're not reading as distinct colours unless one zooms in. Choose colours that more evenly cover your desired range of values. There are cases where that's not desirable (for example, outlines are often significantly darker than the rest of the object, and shouldn't really count as part of your desired value range), but in most cases, it's a good starting point.

[Insominis]

Thanks! That spectrum analysis was really helpful with driving the concept.

Would you suggest using an evenly distributed palette at all times? I'm primarily going to be working with medium sized sprites in the future and read somewhere that its better to start small and scale up.

[MysteryMeat]

I'd start with an even pallete and experiment with different values as per your needs.

Shading more muted things like skin or paper wont have as high a color difference,  for example, but things like metal or plastic will.
It's a good rule of thumb to stick to, but as always it shouldn't be a hard rule!

[eishiya]

Short answer: Yes.


Long answer: No. There are situations where evenly distributed colours won't give you the look you want; sometimes you might want a particularly dark outline or a very bright highlight on a dark object (for example, a bright specular highlight on a black bowling ball). Add complex lighting to the mix and you might find yourself with a set of very similar shadow colours that are nonetheless distinct and important. While thinking about the distribution is helpful for spotting problems in a palette, it's not that useful for actually choosing colours in the first place.

Instead, just try to make sure that all your colours are noticeably different from each other, avoid having colours that have a similar hue and a similar value (like those two middle yellows). I don't consciously think about the distribution of my colours on a value scale when I choose colours, I just pick them so that they're all different, and adjust when they're not.

Keep a preview open at 1x zoom at all times and make sure that the changes you're making are clearly visible at 1x. Details and colours that seem obvious and distinct when you're zoomed all the way in are often invisible at 1x. Glancing at the 1x version constantly will help you spot these issues before you waste too much time on them.


And as MM mentioned, the value range of each object will differ. Shiny objects will tend to span a big chunk of the black-white gamut, whereas duller objects like skin and fabric tend to cover a much narrower range of values. That means you can use fewer colours to cover the value range of a duller object, and/or you can use colours that aren't as distinct from one another.