Pixel art
Pixel art as a discipline focuses on creating digital images by using a single pixel as the main building block and expression tool. It’s not a technological limitation, it’s a deliberate choice by the artist which forces them to be intentional and picky with the decoration.
When the job is done, the viewers imagination makes up for the lack of detail, which creates extra personal connection. At the moment I am learning to make 1-bit pixel art for Playdate games, and it can hardly get more personal than that.
Pixel art has a long prehistory that makes it centuries or millennia older than computers (textile techniques such as cross-stitch can be considered pixel art). Despite this, it is very "digital", with each pixel directly corresponding to a group of bits in the storage. The simplicity of the concept also makes it easier to learn than e.g. 3D modelling or even 2D vector art.
From the permacomputing point of view, pixel art can be a good choice because of its low system requirements, long tradition and aesthetic anti-maximality. Alternatives that are worth considering include low-complexity vector art and generative art based on short computer programs.
Taken from https://permacomputing.net/pixel_art/
Tools #
On a Mac I use Aseprite ($20) with a mouse or an iPad in a sidecar mode and an Apple Pencil. The sidecar works exactly as you would expect but it is not as fun as a native app would be: no support for gestures and it’s hard to interact with the UI – you have to aim a lot. When on a couch, I go for Pixaki ($27), it is the best available native app.
There are other semi-free options or exotic tricks you can try, in no particular order:
- Turning iPad into a classic Mac
- Best iPad app for Playdate – a forum thread
- How to do pixel art in Procreate? – YouTube video (sells a 20€ brush set, I didn’t buy)
- What program to use for pixel art? – YouTube video by Brandon James Greer who’s awesome
Tutorials #
A good tip from one of the numerous tutorials online: just stick to any software and draw a lot. I chose Aseprite and watched the Aseprite crash course in 30 minutes.
Then to understand the techniques and terms better, I continued with The ultimate pixel art tutorial on YouTube and Creating pixel art guide on pixeljoint. Both are spot on, pick whatever format you like the most.
I wrote some notes while watching the ultimate tutorial video:
- Value (intensity of a pixel) is the most important parameter. The drawing should look well in grayscale.
- Drawing lines
- “Doubles” are two adjacent pixels in the contour
- “Jaggies” are jagged lines – when some pixels are out of line
- Both can be artistic choices, but when not used intentionally, result in muddiness
- Silhouette is a good starter for a drawing
- Saturation is important
- High saturation can be obnoxious, but can also use to highlight important details
- Low saturation makes everything look off
- Contrast
- High color contrast to highlight differences
- Low contrast for shade
- Balance out both to focus attention on certain areas of the drawing
- Light and shadow
- TL;DR James Gurney - Color and light
- “Pillow shading” – when the light doesn’t help to understand the shape of the object and makes everything look flat
- Temperature
- Color temperature is relative, colors appear warmer or colder only in comparison to smthing
- Hue shift
- Another technique to shade the drawing
- Value shift – color intensity change
- Hue shift – color quality + intensity change
- Colour range & palettes
- Limit the palette for cohesive appearance
- Get pre-made palettes on https://lospec.com/
- Dithering!
- A shading technique using patterns of different shapes
- A blurred dithering pattern would appear as a new color
- Not in the video, but if you are reading this, check out the ditherpunk article
- Anti-aliasing
- Used to smoothen a shape
- Can be internal (inside the boundaries) and external (outside of the boundaries)
- The way external anti-aliasing is perceived depends on the background and might not work well wen planted onto a different color
- Advanced technique, use sparingly
- Outline
- A few options here: single, double, coloured, area, light source, sel-out (selective outlining), broken, no outline
- CRT gotcha
- Old games were designed for CRT screens. They blur the pixels, giving them a certain aesthetic
- Some game designers used this to increase the limited palette of the platform
Playdate #
-
In Playdate Art: Scale Donald Hays explains why 1 bit art looks so good on the Playdate screen. The physical scale matters a lot: the pixel density is much higher than in the OG Game Boy. The article (and especially the illustrations) helps you build a useful mental model.
Since Playdate is so evocative of older systems, then, it may be tempting to use similar sizes when designing for it. But I feel that would likely be a mistake. Because the pixel density is so high, an 8-pixel font or 16-pixel character will look very small on the screen.
In fact, art of any given size will appear about half as big as it would on the Game Boy. Because of that, consider drawing larger assets than you might otherwise if you were designing a retro-style game. A 24-pixel character on Playdate will appear slightly smaller than a 16-pixel character on the Game Boy, and a 32-pixel character on Playdate will be comparable to the Game Boy’s 16.
Other links #
- How we fit a NES game in 40kb – a survey of all the optimizations that went into making of a modern NES cartridge, lots of insights. Turns out, only 8 sprites can be render simultaneously in a line. The sprite flickering that you can find in some NES games is not a bug in your emulator, it’s a trick employed by game devs.