Note: You are viewing this blog post without the intended style information, which may result in formatting issues.

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
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
#!/bin/sh

# If you're using a different font, you may want to fiddle with the
# pointsize, kerning and crop parameters. A monospaced font is highly
# recommended, but not required.

echo "Building hex mask..."
convert -background black -extent 4094x2 label:" " hex.png
for i in `seq 1 410`
do
  echo "Adding row $i..."
  RANDHEX=`dd if=/dev/urandom bs=256 count=1 | xxd -p -u -c 256`
  convert -background black -fill '#FFFFFF' \
          -font pzim3x5.ttf -pointsize 20 -kerning -2 \
          label:"$RANDHEX" -crop 4094x12+0+0 tmp.png
  convert hex.png tmp.png -append hex2.png
  mv hex2.png hex.png
done
echo "Executing final crop..."
convert hex.png -crop 4094x4090+0+2 hex_huge.png
rm hex.png

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

Step 4 - Apply the maks:

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