Press "Enter" to skip to content

Library Hacks: Creating Animated GIFs

beating heart animation
From A system of anatomical plates of the human body by John Lizars (1840?)

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.

Uncommon Flying Squirrel from the Report on the Commissioner of Patents (1856)
Uncommon Flying Squirrel from the Report on the Commissioner of Patents (1856). It begged for a GIF: the squirrel had nothing in front of it, and once removed would leave am intact background.

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

Simple 3 layer GIF made from the image above. I duplicated the squirrel, rotated and shrunk one, and then moved each one slightly forward in each frame. I took a blank page from elsewhere in the book to add as a background layer behind the trees to give it a more authentic “book” feel.

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 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!

Taking it one more level of cheek: the uncommon flying squirrel. I added a cape drawn in Photoshop, made three slightly different versions using warp, and created a continuous shrubbery background. Slight movements give the illusion the squirrel is flying. Uncommon, indeed.

 

21 Comments

  1. Antoinette Charfauros McDaniel

    What a fun, fascinating & instructive entry! Only problem is that I’m so tickled watching the flying squirrel whirr across the page that I may never be able focus on the clearly written instructions! And that cape! Go on with ya! Style, whimsy & technological savvy. Bravo!

    • Richard Naples

      It brings a smile to my face knowing that one of my creations brought one to yours! It’s a privilege to come across so much interesting material, and I’m happy to share my quirky creations. So glad you left this comment! Thank you!

  2. Nora L.

    Hi Richard! You should give a follow to The Richard Balzer Collection of phenakistoscopes at http://dickbalzer.tumblr.com/. Fantastic use of animated gif to resurrect these magical parlor entertainments from static to motion pictures, as they were intended to be shared!

    • Richard Naples

      Thanks for pointing that out Nora!
      Oh yes, I’m a big fan of The Richard Balzer Collection and wish we had a collection here in the Libraries! Actually, the first animated GIF I posted on our Tumblr was from a praxinoscope, a related kind of technology. I found it in an amazing journal of amateur tinkering which you can access by clicking the GIF in the post. These early animation mediums really lend themselves to the creation of animated GIFs, so it made dipping my toe in the GIF waters an easy prospect.
      I limited my selection above to library-specific Tumblrs that use GIFs, but I also love other GIF makers like:

      …at least those are the ones I’m willing to share publicly! 😉

  3. Love your gifs! Your blog post inspired me to try my hand at making animated gifs. I ended up using paint.net and gifpal because I don’t have access to photoshop, but the concept in your directions were still very helpful! I work at the Oregon State Library and have used some of our historic photos and one gov doc so far. You can check them out on our tumblr or pinterest page. http://oregonstatelib.tumblr.com/
    http://www.pinterest.com/oregonstatelib/in-motion/
    Just wanted to say a word of thanks for getting me started, so Thank You!!

    • Richard Naples

      Wonderful, Sarah! I really like your girl on a swing at the insane asylum. Creepy in a good way! I hope your efforts pays off with more followers and more exposure for your collections, and I’m glad to help. Pretty soon you’ll be thinking how to make GIFs out of everything, trust me!

  4. Margaret Plaganis

    Keep your imagination twisting! You inspire! Thanks for sharing links to other animated imaginers.
    ~MP

  5. […] if you’re not interested in making your own animated GIFs, we highly recommend you visit this blog post from the Smithsonian Libraries to see the flying […]

  6. […] Read more from Richard Naples, the Smithsonian’s resident GIF-maker, at the Washington Post Style Blog, or learn how to hack your own digitized images by reading the Smithsonian’s blog post on the GIF-creating process. […]

  7. I always enjoy animated gifs, the ones on this page are great.

  8. Mitchele Stallion

    The gifs on this page are cool and not scary at all, but some of the ones found on Google Ads can be annoying to say the least. The first person to create one should have patented the idea.

  9. Totally agree with Sara, lovely animation!

  10. Hi Richard,
    Really enjoyed this idea of text to gif. Awesome animation. Thanks for sharing this.

  11. Mahfuz@7cgi

    Enjoyed the animation very much. At first, stunned with heart and later stuck with flying squirrel.

Leave a Reply

Your email address will not be published. Required fields are marked *