next »

[HernanZh]

Hey guys, I'm working on a mario-like platformer. I've been working on the graphics and suddenly got stuck drawing the background for a couple of days

After I decided to go for random bushes and "mario-like" hills I put everything together in a mockup and it's bothering me...

Here it is:


I think it's mainly the colors that's wrong somehow (and being color-blind does not help). I'm not sure how I can separate the background from the foreground better. Do you guys have any tips on improving this?

[Kinaetron]

Looks as pretty cool, although the grey rocks and tree stump looks out of place

[Quarry]

Clouds could use some darker outlines

[Cobralad]

It looks even more Mario than Mario and tthts not good thing.

[HernanZh]

Oh ignore the clouds btw, they're terrible and I'll redo them

[JWK5]

When desaturated (with luminosity still intact) the problems become apparent:


The coin blocks and breakable boxes next to them have are a larger area of contrast than Mario (especially in terms of contrasting with the rest of the scene). Mario should carry the most contrasts in the scene, followed by any dangers (enemies or hazards) or rewards, and then any surfaces he walks on, and then the contrasting should eventually dwindle down into the background (where the least should be).

In a game this is so because the player character needs to be identified easily and quickly so that the player is aware of its position at all times. Likewise, dangers and rewards are something the player is constantly on the lookout for and can often require split-second identification. Being able to identify walk-able platforms from the background is crucial to being able to navigate the level quickly and keep a continuous smooth movement. This is an effective arrangement even if it is just meant to be a mockup since Mario is the subject of the scene and the other elements still would follow a solid visual hierarchy.

The hierarchy would look something like this:

[HernanZh]

Thanks, that's really helpful!

[JWK5]

No problem.

A good measure of where the image is at visually is to step back from the monitor several times, each time examining the image to see what stands out the most. From a distance you'll see that Mario pretty much disappears into the midground and eventually the green hills, brown ground, white clouds, blue sky, and yellow of the blocks and bushes are the only identifiable  masses in the image.

Try to work the image so that as you move back Mario (and other characters or objects of interest) is still visible and identifiable as much as possible.




Alternatively, you can just blur it to hell and back to get a similar view:

[Franklin's Ghost]

The hierarchy would look something like this:

Just read your comment on Replicus and was going to comment on it and say that I'm really impressed in the way you help people and the depth you go to. Then I read this post and just had to say something. JWK5 you're doing an amazing job helping people and anytime I see you comment I carefully read it cause I always seem to learn something from your tips

Also nice to see you're starting a new game HernanZh. You going to start a devlog when you get the look done?

[joseph ¯\_(ツ)_/¯]

Rad stuff! Great crits jwk5. I dont know much about pixel art, but wanted to throw in some (maybe unnecessary?) input:

This MIGHT be muddying the waters a bit for pixel art but if you really dont want to just de-contrast your backgrounds, there is more than one kind of contrast to consider for defining forms. JWK5 is talking about value contrast -- the range between the lights and the darks -- there's also color contrast (how varied of hues there are) and contrast in terms of sharpness (which is probably totally irrelevant for pixel art) that you could harness to differentiate forms.

Varying levels of color contrast will still let the eye clearly seperate the forms... But will look pretty silly unless heavily planned for (say, a very dramatically lit nighttime game)



Owlboy does this quite a bit. Fairly high contrast backgrounds that pick from a very limited palette -- foregrounds with similar contrast but much broader palettes.
http://thedreadpirateguy.com/wp-content/uploads/2012/02/Owlboy.png
http://i1-games.softpedia-static.com/screenshots/Owlboy_1.jpg

[HernanZh]

Wow, this is great. Thanks a lot guys, this is all really helpful.

Also nice to see you're starting a new game HernanZh. You going to start a devlog when you get the look done?

I'll start one a little later I think. I have to work out some concepts first.

[JWK5]

Contrast comes in many forms (contrast of size, big and small; contrast of line, straight and curve; contrast of saturation, intense and dull; contrast of hue, warm and cold; etc.). In terms of colors, value (brightness) is the basis. Most artists seem to separate hue from value and treat them as separate entities (I did until I learned more about them), but actually hue has value inherently:



By managing your value first you will gain better control over the impact of your colors even before you start adjusting their hue and saturation. A good example of what I mean is the following:



Here I've just adjusted the saturation on the ultramarine (dark blue) hue. As it desaturates (becomes more gray) it actually lightens value-wise. If you just focused on a contrast of saturation you could inadvertently cause a clashing in value. Likewise, just focusing on a contrast of hue could also cause a clashing of value. Value is the crux of saturation and hue, once you've got a pretty good value balance you have a general idea of how you need to adjust the hue and saturation to suit it.

Just read your comment on Replicus and...

Thanks a lot!
I am glad people are finding some of my posts useful.

[Graham-]

Just read your comment on Replicus and...

Thanks a lot!
I am glad people are finding some of my posts useful.

Yeah, like it isn't obvious.... (I mean that people find them useful)

[beestings]

The rocks, yellow bush, and stump are all too detailed in comparison to the rest of the scene. Also the stripey designs (on the ground and in the background) should be somehow involved in the rest of the picture. Incorporate that feel with everything else. Im not sure how, but I just wanted to offer my opinions. (: good job besides that.

[HernanZh]

Thanks for the comments. I'll try to incorporate all the tips, can't promise I'll be successful on that, haha