Deviation Actions

Cyangmou's avatar

Readability - Pixel art Style possibilities

By Cyangmou
544 Favourites
Examples were crafted with leaving value completely neglected.
It's a tut about shape contrasts.
Examples at the end are the ones which generally should "work best" based on logic. SInce a whole lot more factors usually play part in this some other examples look really nice as well - so take what I wrote there with a grain of salt and fgo with what looks best for yourself.
Image details
Image size
506x896px 79.52 KB
© 2018 - 2021 Cyangmou
Join the community to add your comment. Already a deviant? Log In
BinaryBarfer's avatar
I'm loving your tutorials on pixel art!
Just wanted to say, 2a is the best.
I really like the very simplistic line less style, how about you?
Cyangmou's avatar
My personal preference for that size is b.
for bigger sprites i prefer something between e and f.
Usually I use a density of 2 for most backgrounds.

But it's all personal preference and I believe each of those can look nice, depending on the hardware it's optimized for and the exact technical level of how it is pulled off.

DaleraTheHedgedingo2's avatar
thank you for this tutorial. Personally I like the 2B one best, since I switch between that and 1B for spriting depending on map detail XD
These are great! Thank you for the tutorial! Only one quick question: Did you use DB32 as the color palette? If not, what did you used?
Cyangmou's avatar
I always use my own palette(s), unless I do something specifically.
Platypusofdoom's avatar
The More You Know These tutorials are teaching me so much about sprites!
RedSpotSylphina's avatar
Interesting, thanks for sharing :)
NinjaStooge's avatar
Amazing! I wish I can learn how to make those!

dragongirl56's avatar
Ooh I’ve been struggling with this lately. Thanks for the suggestions!
YourPalRex's avatar
This can be useful later on
asinnelius's avatar
So many possibilities...
soulSmith1's avatar
Learn and steal
infinipede's avatar
Nice. Definitely a helpful rundown of the topic. It really helps to see several different examples of backgrounds and characters, instead of just a few (usually tuts covering this just do one each, a simple and complex version.)

One interesting thing (that is perhaps intentional) is that the lack of contrasting dark green on bg 4 makes the small pattern in the background pop a lot less than 3 does for me. Could just be my monitor. I also think it depends on what it's going for.

Going from doing mostly totally nonfunctional portraits and icons to functional tilesets this is definitely something i've had trouble with, but looking at the examples makes it a lot easier to understand some fixes that might help when compromising detail for readability.
Cyangmou's avatar
yeah all textures and all sprites differ in relative brightness.
But since the example is not about color contrast, but about shape conttrast the slight differences in value don't matter.
I mean at the end everybody anyways goes with what they like most, but the example here is more to illustrate the general spectrum of the possibility space.
As you say, 2 examples ar enot enough to illustrate the differences.
infinipede's avatar
true that it is about shape rather than color. i think the two are definitely connected but it is easier to see how shapes contrast w/ the examples you gave. i guess i tend to think more about color than shape when it comes to contrast, so it's something I'll have to consider more.

your tutorials are always concise and easy to understand, so ty for continuing to make them.
xlion95's avatar
Interesting. The 5th texture looks absolutely hideous on its own but it is often used successfully in many pixel classics such as final fantasy 6.
Cyangmou's avatar
well i didn't incorporate it bc. i thought it is great, but rather as subject to test sprites on it.
It's like how most beginners draw their first grass texture =)
darkhorse661's avatar
Great share!  One question -- "complimentary red-green contrast on sprites = best case" ... curious about color-blind players.  Isn't that sailing right into that trap? That always comes up in game art.
Cyangmou's avatar
Indeed, but for this example also it's just about shape contrast, not color contrast.
Fact is that color has very little to do with the contrasting effects outlines and bg patterns have.

I also got a gif I have to prepare for DA which makes the bg red and gray as well.
But uploading gifs on DA requires a preview and I haven't gotten time to do that yet.
Check back in a few days or check my twitter, where gif-uploading doesn't require previews.
darkhorse661's avatar
Thanks for explaining.  The work you do is amazing and your commitment to sharing teaching materials / examples is top notch.  
Join the community to add your comment. Already a deviant? Log In