I spent quite a bit of time trying to figure out the process to create the gif at the top of my How BSD Authentication Works blog post, so I thought I'd share it.

Here's how to create a small, high quality gif with transparency using a video and an image as source material.

I'd wanted to combine the image of puffy (the blowfish) and the spinning gears to represent the OpenBSD internals.

Initially I went made several attempts using different software like ffmpeg, shotcut, and obs, but none of them were able to create what I was looking for.

This is the process that I ended up with that worked for me.

First I created the image I wanted for the overlay in GIMP. This was the OpenBSD mascot with a cutout in the center. I then found a gif of spinning gears. I opened the gif up in Kdenlive and used the colorize filter to get them all yellow so it would fit in with the puffer fish theme.

Then I imported the overlay image (Puffy with the cutout) and placed it on top. I then rearranged and transformed things until it was how I wanted.

From there I went to render the video in Kdenlive, and used the Video with Alpha > Alpha MOV preset. I'd tried using the webm preset first but ffmpeg seems to be more picky about that, plus this mov is lossless so it's better for this purpose anyways.

I then took that video and split it up into frames using ffmpeg.

mkdir movframes
ffmpeg -i bsd\ auth.mov movframes/auth%03d.png

I then opened the first frame in GIMP. From there I opened the remaining frames as layers through File > Open as Layers, and selected the remaining frames using shift click.

I then exported them as a gif, making sure to check animated in the export menu, and set the time delay between frames.

The gif that's exported from GIMP was alright, but it wasn't very optimized and the timing seems to not work correctly all the time for some reason.

To fix this I used gifsicle to both optimize the gif and set the framerate correctly.

gifsicle -d 4 -O3 -o output.gif input.gif