csanyk.com

video games, programming, the internet, and stuff

Pixel Art: a little theory and philosophy on technique

In my notes, I’ve been talking about the technique I’ve adopted for working on my pixel art projects. I am not sure how clear it is when I describe changing resolutions, so I wanted to make that more clear.

First, I start with a 16×16 pixel drawing board. This is tiny, but about just right for starters. I just zoom in all the way to 3200%. It doesn’t take long to fill in the entire drawing board one pixel at a time with the pencil at this size, so I can work very quickly. 16×16 is just enough resolution to allow me to rough out a stick figure, which may be all I need.

16×16 is fine if I want a look that emulates the primitive capabilities of the Atari 2600 or other 70’s computers. At this resolution, you really can’t do any kind of detail. You have to just get the approximate overall shape, and imply a lot. You’re creating an impression. It’s a bit like the game Pictionary — you don’t need to draw something fully realized, just enough to get the point across and get the idea into the viewer’s head. If the drawing subject is something familiar and distinctive, 16×16 can be sufficient.

If it is, I stop there. But usually, it isn’t, or I’ll want to go a bit further. It can be tempting to do this when I don’t really need to. Weighing need vs. want is mainly a matter of personal preference, but partially it can be dictated by stylistic constraints that I choose to impose on myself.

Often, I’ll need to do some finer detail work, which requires that I resize the image. For example, with my Spider-Man, I didn’t think that I had captured the essence of the costume at 16×16, because the eyes of the mask weren’t possible to draw at 16×16. The 16×16 version was just barely on the edge of recognizability, I thought, and I wanted to put it over the edge, which necessitated some higher resolution pixels to bring out the details I needed.

When I need to increase resolution, I don’t want the size change to alter the drawing in any way. I want to keep the colors pure, and where I deliberately placed them. Any smoothing that I want to do, I’ll do myself. To achieve this, I always resize by a factor of 2: 16×16, 32×32, 64×64. Using “nearest neighbor” resampling for the scaling avoids scaling artifacts (anti-aliasing). When you double the image sizes, nearest neighbor resampling algorithm takes each pixel and splits it into four pixels of the same color, without trying to blend any nearby colors to achieve a smoothing effect. The result is that the image looks exactly like the original version, but exactly double the resolution. This is exactly what I need.

16x16px

16x16 grid

32x32px

32x32 grid

64x64px

64x64 grid

If I really needed to, I could go down to 128×128 (or 256×256, or even 512×512) resolution, but I almost never need to go beyond 64×64. Whether drawing a sprite or a tile, 128x128px is really pretty big. For a stand-alone piece of art, higher resolution can make more sense, but for videogame graphic resources, it’s generally not practical to go beyond 128×128. So, it matters what your intended output is for.

128x128px

128x128 grid

Other than very fine outlining, which I try to avoid using, I don’t generally need to go any higher res than that. (Although as a final step for these blog posts I’ve been blowing the final work up to 512×512, without adding any additional details — just so that all the features are easier to see.) Those single pixels at 16×16 end up being 32×32 blocks of pixels at 512×512.

One advantage to this process is speed. Each pixel I place at 16×16 is doing sixteen times the “work” that a single pixel at 64×64 res does. Also, there are fewer possible positions for these pixels at low res, so making decisions is less complicated. It’s a lot easier to decide where to place a pixel when there are only 256 possible answers (16×16 = 256) as opposed to 4096 possible answers (64×64 = 4096). So I have to make 1/16 the decisions and each decision I make does 16x the work, and is 16x more obviously right or wrong.

The disadvantage is that at low resolution, I am constrained to the grid. Maybe my drawing really needs that pixel (that will become a 32×32 chunk of color at 512×512) at a position that is not exactly in line with my 16×16 starting grid. By eliminating all of those possible decisions at the first level of detail, I might end up causing myself additional work later, if I end up needing to shift a block over here or there. Usually this isn’t an issue, as these fine adjustments tend only to take some fraction of a pixel and move it slightly, so we’re still dealing with a small number of steps. At each resolution jump, I’m splitting my pixels into quarters, so assuming the placement at previous resolution was approximately right, and I’m making the adjustments at the appropriate time, I’m probably at most only going to move (or add or remove) half of any given pixel from the previous detail level. Worst case, if I completely made a mistake, I’ll need to move the whole pixel from the previous resolution.

But, another risk is that by working at too low resolution, it could be that the grid constraints affect my imagination, and close me off from possibilities that I might have considered if I could have those choices available to me at the lower size. Once I commit to my decisions at low res, it obscures the decisions that become available when I resize to higher resolution. All I can say about this is that hopefully I won’t be too hampered by this, and as I gain experience I’ll be able to avoid missing these opportunities by keeping my mind open and “knowing” that a 4×4 chunk of pixels at 64×64 resolution (that was once a single pixel at 16×16) can be placed anywhere I need it to be on that 64×64 grid.

What lead me to discover this method, with resizing the image, is due to the program I’m using, Paint.Net. Currently, Paint.NET does not seem to have a feature that allows me to change the shape of the paint brush or pencil tools. The pencil is always 1×1 pixel, and the brush can change sizes but is always circular, which I find less useful than a square for pixel art.

Other drawing programs that I’ve used, such as Photoshop, don’t have this limitation, so this process I’ve been using may not make sense if you have greater control over your tools — you may be able to start out with a higher resolution image and simply use a larger pencil or a square brush tool.

On the other hand, if I could start out at 64×64 resolution, and simply pick whatever-sized tool, I’d still be faced with more decisions: which size pencil/brush do I want to use now? Precisely where on the grid do I want to place that NxN pixel block of color that the brush is going to lay down for me? This doesn’t sound very complicated, but believe me, it really does make the process of drawing vastly more complicated than making single-pixel choices at the 16×16 level.

So, if I had to think about those issues while working on a high resolution canvas, it would slow me down because the complexity of the decisions I have to make make would multiply exponentially. In a way, then, I prefer having the more limited tools because I find that having fewer choices and more limitations is something I can use as a strength. One could call it embracing the medium.

Obviously this is just one way to do it, and I won’t even go so far as to say that it’s the best way. The best way is what ever works best for you. For me, I like this approach a lot because I can get pretty good results with it very quickly, at least for the particular style of pixel art that I’m currently interested in, which is chunkier and feels more like Atari 2600, Colecovision, or Commodore 64 graphics.

In fact, it’s so easy for me to get results that I’m happy with that I almost hesitate to call it “art”, or my ability “talent”. But the results are strong, and therefore they are art. And the talent lies in developing and refining the technique to make achieving the results as effortless as I do. It still requires a keen eye to know what pixel choices will make the drawing better or worse, and when a drawing is complete or still needs work.

If I were going for a style more like a 16-bit era game, I don’t know that this approach would be as suitable. My approach so far has employed dithering techniques for shading, and has not therefore explored color juxtaposition very deeply. My highlighting and shading technique as this point has been crude, which suits the more primitive Atar 2600 style that I am emulating, but with the 16-bit console generation pixel art became much more sophisticated, although, in my opinion lost much of its strength and charm at the same time, due to losing its simplicity and minimalism. The art style I’ve been using so far has been very minimal, employing as few colors as I can get away with, and minimal to no use of outlining, shading, dithering, and anti-aliasing. For this specific approach, I find that my technique works very well for me and allows me to get results that I am happy with very quickly. For other styles, other techniques and approaches probably become more attractive. I say probably only because I have not yet attempted other styles yet, but it seems relatively certain that the approach I’m using is not the best for every style of pixel art, and no style is inherently superior to any other.

Updated: 2017-Mar-27 — 2:59 pm

2 Comments

Add a Comment
  1. I know this is an old article, but I’d love to see and actual example, step-by-step of your process!

      

    1. Thanks for the suggestion. I could do it in a couple of ways, either as a video capture or as a set of still images saved at various stages in drawing. There are numerous pixel artists (who frankly are better than me at this) who post videos about technique to YouTube, and you can learn a lot from watching those. I might create one of my own, but I need to find a good video capture setup. Still images of each step might be easier for the short term.

        

Leave a Reply

csanyk.com © 2016
%d bloggers like this: