Making of a 88x31 button

Published on
Tags: sh, graphics

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:

Lainring button

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):

static button

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:

animated button

The ingredients are sh, ImageMagick, libvips (via my pyvips wrapper + some additional batteries) and the GIMP to produce the following raw materials:

bg1.png: bg1.png
bg2.png: bg2.png
scroll.png: scroll.png
deceit.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'