jump to navigation

Create Animated GIFs with Mac OS X Preview.app October 22, 2009

Posted by Robert Harder in : Utility , trackback

If you open an animated GIF in Mac OS X’s Preview application, the default application for viewing images and PDFs, you may know that you can see individual frames of the animation, but did you know you can also create animated GIFs with Preview? Here’s how.

All Your Base Are Belong To Us

How To

For this example, we will create an animated GIF of us typing some text into a text editor. Preview sets the interframe delay to 0.1 seconds, and I have not seen a way to change that. That is a reasonable typing speed for this effect.

Open a text editor such as TextEdit, TextMate, BBEdit, etc. Resize the window so that it’s a nice, tight size that will look good on a web page.

Blank Document

The first thing you might notice between the screenshot above and the animated GIF at the beginning is that the shadow looks better on this screenshot. That’s because GIF images can only contain 256 different colors, and that’s not enough to see the subtle changes in the shadow.

Save this opening shot by typing Command-Shift-4. Release those keys and type Space. Now click on the text editor window. That creates a screen capture of just the window you clicked and saves it to the desktop.

Open that file in Preview. Choose Save As from the File menu. Select GIF as the file type. Name the file something meaningful like animation.gif. You can now delete the original screen capture image so you don’t accidentally duplicate it during the next steps.

Saved as GIF

We’ll want to see the sidebar so we can add images to the GIF sequence. Click the Sidebar button in the toolbar.

With Sidebar Showing

Let’s just add one character ‘A’ to the text editor, and add that to the sequence.

  1. Type ‘A’ in the text editor window.
  2. Type Command-Shift-4.
  3. Type Space.
  4. Click on the text editor window.
  5. Find the captured image on your Desktop, and drag it onto the Preview window, directly over the “animation.gif” image in the sidebar.

Dragging Image Over First Frame

Your Preview window should look something like this now:

After Two Frames

Now let’s capture several frames at once to speed this along. After each character that we type in the text editor, we’ll type Command-Shift-4, Space, and click on the text editor window, creating many screenshots saved to the desktop.

Select all of these new screenshots on the desktop, and drag them to the Preview window as shown below so that you tell Preview to add the images to the sequence you began (as opposed to simply opening more files, which it will do if you drag too low on the sidebar).

Dragging Several Files

You’ve got it now. Continue with more frames, and save your GIF. Drag the GIF image to Safari or other animated GIF-enabled viewer, and enjoy. Unfortunately I haven’t found a way to loop the animation in Preview.

Tags:, , ,

Comments»

1. Sigi ReichNo Gravatar - May 27, 2010

Thank you Robert for a really good explanation of to (easily) create animated gifs. I have followed the steps and it works fine.

If you want to control the interframe delay, GIFBuilder is a free and easy to use tool for OS X. See http://www.nyctergatis.com/gifbuilder/

SR

2. Adrian BoeingNo Gravatar - August 3, 2010

Is there another way to add looping or interframe delay? Gifbuilder isn’t supported on the Intel, or OSX snow leopard.

3. Robert HarderNo Gravatar - August 4, 2010

If you like the command line, you can use ImageMagick’s “convert” command to modify the gif properties like so:

convert -delay 3 -loop 0 base.gif base-fast-repeat.gif

For that matter, you probably could have done screen captures direct to file and then used ImageMagick to build the gif directly.

-Rob