Cyangmou's avatar

Readability - Pixel art Style possibilities

531 21 13K (1 Today)
By Cyangmou   |   
© 2018 - 2020 Cyangmou
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 size
506x896px 79.52 KB
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
BinaryBarfer's avatar
BinaryBarferHobbyist Digital Artist
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
CyangmouProfessional Digital Artist
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
DaleraTheHedgedingo2Student Artist
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
cristovaop's avatar
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
CyangmouProfessional Digital Artist
I always use my own palette(s), unless I do something specifically.
Platypusofdoom's avatar
PlatypusofdoomStudent Interface Designer
The More You Know These tutorials are teaching me so much about sprites!
RedSpotSylphina's avatar
RedSpotSylphinaProfessional Digital Artist
Interesting, thanks for sharing :)
NinjaStooge's avatar
NinjaStoogeHobbyist Digital Artist
Amazing! I wish I can learn how to make those!

dragongirl56's avatar
dragongirl56Hobbyist Digital Artist
Ooh I’ve been struggling with this lately. Thanks for the suggestions!
hamedabecherdraws's avatar
hamedabecherdrawsStudent Traditional Artist
YourPalRex's avatar
YourPalRexHobbyist Digital Artist
This can be useful later on
asinnelius's avatar
So many possibilities...
soulSmith1's avatar
soulSmith1Student General Artist
Learn and steal
infinipede's avatar
infinipedeHobbyist Digital Artist
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
CyangmouProfessional Digital Artist
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
infinipedeHobbyist Digital Artist
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
xlion95Professional Digital Artist
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
CyangmouProfessional Digital Artist
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
darkhorse661Hobbyist Digital Artist
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
CyangmouProfessional Digital Artist
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
darkhorse661Hobbyist Digital Artist
Thanks for explaining.  The work you do is amazing and your commitment to sharing teaching materials / examples is top notch.  
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In