The document discusses different dithering techniques that can be used to create gradients with a limited color palette in pixel art. It describes checkered, parallel line, discontinued line, dent, intertwined, and random dithering patterns. It provides examples of different games and how they used dithering, and recommends when to use dithering based on the number of colors, size of the art, and whether it is animating. Dithering works best for large non-animated areas like backgrounds but can make sprites look gritty.
The document discusses different dithering techniques that can be used to create gradients with a limited color palette in pixel art. It describes checkered, parallel line, discontinued line, dent, intertwined, and random dithering patterns. It provides examples of different games and how they used dithering, and recommends when to use dithering based on the number of colors, size of the art, and whether it is animating. Dithering works best for large non-animated areas like backgrounds but can make sprites look gritty.
The document discusses different dithering techniques that can be used to create gradients with a limited color palette in pixel art. It describes checkered, parallel line, discontinued line, dent, intertwined, and random dithering patterns. It provides examples of different games and how they used dithering, and recommends when to use dithering based on the number of colors, size of the art, and whether it is animating. Dithering works best for large non-animated areas like backgrounds but can make sprites look gritty.
The document discusses different dithering techniques that can be used to create gradients with a limited color palette in pixel art. It describes checkered, parallel line, discontinued line, dent, intertwined, and random dithering patterns. It provides examples of different games and how they used dithering, and recommends when to use dithering based on the number of colors, size of the art, and whether it is animating. Dithering works best for large non-animated areas like backgrounds but can make sprites look gritty.
Too much dithering causes your pixel art to look ROUGH and GRAINY. It gives pixel art an unnecessary gritty texture. BUT Large cel-shaded gradients without dithering result in FLAT and STRIPED areas.
Over time, game graphics added more and more colours. Dithering is less common now. It requires a lot of space to be used properly, so that’s why it’s rarely found in sprites but occasionally in backgrounds. It also harms readability, as seen in Chapter 4, p.26.
To understand how often and to what degree dithering is used, study
game art and learn from your favourites. You’ll learn a lot from just observation. Try shading with clean shapes first, though.
Street Fighter Alpha 2 (PS1, Arcade, various consoles)
When should I try dithering?
• Gradients that would otherwise use too many colours to do manually. • Things that don’t animate. Seriously. • Textures (see stylized dithering). • Heavy colour limitations. • Backgrounds: skies, space, vast areas that may otherwise look empty or flat.
3 This is a sprite from Monster in My Pocket (NES). The fully dithered version on the top left is the original as it appears in the game within NES limitations. The others are modified versions.
PROS CONS DITHERING + Good for limited colours - Rough and gritty + Skies or vast backgrounds - Time-consuming - Unnecessary texture - Not suitable for sprites - Useless for high colours - Hinders animation - Wobbling frames SMOOTH SHADING + Small sprites and tile-sets - May look flat + Readable sprites - Doesn’t do gradients well + Better for animation + Soft painted or celshaded feel
4 Checkered dithering These are the most common patterns you will find as they offer the most variety. Below are all the levels of brightness within the checkered ‘family’.
Should you get lost, remember each level with a pattern.
Checkers, crosses, squares, diamonds, etc.
Mario Tennis (GBC)
You can choose how many levels of If you get to work on larger areas, you dithering you want between 2 shades. can freestyle the dithering a little bit, It all comes down to preference or the as long as you never have a wide pixel length of the gradient or how many (2x1 or 2 pixels that touch each other). shades you have. 5 Dithering for curves
Curves can be trickier to dither, so make sure to fiddle around to see how it looks. Sometimes you may get double pixels that look out of place. When this happens, you can select and slide the dithering you’ve already got, rather than redo it.
If your dithering is part of
a tile set, this may be unavoidable. This is because tile sets are always an even 1 tile, duplicated 2 tiles, one being number of pixels. and mirrored slightly different If this happens, make sure to have 2 different tiles.
Ecco the Dolphin (Genesis/Mega Drive)
6 Contrast
When you have no colour limitations, you should use dithering with caution. It’s best to avoid it. Your goal is to have dithering seamlessly blend colours without them standing out. If the difference between 2 colours is too high (high contrast), you probably shouldn’t dither.
With low contrast, it feels softer. with high contrast, it’s quite harsh!
Pokémon Mystery Dungeon 3: Earthworm Jim (Genesis/Mega Drive)
Explorers of the Sky (NDS)
Sonic Advance 2 (GBA)
Checkered dithering is most useful for gradients covering large areas.
Keep the contrast low, so the dithering will be smoother.
7 Other patterns Parallel lines
A type of dithering found in Genesis/Mega Drive games, but can be used today for stylistic purposes. For CRT TV’s, they are more effective 50-50 dithering than the regular checkers.
Left and centre: Vectorman
Right: Donald Duck in Maui Mallard
Lines can be used as smears or blur with limited palettes. Lines work better for blur than checkerboards do. This only works for limited animation, NOT smooth animations.
Pokémon Crystal (GBC)
Checkers are more suited for gradients. Parallel lines were for buffer-shades and opacity tricks for old CRT televisions. For more examples, check page 16.
8 Discontinued lines
A variant of the parallel lines. The only difference is that
this show more value and levels of gradients. It can also add a neat effect.
Beyond Oasis / The Story of Thor (Genesis/Mega Drive)
Pokémon Mystery Dungeon Strip Poker: aSGoC (PC DOS) Earthworm Jim 3: EoS (NDS) (Genesis/Mega Drive)
Ecco the Dolphin (Genesis/Mega Drive)
Dents
A variant of checkered dithering or parallel lines. It uses only
1 line of checkerboards. They resemble dents or teeth. This dithering is useful for textures if you have little space. This type isn’t suited for gradients, though! 9 Intertwined dithering
Kolibri (Sega 32X)
Intertwined Dithering (woven, overlapped, etc.) has patches of dithering enter much darker or lighter patches. The gradient sometimes goes back to lighter patches on its way to the darkest shade. Different patches of checkers are weaved together.
Ecco the Dolphin (Genesis/Mega Drive)
If you have trouble doing this manually, make 2 layers of dithering, and have them overlap!
You can still do this manually, but having 2 layers makes it easier not to get lost!
World of Illusion (Genesis/Mega Drive)
10 Random dithering
Randomized dithering doesn’t have much thought put to it. You still need to make sure the gradient seamlessly flows from light to dark. Random dithering can be obtained by randomly hand placing pixels here and there. However, it’s usually the result of filters, photo-manipulation or spray-paint tools.
Kirby’s Dreamland 3 (SNES)
This isn’t really hand-crafted pixel art, so it’s still advised to manually fix it. It can appear quite lazy, so use it in clever ways and on big canvases.
A gradient reduced to 4 colours with automatic dithering.
It still needs a lot of work and looks like random noise.
In most cases, random dithering isn’t recommended.
Try to make patterns or tiles out of them (see page 12)
11 Stylised dithering
Now here’s where things get interesting!
Get creative! The previous forms of dithering were quite rough. With stylised dithering, you can apply your own textures to create gradients without that gritty feel! Remember, that you need space to use these.
Stylised dithering is a great way to get started and have fun with textures!
By Michafrar Shovel Knight (PC)
12 Kirby’s Adventure (NES) Street Fighter Alpha: Warriors’ Dream (GBC)
You can even take random dithering (from p. 11) and turn them into repeating tile sets to avoid them looking chaotic. This randomness is controlled, rather than loose.
Crash ‘n’ the boys: Street Challenge (NES) Crystalis (NES)
Don’t confuse texturing with gradients!
Gradients are the transition from light to dark. Textures are the feel of material. Stylised dithering can be a combination or both, or just regular gradients. Textures don’t always need a gradient from light to dark! Dithering can provide texture if you use it for patches, but not as gradients.
These graphics below have textures, but no dithering nor gradients.
By Michafrar By guest artist Neoriceisgood By guest artist
Untitled-Works 13 Case Study: SMW2:Yoshi’s Island
Yoshi’s Island is bursting with stylized dithering. On this screenshot alone there are many examples.
Another thing to notice is that Yoshi’s Island chose to have smooth cel-shaded gradients for the sky. There is no dithering and it holds up well.
14 More than just gradients Breaking through cel-shading A modern way to use dithering is to break through cel shading. Even with unlimited colours, dithering sometimes imitate soft shading. Think of this usage of dithering like a smudge brush.
Pokémon Fire Red/ Leaf Green (GBA)
The highlight of Gengar’s horn blends into the darker main shade, rather than being cel-shaded. You can do the same technique, but just using a buffer-shade in your colour-ramps.
This looks fine cel-shaded but dithering looks better here …
Mixing colours Dithering can help you blend colours, especially on blurry displays. You’ll only use this technique if you’re working with limited colours, though.
15 Let’s see this technique in use with some parallel dithering used in this Genesis/Mega Drive sprite. The results don’t look pretty by modern standards, but it did look nice on CRT TV’s.
Computer graphics after this point would have more colours and even transparent (alpha) layers, so this technique is extremely rare nowadays. However, older graphical displays such as the 4 colour CGA mode hugely benefited from having extra values by blending cyan, magenta, black and white!
Space Racer (PC DOS)
We briefly discussed this in chapter 3(page 25) where with 4 colours you can easily obtain more values!
16 Brushes for dithering? When dithering is time-consuming, there are ways to use dithering-brushes! Some of these programs use dither patterns or brushes that help you speed things up. No need to “copy-paste” all those checkers.
Pro Motion GraphicsGale Graf x2
Aseprite and other programs allow you to make brushes too.
More interestingly, game artist and game developer Dan Fessler (@DanFessler) studies HD Index painting for Photoshop which makes dithering easier to manipulate.
Article: danfessler.com/blog/hd-index-painting-in-photoshop Preview video: youtu.be/7Q36EyvaYG8 Support the indie game Chasm! www.chasmgame.com
Remember pixel art is about control, so make sure to manually fix your results! 17 Before transparent layers... The Sega Genesis (Mega Drive) heavily relied on lined dithering. It blends colours when playing the console on lower quality outputs (North-American co-axial cables, RF outputs or PAL antenna cables).
Top to bottom: Comix Zone, Earthworm Jim and Donald Duck in Maui Mallard (Genesis/Megadrive)
The Super Nintendo, had dithering early in its life-cycle, but later games used proper alpha layers.
Super Mario World (SNES)
18 Dithering isn’t new Dithering can be traced back to many older artistic methods.
(Cross) hatching is the oldest form of using patterns to show tone and value by using just 1 colour. It can be found in pencil drawings, printmaking, etching, woodblock etc.
By Jenna Brown Pointillism also requires small distinct dots to create an image. Traditional art isn’t limited to a grid, so this way of mixing colours is organic and free-form.
Paul Signac Entrée du port de Marseille (1911)
Monochrome graphics, such as MacPaint can only show 2 colours: black and white. Many pixel dithering patterns were used to show grey-scale.
Works by Susan Kare(1984)
19 Conclusion
Many pixel artists choose not to use dithering.
It all comes down to preference.
You most likely won’t use it much. It can be quite time-consuming and tricky to get right. You can choose to avoid it and stick to clean, solid shapes.
Remember: LESS is MORE.
Dithering is a powerful tool nonetheless. There are some marvellous things to create with each pattern. If you do choose to have dithering, use it with moderation. It shouldn’t stand out or clash with other visuals.
Food for thought Techniques Trivia
Introduction Checkered dithering Brushes for dithering? When to use dithering Other patterns Before transparent layers Stylised dithering Dithering isn’t new
