It’s coming up to our 30th GIF for Wunderkammer, our fortnightly email of internetty links and commentary curated by the Adaptive Lab team. I’ve probably made 20 of those GIFs. As we approach our 30th edition it seems like an opportune time to share with you the process of GIF creation.
It’s worth noting that the GIFs we create for Wunderkammer are unique. Each edition contains a GIF that is sometimes loosely based on the content contained within the email, but more often than not it is a complete concoction from one of our designers minds. This article is about how to create your own unique GIF (it’s not about how to create GIFs from YouTube videos of cats - though I won’t stop you). GIFs are a visually vibrant way to enhance your content such as blog articles, your website or email newsletters.
Here’s my 5 step guide to creating great GIFs.
Yip, you need a good idea, relax it doesn’t have to be Pixar good - simple things can look excellent when brought to life in an unusual way. So far we’ve made a lego lumberjack, an exit sign come to life, and a Monopoly money rainbow.
I tend to take inspiration in a number of ways. From glancing around the office for something new and colourful, looking at the content that’s featuring in the next edition, or by asking a colleague to name me an object or theme. Often an object or theme set by a colleague can be a challenge to turn into a GIF, but more often than not the GIFs turn out great. For example we would never have had Rebecca’s hair feature in a GIF if I hadn’t been set the challenge to feature someone from the office.
I give myself between 30 mins - 1 hour to make a GIF so a little bit of planning can save me time later. I often plan the GIF out in my head, but if it’s more complicated then I may use storyboards drawing out each ‘scene’ as I imagine it. The best GIFs are mesmerising and loop forever. To do this you need to plan when your animation will stop and how you will return it back to it’s starting point. You can see in the example above, Rebecca's hair jumps rather than loops. A better execution would have been to duplicate and reverse the frames so it grows and shrinks in a continuous loop.
The other thing to consider is what technique is going to get you the desired effect? A Wunderkammer GIF tends to be created using traditional animation techniques brought to life with the tools we have to hand. We’ve used loads of different types of animation styles to create our GIFs.
2D Illustrated using design software (still images run together to create motion) - Raining umbrella Video converted to frames (sometimes we’ll edit these, like removing string from floating objects) - Lego UFO Stop motion (still images run together to create motion) - Living lamp Sketched frames - The same way Snow White was made, drawing one frame of the movie at a time.
You could also go for something a little more advanced like the amazing animation techniques below.
Okay, so puppetry may not count.
Get your kit set up and gather everything you need. This can be as simple as having your phone or camera charged and ready to film for as long as it’s needed. For me most of the time this bit requires finding the right backdrop for the shot particularly if it’s stop motion or film, or finding good source material and inspiration if it’s something I’m going to illustrate. For Wunderkammer particularly, I have to consider that the logo will be in the middle of my GIF so having that in mind when composing the shot is key.
I sometimes use a handy little iPhone tripod for shooting film or stop motion, but more often than not I’ve got my phone blue tacked and balancing on some odd object in the office that happens to be the right height and angle for what I need. I gather any helping hands that I may need to move and hold things (this is essential if you want flying objects in your GIF).
Draw, film, shoot stills or compose with software. This depends on which technique you choose from the options above. With most of the techniques this part is about getting it right frame by frame, whether you are creating it in software or shooting real life.
There are a few tips I’ve learned along the way when shooting the GIFs:
This bit is really dependant on how you create your GIF and the tools that you’re familiar with. I’ve added a list of super useful tools for GIF making at the bottom of this article. All of the GIFs I’ve created so far for Wunderkammer have been compiled in photoshop, which allows me to convert a video to frames and edit each frame if I need to and to bring batches of images in to convert to a frame by frame animation. I can then edit the colours and lighting as I would any other photo in photoshop with layer adjustments.
Here’s a video of the basic process in photoshop for creating a frame animation from the pictures you’ve taken:
Generate GIF Sketch plugin -If you use sketch you can use this Sketch plugin to export a GIF quickly from your sketch art boards. https://github.com/NathanRutzky/Generate-GIF
PicGIF - Make a quick GIF from a series of images or a video. It’s drag and drop easy. https://itunes.apple.com/gb/app/picgif/id784260229?mt=12
Quicktime - Record areas of your screen and phone screen and convert to a GIF using photoshop, GifGrabber or PicGIF https://www.apple.com/uk/quicktime/download/
GIFGrabber - Create a GIF from any videos running on your Mac or browser. http://www.gifgrabber.com/
Record it - Create a GIF from anything on your screen with a handy toolbar shortcut. http://recordit.co/ ___
Get to know more about how Adaptive Lab design by checking out this blog on our design principles.