Animated GIF Token Creation Workflow

Purpose

This workflow describes how to create an animated GIF token of a character from a video file (e.g., thadeos 05 251110.webm). The GIF must preserve transparency (alpha) and be resized to a smaller final resolution (e.g., 140×140) for use as a token or avatar. Since transparency cannot be exported directly from Shotcut, this process uses FFmpeg and ImageMagick scripts in Ubuntu.

Step 1: Extract Frames from Video

Create a folder to store the individual frames, then extract them using FFmpeg.

mkdir thadeos_frames_05_251110_folder
ffmpeg -i "thadeos 05 251110.webm" "thadeos_frames_05_251110_folder/frame_%03d.png"

Result:
All frames are saved as PNG images (supports alpha) in the folder thadeos_frames_05_251110_folder/.

Step 2: Remove Green Background and Apply Transparency

Use ImageMagick to make the green background transparent. The command removes multiple shades of green common in chroma-key backgrounds.

mogrify -alpha on -fuzz 20% \
  -transparent "#3cc435" \
  -transparent "#2cb429" \
  -transparent "#49d142" \
  -transparent "#40c638" \
  -transparent "#87fc81" \
  thadeos_frames_05_251110_folder/*.png

Notes:

-fuzz 20% allows for slight variations in green shades.
Each -transparent value targets a different hue of green.
You can adjust the fuzz percentage if green spill remains or too much is removed.

Step 3: Optional Edge Cleanup

To reduce green haloing or artifacts around the character edges, apply a mild erosion and blur to the alpha channel.

for f in thadeos_frames_05_251110_folder/frame_*.png; do
  convert "$f" \
    \( +clone -alpha extract -morphology erode diamond:1 -blur 0x1 \) \
    -compose copyopacity -composite "$f"
done

This slightly tightens the transparency mask for smoother blending.

Step 4: Build an Animated GIF (Scaled to 140×140)

Since Shotcut cannot export transparent GIFs, we use FFmpeg to rebuild the animation with palette optimization for color quality.

Generate a Palette

ffmpeg -y -framerate 10 -pattern_type glob \
  -i "thadeos_frames_05_251110_folder/*.png" \
  -vf "scale=140:140:flags=lanczos,palettegen" palette.png

Create the Optimized GIF

ffmpeg -y -framerate 10 -pattern_type glob \
  -i "thadeos_frames_05_251110_folder/*.png" \
  -i palette.png \
  -lavfi "scale=140:140:flags=lanczos [x]; [x][1:v] paletteuse" \
  -loop 0 thadeos_05_251110_140.gif

Notes:

The GIF is resized from high-resolution alpha PNGs for cleaner edges.
The palettegen + paletteuse steps ensure optimal 256-color GIF quality.
-loop 0 makes the GIF repeat indefinitely.

Step 5: (Optional) Export as Transparent WebM

If transparency and higher quality are required for web or video use, export as VP9 WebM instead of GIF.

ffmpeg -y -framerate 10 -pattern_type glob \
  -i "thadeos_frames_05_251110_folder/*.png" \
  -c:v libvpx-vp9 -pix_fmt yuva420p -auto-alt-ref 0 -b:v 0 -crf 15 -an \
  thadeos_05_251110_alpha.webm

Result:
thadeos_05_251110_alpha.webm — a smaller, transparent video suitable for modern browsers and applications.

Key Takeaways

Always work at high resolution before scaling down to avoid aliasing on edges.
Use mogrify with multiple -transparent flags to clean various green tones.
The final GIF (140×140) preserves animation and alpha transparency.
Shotcut can’t export alpha in GIFs; this workflow bridges that gap using FFmpeg + ImageMagick.

Fading Suns Character – not for commercial use –