Using Video in Animated GIFs

Topics covered in this Photoshop tutorial:

Specifying a range from a video to import, Converting video into a frame animation

Exercise Preview

Video courtesy of istockphoto, © pailoolom, Video #000016852234

Exercise Overview

In this exercise, we’re going to create a GIF that will go inside an HTML email. Because it’s an email, it’s okay if the animation is a little more complex, and the file size a little larger. We’ll actually be starting with video footage and turning it into a frame animation. Photoshop supports some basic video editing, and it can also open up a video—in this case, a .mov file—and convert it to frames for us.

Previewing the Finished Animation

Let’s start by previewing how our finished file will look at the end of this exercise.

1. Launch any web browser (Chrome, Safari, Firefox, etc.).

2. Press Cmd–O (Mac) or Ctrl–O (Windows) and navigate to Desktop > Class Files > Animated GIFs Class > Clean Air.

3. Double–click on clean-air.gif.

   Press Cmd–R (Mac) or Ctrl–R (Windows) to reload and watch the animation run a few times to get a feel for what we’ll be working towards. It starts with a cool photographic animation of clouds moving in the sky. Then a text message appears. After that a translucent white bar moves up onto the screen with the event’s date and time.

Turning Video into Animation

1. In Photoshop, go to File > Import > Video Frames to Layers.

2. Navigate into Desktop > Class Files > Animated GIFs Class > Clean Air and double–click the file iStock_000016852234HD720.mov.

3. The video is too long for our purposes. In the window that opens, choose Selected Range Only.

4. Check on Limit To Every and set it to 2 Frames.

   We can create this animation with the full original video quality, but that will take up unnecessary file size. This way, it will only create a frame for every other image in the video, which means half the number of frames.

5. Check on Make Frame Animation.

   Video Frames to Layers takes every still image that makes up a video and creates a separate layer for each one. If we check Make Frame Animation it will also take each of those layers and turn them into separate frames. That’s pretty much doing the work for us.

6. On the right, you’ll see a video preview where you can choose where the video starts and stops. Adjust the end/out point (at the bottom below the video preview) to decide where to crop the video. It should look something like this:

   

7. Click OK.

Adjusting the Length & Size

This is still probably a little longer than we need it to be.

1. Let’s delete all the frames after frame 30. In the Timeline panel, select frame 31 and Shift–click on the last frame in the sequence.

2. At the bottom of the Timeline panel, click the trash icon .

3. In the dialog that appears, click Yes.

4. We have to do the same thing in the Layers panel. Select layer 31 and Shift–click on the very top layer.

5. At the bottom of the Layers panel, click the trash icon .

6. In the dialog that appears, click Yes.

7. 30 layers is still a lot of layers. To keep things more organized, let’s group the layers together. Select all of the layers by clicking the top layer and Shift–clicking the bottom layer.

8. Go to Layer > Group Layers or press Cmd–G (Mac) or Ctrl–G (Windows).

9. In the Layers panel, double–click the Group 1 folder name. Rename the group clouds so we remember what it is.

   Notice that the frame delay time has been set to 0.04 seconds for all our frames. This would be correct if we imported every frame in the video. Because we only imported half the frames, we need to double the delay time.

10. Select all 30 frames.

11. Click 0.04 at the bottom of any of the selected frames, and from the menu that appears, choose Other.

12. Set the Delay to 0.08 seconds.

13. Click OK.

    NOTE: You can also do some math to figure out this number if you’re unsure. The original video was 24 frames per second. When we imported half the frames, it became 12 frames per second. That means each frame should last ¹⁄₁₂ of a second, or about 0.08 seconds.

14. The animation looks good, but Photoshop imported everything with the original video dimensions, which are too large. To change them, go to Image > Image Size and set the following:

    Width:	600 Pixels
    Resolution:	72 Pixels/Inch
    Resample:	Check it on

15. Click OK.

    The width is correct, but the height is still too tall. We’ll have to crop it down. Luckily, Image Size and Canvas Size both apply to the animation as a whole, so resizing isn’t too tricky.

16. Go to Image > Canvas Size and set:
    • Height: 300 Pixels
    • Choose the top middle Anchor (click the top middle arrow next to Anchor), so that the canvas is cropped from the bottom.
    • Click OK.
    • If you get a warning about clipping, click Proceed.

Adding the Text

After the clouds roll by once, we want to add the message.

1. Select frame 30 and click the Duplicates selected frames button .

2. With frame 31 selected, choose the Type tool .

3. In the Options bar, set the text to:
   • Myriad Pro Bold
   • Font Size: 61 pt
   • Left align text
   • Text Color: white

4. In the Character panel (Window > Character) set the leading to 56 pt.

5. Click towards the top left corner of the canvas and type:

   STOP
   & THINK

6. Use the Move tool to move the text into a good position in the top left corner.

7. With the Type tool , click somewhere below the existing type.

8. In the Options bar, set the text to Myriad Pro Regular, 19 pt.

9. Type the following:

   about what you can do to keep the air clean.

10. Use the Move tool if you need to move it into a good position below STOP & THINK, making sure it does not get lost in the clouds.

11. We also need to add some text at the bottom. With the Type tool , click somewhere near the bottom of the canvas.

12. In the Options bar, set the text to Myriad Pro Bold, 24 pt.

13. Click the color box and set the Color of the text to #00754F.

14. Type the following:

    Wednesday, June 26th @ 6pm

15. Use the Move tool to move it into at the bottom left of the file. Don’t worry if it’s hard to read—we are going to place a shape behind it next.

16. Choose the Rectangle tool from the Tools panel.

17. In the Options bar, set the Fill color to white.

18. Draw a rectangle along the bottom of the canvas that stretches all the way from the left to the right, and from the bottom to just above the words Wednesday, June 26th. It’s OK if it goes over the edge of the canvas.
19. In the Layers panel, drag the Rectangle layer below the Wednesday layer.

20. In the Layers panel, set the Opacity of the Rectangle layer to 60%.

21. If you need to adjust the size of the rectangle, go to Edit > Free Transform and make your adjustments. When done, press Return (Mac) or Enter (Windows).

Animating the Text

1. The layout on frame 31 should look good with all of our information. But look at the rest of our frames. Oops! When we created new layers, they were added to every single frame, not just the frame we selected. Luckily this is easy to fix.

2. Select frames 1 through 31.

3. In the Layers panel, hide the three text layers and the Rectangle layer.

   Now the text shouldn’t be visible in any of the frames. Much better. Now we can bring in the text with animation. We’ll have some of it fade in, some of it move in, and some of it will just appear.

4. Select frame 31 and click Duplicates selected frames .

5. With frame 32 selected, show the STOP & THINK layer by clicking the empty box to the left of it.

6. Let’s fade in the text. Select frames 31 and 32.

7. At the bottom of the Timeline, click the Tweens animation frames button .

8. In the Tween dialog, set:

   • Frames to Add: 4
   • Parameters: Keep everything checked.

   Click OK.

9. Select frame 36 and click Duplicates selected frames .

10. Select frame 37 and show the about what you can do… text layer by clicking the empty box to the left of it.

11. With frame 37 selected, click Duplicates selected frames .

12. With frame 38 selected, show both the Rectangle and Wednesday, June 26th layers.

13. With frame 38 selected, click Duplicates selected frames .

    We want this last bit of text and its rectangle to move in from the bottom, so we’re going to go back a frame and have it start off-screen.

14. Select frame 38.

15. Select both the Rectangle and Wednesday, June 26th layers in the Layers panel.

16. Select the Move tool .

17. Hold Shift and drag both layers down so that they are just off the edge of the canvas. (You can also use the Arrow keys on the keyboard to nudge them.)

18. To animate the text moving in, select frames 38 and 39.

19. At the bottom of the Timeline panel, click the Tweens animation frames button .

20. In the Tween dialog, set:

    • Frames to Add: 4
    • Parameters: Keep everything checked.

    Click OK.

Adjusting the Timing

That’s it for our animation! But we still want to adjust the timing so that there’s a bit of a pause before each new piece of information. This gives the viewer a bit more time to absorb things.

1. Select frame 31. This should be the last frame before the text starts to appear.

2. Click 0.08 sec. at the bottom of the frame, and from the menu that appears, choose 0.2.

3. Select frames 36 and 37. This should be just before and after the about what you can do… text appears.

4. Set the frame delay time to 1 second.

5. Select frame 43. This should be the last frame in our animation.

6. Set the frame delay time to 5 seconds.

   Actually, a delay at the end doesn’t matter very much because we don’t want this animation to loop back to the beginning. We want it to play once through when the email is first opened then stop on the last frame. Let’s set that now.

7. At the bottom left of the Timeline panel, set the looping to Once.

Saving the File

1. Save the working file by going to File > Save As.

2. Set Format (Mac) or Save as type (Windows) to Photoshop.

3. Name the file: yourname-clean-air.psd

4. Navigate into Desktop > Class Files > Animated GIFs Class > Clean Air and click Save.

5. To export a GIF file, go to File > Export > Save for Web (Legacy).

6. Click the 2-Up tab at the top.

7. From the Preset menu, choose GIF 128 Dithered and set the following:

   • Colors: 256
   • Dither: 80%

   NOTE: These are our recommended settings for this file, but feel free to experiment to see if you can reduce the file size further. The video animation will play really quickly, so the last frame is probably what you should focus on. You’ll need as many colors as you can get for the frames taken from the video. We also added some Dither to the file to improve the image quality some. You can either remove the Dither to reduce the file size even more, or make it 100% to improve the image quality if you don’t mind the higher file size.

8. Click Save.

9. Name the file: clean-air.gif

10. Save it into Desktop > Class Files > Animated GIFs Class > Clean Air > Clean Air Email > img.

11. To test out how the GIF looks inside the email, open any web browser, then open the file index.html (inside Desktop > Class Files > Animated GIFs Class > Clean Air > Clean Air Email).