Hello Campers! Welcome to #TinkeringTuesday
Gather up a digital camera, a webcam, or even a cameraphone, because we are going to be taking pictures and turning them into animated GIFs. You’ve probably seen these around the internet, and today I’ll teach you how to make them yourself. There are some really easy ways to do this, so hopefully the extra time will be put to creativity!
The GIF is an image format from the early days of the interweb that was designed to support animation by stringing together multiple images into one compressed format--kind of like stop-motion animation. This was quite useful in the days before Flash and HTML 5, and now it is seeing a resurgence as an art form and a way to create stuff like avatars for our social networks.
In our Hangout this afternoon (2pm PST
) we can all share more techniques, design considerations, and of course we’ll do some show and tell, but here are some instructions for a simple start. There are two main ways to get started: Onion Skinning and Video. Starting with a video that you’ve shot is a good way to get photographic effects. Onion Skinning is a traditional animation technique and is suitable for illustrations or collage types. Stop Motion to GIF
How To Video Here: http://goo.gl/nOVSp
This is the easiest and fastest way to get started. With a webcam it is a one stop. There is a video below that has all the steps! Video to GIF
How To Video Here: http://goo.gl/hBE4t
I made a video that explains how this process works, so go ahead and watch it below. The trick is to shoot your video, load it into the video editor on your computer (iMovie if you’re on a Mac, or Movie Maker if you’re on a Windows PC like me). The video editor will let you select the specific frames you want to use for the animation, and then you just load those into a free online service like LunaPic. Old School Onion Skinning
How To Video Here http://goo.gl/zAiTB
Also here are some simple instructions.
This is just like making one of those cartoon flipbooks, but digital. The name comes from the old days of animation, when animators would use tracing paper to line up their sequential drawings. It is like building layers of an onion. But you don’t need tracing paper, regular blank paper will work. So pull out some paper and put it into a stack, maybe into a clipboard so you can keep it stable. The goal is to create a “stage” for your animation. Go ahead and draw your cartoon frames on the pages, making each drawing just a bit different from the one before. Next, photograph each page, and you’ll want your camera to be stable and take the same picture each time. The key here is to line things up as well as possible. When you’re pictures are ready, load all of them into a service like LunaPic, which will sequence them into an animation. This is (kind of) how classic cartoons were made.
If you want to get off the paper and into real life, the idea is the same. You’ll want a steady camera angle (put your camera on a tripod, or a table or something). You’ll also want the background to be as constant as possible. Whatever you’re animating should be the only thing that moves as you take your pictures. Because these will be still shots, you can make magical things happen in your animated GIF—make an inanimate object crawl across the floor, or capture yourself floating around the room (just take a few pictures of yourself jumping in the air).
Dump your photos into LunaPic, and you’re all set! If you want a smooth animation, use lots of pictures. If you don’t mind it being kind of herky-jerky, you can use fewer photos (as few as two).
Share you creations with us using the #MakerCamp
hashtags. Most importantly, have fun!
Here are some .gifs I made: http://goo.gl/d2W0y
Here are two online applications you can use to assemble videos or a series of images into animated .gifs easily.
picasion, super easy and good for web cam stop motion: http://goo.gl/C6vDG
lunapic, more advanced good for video: http://goo.gl/To0JA
Extra Maker Credit The Cinemagraph
The cinemagraph is an animated GIF taken to an art form. Just check out the amazing work of Jaime Beck and Kevin Burg at http://goo.gl/rkREs
. To do a cinemagram requires a little more time and some software, but some of it is free. Some of it, like Photoshop, is not but there are 30 day free trials available from Adobe if you have never installed it before. I will do a tutorial during our session using Cliplet, ( http://goo.gl/br8a5
) which is free but only available to Windows 7. There are some similar softwares for iPhones and iPads--some free, some inexpensive, like Echograph.
Cinemagraphs begin as video taken carefully from a tripod of a subject. The goal is subtlety. You want to plan out which parts of the image you want to be still in advance and capture clean video. Apps like Echograph will step you through the process. There tutorials though also help show what a good subject might be.
Then by a process of masking you keep one still image and overlay frames of animation in just one spot. Like a blinking eye, or spinning plate. You do this one of two ways. You either bring the video as a series of images into photoshop using import and the animation tab. Then one at a time you cut out and overlay the parts that you want to be in motion. This is very time consuming, but ultimately produces the best results.
The other way is to use software for creating a Cinemagraph or Cliplet as they are sometimes also called. Echograph and Cliplet are two examples. These have their own UI for applying the masking directly to the video. They are easier once you learn how to use them, but they require you to put careful effort into taking the video in order to produce really clean results.
Here are several tutorials for those who feel they can take it on!
Using Photoshop: http://goo.gl/ZVFtt
Using Photoshop & iMovie: http://goo.gl/G7zzk
Using iOS (iPad or iPhone) & Echograph: http://goo.gl/D8mbX
Using Cliplets & Windows 7: http://goo.gl/zymtI