5 ms·

Pixel Art Tips for Programmers

172 points by ibobev 1y ago

Daub 1y ago
To these fine tips I would add: ‘test on as many devices as you are reasonably able’. Something can look fine on your laptop but lousy on the platform for which you are aiming to disseminate.
- spankibalt 1y ago
  > "[...] I would add: ‘test on as many devices as you are reasonably able’." Testing on a reasonable amount of different screens (and software-based filters etc.) is excellent advice for too many people forget this. Of course that's also always a money, time or motivation (goal) question...
  - NooneAtAll3 1y ago
    > and software-based filters etc. ...and different screen brightness levels
- zwnow 1y ago
  This also applies to webdev. I develop a lot with the chrome devtools but once stuff is in mobile it doesn't quite work out due to people using different browsers. The browser bar sometimes being on top or on the bottom hiding controls... I started to just center stuff in mobile ignoring like 20% of space in top and the bottom.
  - neonmagenta 1y ago
    this is something web and mobile devs can skip a lot of times it seems these days. testing on only the best screens or most recent device simulators and they leave their work looking like a mess across screens because its optimized for something specific rather than checking or being responsive
spankibalt 1y ago
These are just incredibly basic, and oft repeated, pixel art 101 guidelines. And, quite frankly, some of those tips are what I consider bad advice (e. g. a pixel artist has to deal with color theory as much as a character artist or animator has to deal with anatomy; a good understanding of color theory is also necessary to nurture good taste in the first place... so the quicker one gets into that, the better). Also, just like in coding: Constraints don't hide your flaws (per se); you fuck up, people will (let you) know. And pieces in constrained environments can be much, much harder to pull off. I had hoped for something closer to the intersection of pixel art and graphics programming. Well, maybe in the future.
- Daub 1y ago
  > a good understanding of color theory is also necessary. Agreed. I would also speak out again the uninformed use of pre-configured color combinations. As someone who teaches art/design these are the bane of my life… students use them as a replacement for color theory. A designer should at least know how to parse a color into its hue, saturation and lightness components. Most everything else should follow naturally.
- __loam 1y ago
  It's for an uninformed audience so it's not like it's supposed to be some deep insights
- gyomu 1y ago
  I hate to be that guy but the quality of OP’s showcased pixel art is pretty mediocre. Strikes me as someone who’s still learning and figuring things out and not in a particularly solid position to teach others.
__loam 1y ago
I'm a programmer who started doing pixel art for a personal project in 2022 and this is solid advice. I didn't really think about it too hard but I do find myself negotiating with the canvas to get something to look right when it's just a few pixels off lol
codingdave 1y ago
> Programmers are known to not have a strong suit for art related disciplines Full stop. There are quite a few coders with artistic talents. And even if some specific individual does not have such talent, they are allowed to have their own taste - we do not need to train ourselves to mimic other people's preferences.
- zwnow 1y ago
  Gotta agree, I used to draw portraits before I started programming a few years ago... For reference, my last ever portrait: https://imgur.com/a/sEQiLu4 https://imgur.com/a/sEQiLu4 I also know plenty of programmers who are great musicians. Programming itself is creative work... Completely lost interest in art due to AI though.
  - engeljohnb 1y ago
    I would wager that's how it goes for most people that are both good artists and good programmers -- they were artists first, then learned to program. It takes a lot longer to become a reasonably good artist than it does to become a reasonably good programmer. I suspect that might be why the article opens the way it does.
    - spankibalt 1y ago
      > "It takes a lot longer to become a reasonably good artist than it does to become a reasonably good programmer." Such overgeneralizations are not helpful. People gravitate stronger towards certain creative disciplines, or a selection of them; how long it exactly takes to develop-out "reasonable" skills is dependent on a litany of factors, some of which cannot be controlled (e. g. force majeure). Both programming and pixel art requires unwavering commitment and exercise´; there is no way to "wing it" if you are intellectually honest and take your craft seriously.
      - engeljohnb 1y ago
        I think it is helpful for certain purposes, and I think you'll be hard pressed to find exceptions to the general rule. Art is all about repetition. Even if you've done it successfully many times, you still need to keep doing it until it's second nature. Programming is more like solving puzzles. Once you've solved it once, you can pull the solution out of your head as many times as you need, as long as you still remember it. With art, it doesn't matter if you remember how to do it, it still takes practice to get reproducible results. Of course it takes longer.
itomato 1y ago
They’re your pixels for your project, not some conformation challenge.
engeljohnb 1y ago
After classical art training, I thought pixel art would be fast and easy -- the low resolution would disguise any mistakes. Quite the opposite. The fewer pixels, the more each one has to be perfectly in place. Honestly should've been obvious in hindsight. If I have any games left in me after my current one's finished, I'll just use as high a resolution as I'm comfortable with. Unless the sprites are truly tiny, like 16x16 with 2 or 3 frame animations, I don't know if pixel art makes a good shortcut to an aesthetically appealing game. Then again, it might be easier than six years of every day practice.
- rockskon 1y ago
  If you want to see someone who has truly done wonders with pixel art - the game Look Outside has so much incredible (and disturbing) pixel art.
- torginus 1y ago
  More than a dozen artists I've talked to told me pixel art is entirely it's own discipline - they're no more comfortable approaching it than a layman would. The traditional workflow of creating a rough sketch on paper or tablet then progressively refining it just entirely doesn't apply.
  - spankibalt 1y ago
    > "The traditional workflow of creating a rough sketch on paper or tablet then progressively refining it just entirely doesn't apply." For many a pixel artist that is a typical workflow, especially when working from reference, e. g. by retracing/"converting", say, an architectural period piece such as a street view to be used in a period- and location-accurate adventure game. In other words a classic line-to-pixel A/D conversion.
- amelius 1y ago
  Makes me wonder if GenAI can get these kinds of subtleties right.
  - 1y ago
Irtaza1 1y ago
[dead]
merelysounds 1y ago
Good advice. I draw pixel art for an image logic puzzle game [1] and these resonate, especially 2. (Negotiate) and 5. (Constraints). Another thing that helped me was to experiment with different canvas sizes and styles. I was surprised how changing these affects my process, speed and results. Then again, this can be difficult in an ongoing project. [1]: https://apps.apple.com/app/nonoverse-nonogram-puzzles/id6748441182 https://apps.apple.com/app/nonoverse-nonogram-puzzles/id6748...
the_gipsy 1y ago
I don't think the author's two samples look good.
- mock-possum 1y ago
  The samurai one looks pretty good to me. The Kirby and Mario ones are… well they’re awfully derivative, natch.
jasonkester 1y ago
Well timed. I've been going through this process as a non-artist forced to churn out some tiles for a game I'm building [1]. I started off simply cribbing all the tiles from Ultima IV for the Apple II, then gradually adding some rudimentary new tiles as the need arose. Starting with a pixel "rock" and "stick", changing the clothes on existing characters, then eventually gaining a bit of confidence and launching off on more complicated things. Eventually coming back and redoing all the "borrowed" tiles, and launching off into new, more detailed, characters and items. "Constraints hide your flaws" got me a long way. I've relaxed those constraints a bit as I got better at shading, so it's easy to tell which tiles were drawn at what point in my "career" [1] https://valtima4.com/ https://valtima4.com/, the Survival Crafting RPG you would have played on you Apple II in the '80s. It's essentially Valheim crammed into Ultima IV's interface. Single player works up through the first couple bosses, but it's not really ready to ship into early access yet.
Lonrer 1y ago
Constraints help because they favor harmony. If you reuse the same limited palette for all your sprites it's more likely all objects will seem like they share the same lighting. It's very similar to making music. You can create sounds on a full spectrum of of frequencies but we have constraints like tonality to limit our pitches to semitones and center our compositions around keys. Sometimes we actually want to create feelings of dissonance and then stepping out of these limitations while adhering to them otherwise helps contrasting them even more. Contrast seems to be also one of those things I see even very experienced pixel artists get wrong, especially in the context of games where visibility can be crucial. There's many games with beautiful spritework but actually playing them is very tiring because all of the sprite work uses the same range of the palette. You want to consider if things are in foreground or background, interactable or not, dangerous or friendly and then limit how much the range of their colors intersect. Creating contrast through hues is more common (, see red hostile vs blue friendly), but differentiation through saturation and value/luminosity is much more effective and readable at a glance while also being more accessible to color blind people by default.
nickdothutton 1y ago
From great constraints comes great creativity.

172 points by ibobev 1y ago

Daub 1y ago

To these fine tips I would add: ‘test on as many devices as you are reasonably able’. Something can look fine on your laptop but lousy on the platform for which you are aiming to disseminate.

spankibalt 1y ago
> "[...] I would add: ‘test on as many devices as you are reasonably able’." Testing on a reasonable amount of different screens (and software-based filters etc.) is excellent advice for too many people forget this. Of course that's also always a money, time or motivation (goal) question...
- NooneAtAll3 1y ago
  > and software-based filters etc. ...and different screen brightness levels
zwnow 1y ago
This also applies to webdev. I develop a lot with the chrome devtools but once stuff is in mobile it doesn't quite work out due to people using different browsers. The browser bar sometimes being on top or on the bottom hiding controls... I started to just center stuff in mobile ignoring like 20% of space in top and the bottom.
- neonmagenta 1y ago
  this is something web and mobile devs can skip a lot of times it seems these days. testing on only the best screens or most recent device simulators and they leave their work looking like a mess across screens because its optimized for something specific rather than checking or being responsive

spankibalt 1y ago

These are just incredibly basic, and oft repeated, pixel art 101 guidelines. And, quite frankly, some of those tips are what I consider bad advice (e. g. a pixel artist has to deal with color theory as much as a character artist or animator has to deal with anatomy; a good understanding of color theory is also necessary to nurture good taste in the first place... so the quicker one gets into that, the better). Also, just like in coding: Constraints don't hide your flaws (per se); you fuck up, people will (let you) know. And pieces in constrained environments can be much, much harder to pull off. I had hoped for something closer to the intersection of pixel art and graphics programming. Well, maybe in the future.

Daub 1y ago
> a good understanding of color theory is also necessary. Agreed. I would also speak out again the uninformed use of pre-configured color combinations. As someone who teaches art/design these are the bane of my life… students use them as a replacement for color theory. A designer should at least know how to parse a color into its hue, saturation and lightness components. Most everything else should follow naturally.
__loam 1y ago
It's for an uninformed audience so it's not like it's supposed to be some deep insights
gyomu 1y ago
I hate to be that guy but the quality of OP’s showcased pixel art is pretty mediocre. Strikes me as someone who’s still learning and figuring things out and not in a particularly solid position to teach others.

__loam 1y ago

I'm a programmer who started doing pixel art for a personal project in 2022 and this is solid advice. I didn't really think about it too hard but I do find myself negotiating with the canvas to get something to look right when it's just a few pixels off lol

codingdave 1y ago

> Programmers are known to not have a strong suit for art related disciplines Full stop. There are quite a few coders with artistic talents. And even if some specific individual does not have such talent, they are allowed to have their own taste - we do not need to train ourselves to mimic other people's preferences.

zwnow 1y ago
Gotta agree, I used to draw portraits before I started programming a few years ago... For reference, my last ever portrait: https://imgur.com/a/sEQiLu4 https://imgur.com/a/sEQiLu4 I also know plenty of programmers who are great musicians. Programming itself is creative work... Completely lost interest in art due to AI though.
- engeljohnb 1y ago
  I would wager that's how it goes for most people that are both good artists and good programmers -- they were artists first, then learned to program. It takes a lot longer to become a reasonably good artist than it does to become a reasonably good programmer. I suspect that might be why the article opens the way it does.
  - spankibalt 1y ago
    > "It takes a lot longer to become a reasonably good artist than it does to become a reasonably good programmer." Such overgeneralizations are not helpful. People gravitate stronger towards certain creative disciplines, or a selection of them; how long it exactly takes to develop-out "reasonable" skills is dependent on a litany of factors, some of which cannot be controlled (e. g. force majeure). Both programming and pixel art requires unwavering commitment and exercise´; there is no way to "wing it" if you are intellectually honest and take your craft seriously.
    - engeljohnb 1y ago
      I think it is helpful for certain purposes, and I think you'll be hard pressed to find exceptions to the general rule. Art is all about repetition. Even if you've done it successfully many times, you still need to keep doing it until it's second nature. Programming is more like solving puzzles. Once you've solved it once, you can pull the solution out of your head as many times as you need, as long as you still remember it. With art, it doesn't matter if you remember how to do it, it still takes practice to get reproducible results. Of course it takes longer.

itomato 1y ago

They’re your pixels for your project, not some conformation challenge.

engeljohnb 1y ago

After classical art training, I thought pixel art would be fast and easy -- the low resolution would disguise any mistakes. Quite the opposite. The fewer pixels, the more each one has to be perfectly in place. Honestly should've been obvious in hindsight. If I have any games left in me after my current one's finished, I'll just use as high a resolution as I'm comfortable with. Unless the sprites are truly tiny, like 16x16 with 2 or 3 frame animations, I don't know if pixel art makes a good shortcut to an aesthetically appealing game. Then again, it might be easier than six years of every day practice.

rockskon 1y ago
If you want to see someone who has truly done wonders with pixel art - the game Look Outside has so much incredible (and disturbing) pixel art.
torginus 1y ago
More than a dozen artists I've talked to told me pixel art is entirely it's own discipline - they're no more comfortable approaching it than a layman would. The traditional workflow of creating a rough sketch on paper or tablet then progressively refining it just entirely doesn't apply.
- spankibalt 1y ago
  > "The traditional workflow of creating a rough sketch on paper or tablet then progressively refining it just entirely doesn't apply." For many a pixel artist that is a typical workflow, especially when working from reference, e. g. by retracing/"converting", say, an architectural period piece such as a street view to be used in a period- and location-accurate adventure game. In other words a classic line-to-pixel A/D conversion.
amelius 1y ago
Makes me wonder if GenAI can get these kinds of subtleties right.
- 1y ago

Irtaza1 1y ago

[dead]

merelysounds 1y ago

Good advice. I draw pixel art for an image logic puzzle game [1] and these resonate, especially 2. (Negotiate) and 5. (Constraints). Another thing that helped me was to experiment with different canvas sizes and styles. I was surprised how changing these affects my process, speed and results. Then again, this can be difficult in an ongoing project. [1]: https://apps.apple.com/app/nonoverse-nonogram-puzzles/id6748441182 https://apps.apple.com/app/nonoverse-nonogram-puzzles/id6748...

the_gipsy 1y ago

I don't think the author's two samples look good.

mock-possum 1y ago
The samurai one looks pretty good to me. The Kirby and Mario ones are… well they’re awfully derivative, natch.

jasonkester 1y ago

Well timed. I've been going through this process as a non-artist forced to churn out some tiles for a game I'm building [1]. I started off simply cribbing all the tiles from Ultima IV for the Apple II, then gradually adding some rudimentary new tiles as the need arose. Starting with a pixel "rock" and "stick", changing the clothes on existing characters, then eventually gaining a bit of confidence and launching off on more complicated things. Eventually coming back and redoing all the "borrowed" tiles, and launching off into new, more detailed, characters and items. "Constraints hide your flaws" got me a long way. I've relaxed those constraints a bit as I got better at shading, so it's easy to tell which tiles were drawn at what point in my "career" [1] https://valtima4.com/ https://valtima4.com/, the Survival Crafting RPG you would have played on you Apple II in the '80s. It's essentially Valheim crammed into Ultima IV's interface. Single player works up through the first couple bosses, but it's not really ready to ship into early access yet.

Lonrer 1y ago

Constraints help because they favor harmony. If you reuse the same limited palette for all your sprites it's more likely all objects will seem like they share the same lighting. It's very similar to making music. You can create sounds on a full spectrum of of frequencies but we have constraints like tonality to limit our pitches to semitones and center our compositions around keys. Sometimes we actually want to create feelings of dissonance and then stepping out of these limitations while adhering to them otherwise helps contrasting them even more. Contrast seems to be also one of those things I see even very experienced pixel artists get wrong, especially in the context of games where visibility can be crucial. There's many games with beautiful spritework but actually playing them is very tiring because all of the sprite work uses the same range of the palette. You want to consider if things are in foreground or background, interactable or not, dangerous or friendly and then limit how much the range of their colors intersect. Creating contrast through hues is more common (, see red hostile vs blue friendly), but differentiation through saturation and value/luminosity is much more effective and readable at a glance while also being more accessible to color blind people by default.

nickdothutton 1y ago

From great constraints comes great creativity.