Library Hacks: Creating Animated GIFs

It might be a sign of a twisted mind, but I can’t help imagining illustrations and pictures from old books coming to life. Lucky for me, we live in a time when tools for making my twisted dreams come true are readily available. Below, I’m going to go through the basic steps I take in order to turn images collected from our digitized books into the animated GIFs the Smithsonian Libraries posts to its Tumblr blog.

Sourcing Images

We digitize books for the main purpose of making them accessible for study and reference. Since these books are no longer under copyright restrictions, we aren’t limited in the creative reuse and remixing of the products. The Internet Archive is an amazing repository of millions of digitized books from around the world, chock-a-block full of images that lend themselves to creating something fun. On the Internet Archive’s eBook and Texts section, you can browse by collection, library, or use the search feature to find books. I’ll usually go to the Smithsonian Libraries page to see what’s been recently digitized. Typically I just browse, either by date, subject, or even what’s been recently reviewed. Once I find something of interest, I’ll click the Read Online link under the View the Book grouping on the left. Then I prefer the single page view (which is in the lower right of the reader). When I find a suitable image, I’ll either right-click and save it or use my snipping tool (“grab” on a Mac or “snipping tool” on a PC) to take a screenshot.

What makes a good candidate, you may ask? For one, I look for images with uncomplicated backgrounds. It’s much easier to animate a butterfly flapping its wings on a blank background than one on a flower.  Next, I look for images that aren’t too complex. Making knees bend is a lot easier than making a snake slither… A particularly easy approach is finding an image that could be lightened or darkened to emulate the flickering of a candle, for instance. For the beating heart included in this post, I used the bloat and pucker tool of the liquify filter to give the illusion of a beating heart. Other times, I will look for distinct elements in the foreground that I can basically cut out and make animated, such as this flying squirrel.

Preparing the Image

I use Photoshop to alter the images and also to create the GIF itself.  First, I think ahead about what kind of animation I’d like to create. I try to think of animations that will be short and work in a loop. I also look for a big impact with little work. Size considerations typically limit what you can do, so I make sure to crop images. I’ll also resize them to a resolution of 72 pixels/inch and a max width of 500. From there, I create multiple layers out of the image, typically a static background and one or two elements on their own layers that will be the moving parts of the animation. There are plenty of online tutorials about using Photoshop. For instance, I consulted this one on how to easily remove backgrounds. If you don’t have Photoshop, GIMP is a freely distributed image manipulation program, with its own tutorials on creating layers, removing background and more. I’ve picked up many other skills in Photoshop along the way. For me, the utter necessity of good searching has paid off. There are so many great resources out there on sites like YouTube or on blogs if you know how to find them.

Assembling the GIF

The two big options you have as you construct your animation are turning layers off and on and moving the layers between frames. In order to do this, you need to know a little about how Photoshop’s animation works. I found this tutorial particularly helpful and easy to follow when I was just beginning to make GIFs . Similar instructions are out there for GIMP, too. Basically, create all your layers first. Then, turn on the Animation window and make sure it’s on Frames. Each frame will hold one bit of your animation, again either through turning a layer on or off, or by moving a layer slightly on each frame. You can set each frame to stay onscreen for a specific duration. Finally, save your GIF using the Save for Web & Devices option, further adjusting the number of colors, image size, etc. to make sure your final GIF is under 1MB (if you want to post to Tumblr).

Fun on Tumblr

It’s no secret that animated GIFs have exploded in popularity, with much of the thanks going to Tumblr. While our Tumblr blog, Turning the Book Wheel, has been very popular and we’re quite proud of it, I’d like to point out a few other libraries that make GIFs we really love:

• The Special Collections & Archives of the University of Iowa
• The Huntington Library
• The Houghton Library at Harvard University

The seemingly ubiquitous Buzzfeed even featured 8 Book Historians, Curators, Specialists, And Librarians Who Are Killing It Online recently. We’d love to hear of anyone you know who is remixing library material in new or unexpected ways! Let us know in the comments. And as always, follow us on Tumblr to never miss an animation!