Making of a 88x31 button
Wanted to make a 88x31 button for this website, since the 240x60 Lainring banner format (sadly) hasn't displaced that old de facto standard. Here's said banner, for reference:

Trying to keep this aesthetic in a much smaller format wasn't going to be easy but… challenge accepted! At first, I simply cobbled together a version using the classic misc-fixed font (italic semi-condensed with some manual kerning):

Pretty legible, but the artist within me wasn't happy. So I went for the only realistic option to keep using the signature SurfQuest font: an animated banner.
It actually took me the afternoon to do exactly what I wanted using scripting, but well, that was fun! First, here's the end result:

The ingredients are sh, ImageMagick, libvips (via my pyvips wrapper + some additional batteries) and the GIMP to produce the following raw materials:
bg1.png: | ![]() |
bg2.png: | ![]() |
scroll.png: | ![]() |
deceit.png: | ![]() |
Then it's just a matter of flailing around on the web to find the right magick
incantations, a good looking convolution kernel for the "moving torchlight beam" effect
(Gaussian) then turning a few knobs until satisfaction is reached.
#!/bin/sh # shellcheck disable=SC3018 set -eu cd -- "$(dirname -- "$0")" xr=6 # x delta per 10 ms f=0 # frame counter fdir=$(mktemp -d) trap 'exit 1' HUP INT QUIT TERM trap 'rm -r -- "$fdir"' EXIT sw=$(magick identify -ping -format %w scroll.png) x=88 while [ $x -lt $((sw - 88)) ] do magick bg1.png \( scroll.png -crop 87x31+$x+0 \) -compose src-over -geometry +1+0 \ -composite "$fdir/$((f++))".png x=$((x + xr)) done cp bg2.png "$fdir/$((f++))".png x=0 while [ $x -le 88 ] do vips.py -i vips_lib deceit.png \ "pxmap('px[3] = min(px[3], round(gauss(x, $x, 6, False) * 255))')" "$fdir"/temp.png magick bg2.png "$fdir"/temp.png -compose src-over -composite "$fdir/$((f++))".png x=$((x + xr)) done cp bg2.png "$fdir/$((f++))".png x=1 while [ $x -le 88 ] do magick bg1.png \( scroll.png -crop 87x31+$x+0 \) -compose src-over -geometry +0+0 \ -composite "$fdir/$((f++))".png x=$((x + xr)) done # cp -r "$fdir" frames find "$fdir" -type f -name '[0-9]*' | sort -V | tr '\n' '\000' | xargs -0 sh -c 'magick "$@" -delay 1 -loop 0 -layers optimize button.gif'