Posted by on |

I’m pretty happy with how my header image (seen above) turned out. Here’s how it was made:

Step 1 - Find a font. I used Pixelzim 3x5

Step 2 - Generate a mask with Imagemagick:

1#!/bin/sh
2
3# If you're using a different font, you may want to fiddle with the
4# pointsize, kerning and crop parameters. A monospaced font is highly
5# recommended, but not required.
6
7echo "Building hex mask..."
8convert -background black -extent 4094x2 label:" " hex.png
9for i in `seq 1 410`
10do
11 echo "Adding row $i..."
12 RANDHEX=`dd if=/dev/urandom bs=256 count=1 | xxd -p -u -c 256`
13 convert -background black -fill '#FFFFFF' \
14 -font pzim3x5.ttf -pointsize 20 -kerning -2 \
15 label:"$RANDHEX" -crop 4094x12+0+0 tmp.png
16 convert hex.png tmp.png -append hex2.png
17 mv hex2.png hex.png
18done
19echo "Executing final crop..."
20convert hex.png -crop 4094x4090+0+2 hex_huge.png
21rm hex.png

Step 3 - Obtain a nice image to apply the mask to. I’ve used this one

Step 4 - Apply the mask:

1#!/bin/sh
2# Supply image to apply mask to as first argument to script
3IMG="$1";
4convert hex_huge.png -background black -gravity center -extent 4098x4094 hex.png
5# Tweak the multiply and add values as needed
6convert "$IMG" -evaluate multiply 0.40 -evaluate add 10% intr.png
7convert hex.png intr.png -compose Darken -composite out.png
8rm intr.png hex.png

Step 5 - Crop the image. You can do it with an image editor such as GIMP or something like this in Imagemagick:

convert out.png -crop 708x306+1+0 cropped.png

I played around with the values a bit to find a good slice of the image to use.

Step 6 - Optimize file size.

$ convert cropped.png +dither -colors 64 quantized.png
$ pngcrush -reduce -brute quantized.png crushed.png
$ zopfli --png --i250 crushed.png -c > final.png

You may want to experiment with different color depths depending on your source image.