Animated GIF Tutorial – Part 4 of 4

Animated GIF Tutorial – Part 4

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, and Part 3.   If you have already completed those parts, you are almost done creating an animated gif like the one below:

Here in Part 4 of the animated gif tutorial, we are going to continue on with our final touches in Adobe Photoshop.  We will be adding some text, resizing our image, and saving it as an animated gif.

One more time, 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.  
4. Finally, add the text, resize the image and save for the web. ◄ You are here!

Let’s dive right in!  I’m going to continue the numbering from the previous lesson since we are finishing up the Adobe Photoshop process without interruption.  Remember that you can click on the images if you need to enlarge them.

14. Now we want to add a text frame at the end.  To do this, click on the last frame of your image and make sure it’s the only frame selected.  It may be necessary to scroll to the far right. In my example, the last frame is number 55.

Select Last Frame

15. We need to add another frame to become our text frame. With the last frame selected, click on the button indicated in the screencap below to duplicate the selected frame.

Duplicate Selected Frame

16. Now we’re going to add a new background layer for our text. Make sure your new frame is selected. In my example it’s frame 56. In the Layers panel, scroll up click to select the uppermost layer. In my example, that’s Layer 55. (If your Layers panel is not visible, you can access it by going to the Windows menu and selecting Layers.)

Select Top Layer

17. While still in the Layers panel, click the Create a New Layer button as shown below. A new blank layer will appear.

Create a New Layer

New Layer Appears

18. Select an appropriate color by clicking on the Set Foreground Color tool. This tool is usually found near the lower-left hand corner of Photoshop. (If your Tools panel is not visible, it can be accessed by going to the Windows menu and clicking Tools.)

Select Color

19. To fill your new layer with the color you just selected, first click the Paint Bucket tool which is near the middle of the tools palette. (It might be hidden behind the Gradient tool.)

Paint Bucket Tool

20. Confirm that the new blank top layer selected over in the Layers panel. Then click on top of your large image to fill the layer with your new color.

Get ready to pour the paint

After pouring the paint

You may have noticed that all your frames are now filled with color! Not to worry. We’ll fix that in a later step.

21a. Next we’ll add the text. Select the Type tool in the Tools palette.

Select the Type Tool

21b. If necessary, choose a text color that will contrast with the background by clicking on the Text Color button on the options near the top of your screen. You can also set the font family, style, size, and alignment.

Text Options

21c. Click on your background and type your text.

Type your text

22a. Now we need to remove the background color and text from the all but the last frame. To do this, we need to select all the frames except the last one. Click the first frame (Frame 1) and then scroll across to the right. Click the second-to-the-last frame while holding down the Shift key on your keyboard (in my example, Frame 55).

Select Frame 1

Shift-Click to select all but the last frame

22b. Back on the Layers panel, click the “eyeball” on each of the two top layers to turn off their visibility on all the Frames except the last one.

Layer Visibility icon

23a. Now that the only frame with the text and background color is the last one, we’ll change the timing of that frame so there is time to read it! Click the tiny down arrow of the last frame (Frame 56 in my example).

Click arrow to set frame delay

23b. Select “Other” from the menu that pops up.

Choose "Other" to set frame delay

23c. We’re going to set the frame to 1.5 seconds. Type 1.5 in the box and click the OK button.

Set delay to 1.5 seconds

24a. We’re almost done! Now we just need to shrink down our animated gif. To resize the image, click on the Image menu, then Image Size.

Image Size

24b. We want our image to be 100 pixels high by 100 pixels wide so it can be used as an avatar and so the file size is manageable. Type in 100 in the Width box (and 100 in the Height box if necessary). Then click the OK button.

Image size 100 x 100 pixels

25a. Now it’s time to save our image as an animated gif! Go to the File menu, then Save for Web and Devices…

Save for Web & Devices

25b. In the Save for Web & Devices box, make sure the 4-Up tab is selected. Then click on the upper-right-hand-corner image to select it. You can experiment with the settings but the ones I have circled in the screenshot below generally work well for me. Make SURE that GIF is selected as your file format! This is imperative. 🙂 I have found that 128 colors are usually enough but you can change it to 256 colors. Usually 0% dither looks better. Confirm that “Forever” is selected at the bottom so your gif will loop indefinitely.

Save for Web & Devices Settings

25c. Click the “Save” button and save your file in your C:\Animation folder. If you want to test out your animated gif, open it in your browser such as Internet Explorer, Firefox or Chrome.

Congratulations on a job well done!

Here’s another screencap as a reward for all your hard work!

A big thank you to all of you who suggested I create a tutorial.  I know that not everyone can participate due to computer and software limitations, but I urge you to look for other tutorials if you cannot complete mine.

Please post your questions, comments, and especially your completed animated gifs in the comments below.   🙂

Just for fun, I decided to record the creation of one of my animated gifs with a screen camera.  This video is not a tutorial, but simply a real-time capture of my process so you can really see the “big picture!”  😀  Hope you enjoy it.  I am only posting the link and not embedding it because it is best viewed at full screen.

http://www.youtube.com/watch?v=SvzXT7OsFEQ&hd=1

A few final thoughts:

I’m very grateful to my beta readers! You rock! Your input was invaluable.

Again, a big thank you to everyone who has been participating in this tutorial. I appreciate you sharing your hard work and your questions and I look forward to seeing your animated gifs. 🙂

Tomorrow I have a surprise post that I hope you enjoy.

And finally, I have TWO (yes, two) challenges planned for the coming weeks. Please stay tuned.

See you tomorrow.

P.S. If you head over to the Richard III project blog, you can see a bonus animated gif I made for their art project.