Create nice GIFs of screen recordings, for dribbble or otherwise

dribbble_gif_creation.md

Convert a screen recording into a GIF using ffmpeg

Record the screen

on MacOS:

• ⇧⌘5 to record part of the screen
• record with intended final aspect ratio if not padding
• trim recording appropriately

(Optional) Add an overlay

ffmpeg -i INPUT.mov -i OVERLAY.mov \
       -filter_complex "overlay=OVERLAY_X:OVERLAY_Y" \
       OUTPUT.mov

(Optional) Add an image as an intro/outro

ffmpeg -loop 1 -framerate 60 -t 1 -i INTRO.png -i INPUT.mov \
       -filter_complex '[0:0] [1:0] concat=n=2:v=1:a=0' \
       OUTPUT.mov

(Optional) Add padding

Consider your final aspect ratio when deciding on EXTRA_W and EXTRA_H.

ffmpeg -i INPUT.mov \
       -vf "pad=iw+EXTRA_W:ih+EXTRA_H:EXTRA_W/2:EXTRA_H/2:#1f1f1f" \
       OUTPUT.mov

Scale the recording

ffmpeg -i INPUT.mov \
       -vf "scale=FINAL_W:FINAL_H" \
       OUTPUT.mov

Convert to gif

For a 60FPS gif, 50FPS must be used.

ffmpeg -i INPUT.mov \
       -vf "fps=50,scale=FINAL_W:FINAL_H:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" \
       -loop -1 OUTPUT.gif

Modify loop count

Sometimes, -loop with gifs don't work for me in ffmpeg, so I modify loop count online with ezgif.com.