I wanted to create a simple animated gif to give users of MarkUpDown, my Markdown editor, the impression that yes, Virginia, there are keystroke commands for all of the fancy-smancy html editing tricks the application contains.

That is, Ctrl-B inserts two asterisks to either side of the selected text, etc, and in my app, there's also nonstandard Markdown but common markup stuff like Ctrl-U for underline and Ctrl-Shift-H for -- get this! -- highlighting your html code. (I know, not a huge deal, but it's still really nice when coding blog posts.)

Here's the finished product:

Keystroke command preview for MarkUpDown

Not horrendously shabby, though it probably took me 90-120 minutes to get it all happening. So how do you do it? (Okay, okay, how did I do it?)

How to create cropped animated gifs in The Gimp

  1. Create the raw images.
    • I made three image series for each keystroke command I was highlighting
    • First with a highlighted word
    • Second with keystroke command overlaid
    • Third image with the results.
  2. Import into The Gimp with "Open as Layers"
  3. Put in the order you want, first on the bottom, apparently. Ordered Layers in Gimp
  4. The magic happens here: Select Image >>> Canvas Size Image, Canvas Size menu item in The Gimp
    • Pro tip: Making another image, I remember that I first reduced the canvas size to a middle size when I was making a small image. That black box is really small in step 5. For me, then, the canvas resize was a two-step process, first to a small size that'll be useful in the resize box, then the final, precise crop.
  5. Reposition the full image so that only the parts you want to show are in the smaller black box.Reposition layers in resized canvas
  6. You can preview the animation with Filters >>> Animation >>> Playback Preview Playback menu item in The Gimp
  7. Select File >>> Export As Export As Menu in The Gimp
  8. Type in a filename that ends with .gif and click Export. You'll see the following: Extends beyond warning from The Gimp
  9. Click Crop.
  10. Make sure you save as an animation, and probably also set a default time for each frame.Gif export options with animation checked
  11. If you need to specify different delays for specific frames, you need to rename those specific layers.
    • It's obviously easier to set them "all" with the "Delay frames when unspecified" option
    • See examples in step 3, where I've got (800ms) etc at the end of layer names. Strangely, that's how you set them.

Voila. Now you have an animated gif, cropped precisely to the section of the images you wanted.


Labels: , ,