Home / Blog / Howto - Animated GIF's Creation and Display in OS X

Howto - Animated GIF's Creation and Display in OS X

animated

The animated gif above was created in OS X in 5 minutes start to finish using instructions below.

PNG is the default format for screen captures in recent versions of OS X.

However most image formats are supported natively. All that is required is to tell your local machine which format you prefer for saving image files.

Switch the default screen capture format to gif by opening a terminal window and entering these commands..

defaults write com.apple.screencapture type gif; killall SystemUIServer

"killall SystemUIServer" is the second instruction if not visible in your browser. It saves having to logout and back in to effect the change.

To switch back to PNG after capturing gifs..

defaults write com.apple.screencapture type png; killall SystemUIServer

With screencapture type set to gif, perform periodic screen captures after typing each letter or word.

I sized the textedit window to a reasonable size for Web browser display, then used Cmd-Shift-4-spacebar and selected the textedit window to record each step of progress. Do not worry about the file names at this point.

When finished with captures, review the files in Finder..

review-gifs
  • set file ordering to display oldest to newest
  • set file display style to Cover Flow
  • select the first file in sequence
  • click spacebar to preview it
  • down arrow to move through files as preview of final animated version

Begin creating the animation by opening the last and final GIF in the Preview app by dragging it from Finder to Preview icon in the dock. If you start with the first file in the order, it will be moved into last position in finished product.

Then in Preview.app View->Sidebar->Show Sidebar to open up a sidebar that acts as a hot zone for collecting the rest of the gif files.

In Finder, select all the other files to include with this animation. Drag and drop them directly on top of the icon for the original file in the sidebar. Dropping them on open space in sidebar will not add them to the original.

  • Down arrow through the sidebar images to preview the finished animated gif
  • If anything is out of order, re-order images by dragging and dropping them to correct locations in the sidebar
  • When satsified, save the finished product as a gif file. I named mine "animated.gif"

Drag the completed product from a finder window and drop it on a browser icon in the dock. Safari, Opera, Firefox all seem to work fine. Verify the final version works as desired.

Place the file in a Web accessible location, like /Library/Webserver/Documents folder on the local machine, to serve it as a web page. Browse to http://localhost/animated.gif to view finished results if following along step by step.

Thanks to Robert Harder and pantyo.com for basics and inspiration.

-- http://blog.iharder.net/2009/10/22/gif-create-animated-gifs-with-mac-os-x-preview-app/

Mon Tue Wed Thu Fri Sat Sun
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31