Tuesday, December 17, 2013
How to Create a Holiday-Inspired Animated GIF Using Stop Motion Photography
How to Create a Holiday-Inspired Animated GIF Using Stop Motion Photography
Introduced in 1987 by CompuServe, the animated GIF is as popular today as it has ever been. The GIF animation has gone through many phases over the years. It's been loved, hated, and then loved again. Today, I think the GIF animation has found its place as a useful way to distribute short and fun animations online. Recently, I was inspired by a GIF that I saw on Twitter and thought the concept would make a fun tutorial.
I got together with our Photography Editor at Tuts+ to organize a cross-site tutorial that shows how to shoot stop-motion photography and then assemble those photos into an animated GIF in Photoshop. In this tutorial, we will show you how to use Photoshop to quickly assemble the photos we shot in the photography part of this tutorial, and create our animation. Let's get started!
Before You Begin
Before you begin, make sure to head over to our photography website to learn how the photos used in this tutorial were shot.
1. Preparing the Images
If you download the image sequences that come with this tutorial, you will not need to complete this step as I have already renamed the images for you. If you have shot your own photography or are using your own images, make sure that you use similar techniques.Step 1
Now that we have shot all the photos for this tutorial. The next step is to prepare the images. The fastest way that I found to create the GIF animation is to create 2 separate image groups and open/import them into Photoshop as an image sequence. An image sequence is basically a folder of images, with each image named in sequential order.In this case, I've renamed all the images from the photographer as 0001.jpg, 0002.jpg, 0003.jpg and so fourth. In the first set, 0001.jpg does not include a bow. In the second set, the bow is fully tied in 0001.jpg. You can see how I've done this below.
In the second image sequence, delete 0001.jpg and 0045.jpg from the folder. We are doing this so that these frames don't repeat in the final animation.
2. Open First Image Sequence
Step 1
Now that we have prepared our image sequences, the next step is to open the first image sequence. You can do this by simply going to File > Open. Browse to the directory where your first image sequence is stored. Click on 0001.jpg and select the Image Sequence checkbox. Click Open. This will load all of your images into Photoshop as a sequence. Don't try to select all the images in the directory. You only need to select the first one.
Step 2
Now you will want to set your Frame Rate. Set it to 17, as that is the frame rate we shot this animation to run in during the photography section of this tutorial. If you prefer to use a different frame rate, feel free to do so.
The first image sequence should now be loaded into Photoshop as a Video Layer. Your Layer Panel and Timeline Panel should now look similar to the below screenshots. To open your Timeline and Layer Panels go to Window > Layer or Window > Timeline.
Step 3
Now we will want to create a slight buffer between the first image sequence and the second. We will do this by inserting 0045.jpg from the first image sequence. This will add a slight pause to the animation after the bow has finished tying. Go to File > Place and select 0045.jpg.
This image will now be added to your Timeline. Reduce the duration of the clip in the Timeline, as shown, by just dragging the handles to make it shorter.
3. Place Second Image Sequence
Step 1
Now we will place the second image sequence by going to File > Place. Just like you did with the first sequence in Section 2.1, browse to the second image sequence, select 0002.jpg and select the Image Sequence checkbox. This sequence should now be added to your Timeline.
Step 2
Now that we have added both image sequences, we want to add a short buffer between the end of this sequence and the beginning of the first one, as this GIF will be set to repeat continuously. So just as you did in Section 2.3, go to File > Place and select 0001.jpg from the first image sequence and reduce it's duration in the Timeline, as shown. Just as in Section 2.3, this will give our animation a slight pause before it repeats.
At this point, you can test your animation by clicking the play button. If it looks right to you, all you need to do now is save the animation as a GIF.
4. Export Your GIF Animation
Go to File > Save for Web.
Export the file as a GIF, set the Looping Options to Forever. I used the settings in the screenshot below.
Remember, file size plays an important role in a GIF animation. You'll want to reduce the file size enough so that it can be shared on the web, but not enough so that the quality of the final image looks poor. The Save for Web dialogue will show you exactly how large your file will be in the bottom left corner of your screen. You can adjust Colors, Dither, Web Snap, or any of the other settings to get your image looking just right.
Conclusion
Photoshop is an extremely powerful tool and can help you create amazing GIF animations. In this tutorial, we showed you how to not only create a GIF animation from a series of photos, but we also showed you how to shoot the photography, as well. You can use these same techniques to create your own stop-motion GIF animations. The possibilities are endless.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment