Animated GIF of screenshots for bug reports

Sometimes a static screenshot isn't enough to convey the thesis of your bug report. Good news is that Trello and GitHub will let you post animated GIFs.

You will need ImageMagick for this.

$ brew install imagemagick

I'll assume you're reporting a rendering problem in a web app. You'll want to start by isolating the browser window to just one tab (unless want to show off how many Reddit and HN tabs you have open). Resize that window down as much as possible so that the bug is still apparent.

Now, the arcane gang sign for screenshotting a whole window: ⌘⇧4, mouse over window, then space.

Do this as many times as necessary to capture your bug (scrolling, resizing, clicking or whatever between screenshots).

Finally, open a Terminal window in the directory where you save your screenshots. For me, this is ~/Dropbox/Screenshots but by default this is ~/Desktop.

$ convert -delay 20 -loop 0 Screenshot*.png animated.gif

Ta-da! You have an animated GIF. Trello won't animate in list view, but it will animate the cover image when viewing a card.

Pro Protip

If the bug in question is difficult to explain without including the position of the cursor, use Mac OS X's secret Grab.app. Type Grab in Spotlight to access it. This will let you capture with different cursors or after a delay.