Animated GIF Tutorial – Part 3

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:

Richard Armitage as John Porter

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”:

  1. First you need to rip a DVD. This was done in Part 1.
  2. Then clip a 2-5 second sequence in a video editing program, such as Adobe Premiere Pro.   
  3. Import that clip into Adobe Photoshop to set the timings.  You are here!
  4. 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.  🙂

Richard Armitage as John Porter in sunglasses


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…

File / Import / Video Frames to Layers...

File / Import / Video Frames to Layers...

If you have opened the 64-bit version of Adobe Photoshop, you will see the following message:

Please use 32 bit version

Please use 32 bit version 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.

Open 32-bit version of Photoshop

Open 32-bit version of Photoshop

You can see the version while the program loads as shown in the screencap below.

32 bit Adobe Photoshop

32 bit Adobe Photoshop

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).

Load MOV clip

Load MOV clip

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.

Import Video to Layers

Import Video to Layers

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! 🙂

Turn on Animation Panel

Turn on Animation Panel

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!

Loop Forever and Play Buttons

Loop Forever and Play Buttons

6b. When you’ve watched your animation enough, click the “Stop” button.

Stop Animation

Stop Animation

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.

Rectangular Marquee Tool

Rectangular Marquee Tool

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.

Fixed Ratio Selection

Fixed Ratio Selection

9. You should now have a perfectly square selection around your image. The active selection is sometimes called “marching ants!” 😀

Square Selection

Square Selection

10. To complete the cropping process, click on the Image menu, then Crop.

Image Crop

Image 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:

Select the first frame

Select the first frame

Scroll to the right until you can see the last frame:

Slide Scroll Bar

Slide Scroll Bar

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:

Hold SHIFT and select last frame

Hold SHIFT and select last frame

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…”

Set timing

Set timing

In the Set Delay box, type 0.08 and click the OK button.

Set Delay to 0.08

Set Delay to 0.08

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).

Save animation as a PSD file

Save animation as a PSD file

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.  🙂

Click here to go onto part 4!

Advertisements
This entry was posted in Animated GIFs, Thoughts, Tutorials and tagged , , , , , , , , , . Bookmark the permalink.

8 Responses to Animated GIF Tutorial – Part 3

  1. Jacqui says:

    Cannot download the adobe. They ask for a Adobe ID I donot have. 😦 What must I do to finish my clip into a small one?

    • bccmee says:

      @Jacqui, I’m asking a friend to help with your question. In the meantime, perhaps a Google search will be useful?

      • Dhana says:

        It is very easy to create an Adobe ID…When the Adobe Download Assistant pops up, click the gray button marked “Create an Adobe ID”. Another box will appear. Enter your email address (this will be your Adobe ID), password, first name, last name, and country. Click the gray button marked “Create” and you should be all set. 🙂

    • bccmee says:

      @Jacqui: Hey your first clip! It’s a bit “squished” so maybe my settings from Strike Back didn’t work properly for your video. Hope you don’t mind, but I unsquished it for you and loaded it here:

      [video src="http://s898.photobucket.com/albums/ac185/bccmee2/?action=view&current=jacqui.mp4" /]

      If you send me a message through the Contact bccmee I can tell you how I did it.

      Congratulations on your first little video! I look forward to many more to come. I like how you added text and effects already. 😀

  2. Jonia says:

    Hmm… I have to try this with Photoshop. I’m not so very familiar with this program. Thank You Bccmee 🙂

    • bccmee says:

      @Jonia: I know you already make animated gifs so I’m interested in hearing if you like this method. 🙂 Please let me know! Thanks for your comment and I hope to hear back!

Please share your thoughts! Email address is optional.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s