Advertisement
Designing

How to Create a Holiday-Inspired Animated GIF Using Stop Motion Photography

by

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.


Your layer stack should look similar to this image. Make sure all layers are organized into one Video Group.

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.


Your layer stack should look similar to this image. Make sure all layers are organized into one Video Group.

Duration for 0045.jpg is set for 00:04.

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.


Your layer stack should look similar to this image. Make sure all layers are organized into one Video Group.

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.


Your layer stack should look similar to this image. Make sure all layers are organized into one Video Group.

Duration for 0001.jpg is set for 00:04.

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.

Related Posts
  • Computer Skills
    Office
    How to Control PowerPoint Animation with the Animation PanePowerpoint logo
    Ever wanted more control over your PowerPoint animations? Here's how you can use the Animation Pane and the Advanced Timeline in PowerPoint to get the most control over your animation timing and more.Read More…
  • Design & Illustration
    Video Effects
    Create Animated Falling Snow in PhotoshopPreview400x400
    Digitally created snow can often be quite difficult to generate in Photoshop, in a realistic-looking way. We recently published a tutorial showing how to add snow to a still image, so in this tutorial, we decided that it would be fun to show how to create a realistic-looking animated snowfall effect in Photoshop, and then turn it into an animated GIF file. Let's get started!Read More…
  • Design & Illustration
    Text Effects
    Create an Animated, Glittering, Valentine's Day Text EffectGlitter animation preview400
    Smart objects are powerful layers in Photoshop that allow you to make non-destructive edits. In this tutorial, we will use smart objects to help build a custom text effect as well as a complex, animated texture. By working with smart objects, we will be able to quickly update our scene simply by editing the smart objects. Let's get started!Read More…
  • Design & Illustration
    Tools & Tips
    10 Ways to Optimize an Animated GIF FileTop10 gif preview retina
    GIF is the standard format for compressing images with large areas of solid colors and crisp details like those in line art, logos, or type. Being an 8 bit-depth image format it would have disappeared from the web after the introduction of the JPEG and PNG file formats, but GIF is still a favored web file format thanks to its frame animation feature. In this tutorial, we will have a close look at all the available options to convert a video to a GIF animation, and how to optimize its file size. Let's get started!Read More…
  • Design & Illustration
    Video Effects
    2 Ways to Create a Slow Motion Video Effect With Photoshop0930 slow motion preview400
    Most people might not know that Photoshop also includes some powerful, but limited, video editing capabilities. In this tutorial, we will show you 2 ways that you can create a slow motion video effect in less than 5 minutes. Let’s get started!Read More…
  • Photography
    Shooting
    How to Shoot Images for a Stop Motion Animated GIFBatchsequence preview retina
    GIFs have a bit of a low brow reputation from being deployed on silly websites in the 90s, but they can be used for more sophisticated purposes. Our GIF will show the unwrapping of a gift, and could be used in an online ad. After I show you how to set up the shoot and capture the necessary images, one of our resident Photoshop experts will teach you the process of animating the image sequence into a GIF.Read More…