Animated GIF Tutorial – Part 3
Welcome back to the Animated GIF Tutorial! If you missed the earlier parts, you can find them as follows: Part 1, Part 2a, Part 2b. If you have already completed those parts, you should have now have a short movie file in MOV format of a few seconds in length that will be turned into a small animated gif like this one:
Here in Part 3 of the animated gif tutorial, we are going to import our short movie scene into Adobe Photoshop to finish up the finalized product. There are so many screencaps that I have divided the Photoshop segment into two posts. This tutorial will continue directly in Part 4 today. Also, I used low quality images to speed up the page loading times. Many of the images will enlarge if you click on them.
As before, here’s the “big picture”:
- First you need to rip a DVD. This was done in Part 1.
- Then clip a 2-5 second sequence in a video editing program, such as Adobe Premiere Pro.
- Import that clip into Adobe Photoshop to set the timings. ◄ You are here!
- Finally, add the text, resize the image and save for the web.
Here’s a screencap I just made so we can have a nice view as we embark on our journey. 🙂
Animated GIF Tutorial – Part 3 starts here
If you don’t already have a copy of Adobe Photoshop, you can download a free 30-day trial here: http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop
Note that the latest Adobe programs require a 64-bit computer processor. If you’re not sure, here’s a guide on Microsoft’s website: http://windows.microsoft.com/en-US/windows-vista/32-bit-and-64-bit-Windows-frequently-asked-questions
Install Adobe Photoshop if necessary. If you have another version of Adobe Photoshop, this tutorial might work, depending on which one you have.
1. Open Adobe Photoshop.
2a. We’re going to import our short MOV file to convert it into an animated gif. Go to the File menu, then Import, then Video Frames to Layers…
If you have opened the 64-bit version of Adobe Photoshop, you will see the following message:
2b. Luckily, Adobe includes the 32-bit version of Photoshop with their 64-bit version. If you received the above message, we need to close Photoshop and then open the 32-bit version of the program. To do this, click the Start button on your computer, and in the Search box, type (or better yet, copy and paste) the following path with the quotes: “C:\Program Files (x86)\Adobe\Adobe Photoshop CS5\Photoshop.exe” Then click on the program name at the top of the popup box.
You can see the version while the program loads as shown in the screencap below.
Now the 32-bit version should open!
2c. If you had to reopen Adobe Photoshop, again go to the File menu, then Import, then Video Frames to Layers… as shown in step 2a above.
3. If necessary, navigate to the folder containing the movie clip you created in the last lesson. In my example, the folder is C:\Animation. Select your short video clip. Mine is GIF01.mov. Then click the “Load” button (not shown in the screencap).
4. In the box that appears, make sure that “From Beginning to End” is selected. Put a check in “Limit To Every 2 Frames” and make sure there is a check in “Make Frame Animation” as shown in the screencap below. Then click the “OK” button.
5. You will see a progress bar as the program does its work. Then you will have a Photoshop file with multiple layers. Now we need to see our animation tools. To make them visible if they are not already, click on the Window menu, then Animation. This will toggle the Animation tools on and off. Obviously we want them on for this project! 🙂
6a. To get an idea of how animation works in Adobe Photoshop, click the little play button near the bottom-left-hand corner of your Animation panel. If the animation plays and then stops, click the little down arrow where indicated in the screencap and choose “Forever.” We want our animated gif to loop indefinitely!
6b. When you’ve watched your animation enough, click the “Stop” button.
7. Next we want to crop our animated gif image into a square. To do this, first click the Rectangular Marquee Tool as shown below.
8. We want to crop our image into a perfect square. We’ll deal with the size later. 🙂 One way to draw a perfectly square selection is to hold down the Shift key on the keyboard while dragging with the mouse. Here’s another technique I discovered that you may like better: Make sure the Rectangular Marquee Tool is selected, then choose the “Fixed Ratio” style, and finally type 1 in the width and height boxes. Now you can make a selection with a perfect square of any size! Try to avoid the black frames if you have them in your video as I do.
9. You should now have a perfectly square selection around your image. The active selection is sometimes called “marching ants!” 😀
10. To complete the cropping process, click on the Image menu, then Crop.
11. You should now have a large square image. Go ahead and play ► your animation…you know you want to! 😀
12. Okay, now back to work, LOL! We’re going to set the timing of our animation. To do this to all the frames at once, we must first select all of them. It would take quite a long while to do them one-by-one. I have 55 frames and you might have more! (Click images for full size.)
Select the first frame by clicking on Frame 1:
Scroll to the right until you can see the last frame:
To select all the frames, hold down the Shift key on your keyboard and then click on the last frame. Your Animation panel should look like the screencap below:
Now to change the timing, click the tiny down arrow on any one of the frames. Mine are set to 0.04 seconds by default and yours might be different. However, I’ve found that 0.08 seconds gives me the best results. After you click the tiny down arrow, click “Other…”
In the Set Delay box, type 0.08 and click the OK button.
13. This would be a good time to save our work before we move onto part 4 which follows directly. To save your file, click on the File menu, then Save. Be sure you are in the correct folder. I’m in C:\Animation. Give your file an appropriate name. I’m naming my file Animation01 in Photoshop’s PSD format for now. Then click the “Save” button (not shown in screencap).
In the next and final lesson, we will add our text, resize our image down to 100×100 pixels and then save it as an animated gif! The next part starts directly. 🙂