Making Dithered Art

I thought I'd talk about how I make the dithered backgrounds and graphics on this site, as it's actually quite easy. High resolution, high contrast images are recommended.

For this, I'm using GIMP, available there or within almost any Unix-like's repository. These aren't necessarily complex actions however, so a similar method likely applies to other editors. I would bet on there being even a way to automate it with imagemagick I've not bothered to learn yet.

When you have the image you want at the scale you want, go to 'Image > Mode' and select 'Indexed'. Inside this menu, under 'Colourmap', select 'Generate Optimum Palette' and choose 2 colours (for monochrome images, like my backgrounds - feel free to play around with more). Under 'Dithering', I generally prefer 'Floyd Steinberg (reduced colour bleeding)' - try the others to see the effects.

Because the two colour palette should be a mean of the two most common colours on the image, you may or may not be happy with the colours you find. You can change these colours fairly easily though. Go back to 'Image > Mode' again and return the image to 'RGB' - releasing the image from being stuck in only two colours. Go to 'Colours > Map' and select 'Colour Exchange' to universally switch one colour with another. Or select 'Colour > Colour to Alpha' to make a colour transparent - set the opacity threshold to 0.

Here's one I made just for the sake of this example:

I recommend exporting them as a gif - as a jpg loses fine detail, and a png isn't as well suited for this kind of compression.

Inspirations

I was partially inspired by the work of Mattis Dovier - although what he does looks much better than mine, and I could guess he does much more of his work manually. Credit where due for both.

And of course, by Fauux:

Extras

Under 'Filters', there is 'Blur' and 'Distort', which host a variety of interesting tools to play with, including pixelisation and video degradation effects. I took my last example a bit further to prove the point:

Additionally, by exporting your image as a bitmap, you can edit it much more manually. Bitmaps can be edited in a text editor, and in Audacity, provided you skip past the first few percent of the image's data (the header). It's difficult to accurately control, but creates very interesting results.