#+TITLE: Making a Nice GIF
#+DATE: 2021-10-23T19:23:14-04:00
#+DRAFT: true
#+DESCRIPTION:
#+TAGS[]:
#+KEYWORDS[]:
#+SLUG:
#+SUMMARY:

I just spent a good couple hours trying to figure out how to create
a high quality gif with transparency using a video and an image as
source material.

I ended up finding a process that turned out wonderfully and ended
up creating a beautiful and small gif.

I'm combining images to create a header image for my bsd auth post
and I thought it would be fun to have a cutout of Puffy with
spinning gears inside.

Initially I went through several tries using different software
like =ffmpeg=, =shotcut=, and =obs=, to name a few.

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. I then
got the gif of the spinning gears from google images. 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 tried using the =webm=
presets but =ffmpeg= seems to be more picky about that, plus this
=mov= is lossless so it's better anyways.

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

#+begin_src sh
mkdir movframes
ffmpeg -i bsd\ auth.mov movframes/auth%03d.png
#+end_src

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 is alright, but it's not 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.

#+begin_src sh
gifsicle -d 4 -O3 -o output.gif input.gif
#+end_src

After all that I finally had a great looking, small, and fast gif
with transparency.