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:

Richard Armitage as John Porter

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

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

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

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

Create a New Layer

New Layer Appears

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

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

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

Get ready to pour the paint

After pouring 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

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

Text Options

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

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

Select Frame 1

Shift-Click to select all but the last frame

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

Layer Visibility icon

Make layers invisible

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

Click arrow to set frame delay

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

Choose "Other" to set frame delay

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

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

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

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

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.

4-Up Save for Web & Devices

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!

John Porter Jungle

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.

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

34 Responses to Animated GIF Tutorial – Part 4 of 4

  1. Lady Rose says:

    Haaaaaaa! Bccmee, I love you!

  2. Pamela says:

    Your generosity with your time & skills is very inspiring. Thanks, Bccmee 🙂

  3. cdoart says:

    Wonderful tutorial, bccmee. I am so much looking forward to try it out in full and my fingers are restless and can’t await it ;o)
    Now that I get back ‘Schnuckie’ and it seems that I did not loose my installations (would have meant about two to three days to renew them) I hope I can get to it some time soon.

  4. Dhana says:

    Fantastic tutorials, bccmee!!! I have really enjoyed following along. Here’s the result of my efforts:

    http://tinyurl.com/c55hvbf

    I’m looking forward to the surprise post and the challenges. 😀 Thanks again for all the work you have put in to these tutorials!

  5. Tanni Tani says:


    but if you press a little button with the lines in the upper right corner of the picture, you can specify the desired size in kilobytes, gif image and Photoshop will determine the Number of colors and optimizes the picture for a given size

  6. Ania says:

    Bccmee you’re really great!
    I confess that I did (almost) everything, according to your tutorial. I had some problems, because as you know, I didn’t have QuickTime earlier, but now I had to toinstall it. In addition, Adobe Premiere Pro is in English which is good because it compatible with your tutorial, but my Adobe Photoshop in Polish-and this is craziness. LOL!
    Perhaps for this reason I could not do the point 19 and 21c, but I’ll try again tomorrow.

    • bccmee says:

      @Ania: Good work so far! I know it must be confusing. I’ve done some French tutorials and they’re very difficult and slow because I have to translate everything. I’m glad you’re going to try again tomorrow. 🙂

      I’m not sure if this will help, but those steps involve using the Paint Bucket Tool to fill in the new layer, then using the Horizontal Type Tool to type some text on top of the new layer.

      I look forward to your final product. 🙂

  7. Alfie says:

    I want your skills and ENERGY. It is amazing, what you can do in what seems so short time. But thank you for this tutorial. Have only so far “Ripped” John Porter, but when I get the time, I hopefully gets further in yout tut.
    Looking forward to surprise AND challenges.

    • bccmee says:

      @Alfie: Just remember that John Porter is MINE, LOL! I’m really looking forward to your work. I know you have experience making animated gifs already and I’m eager to find out if you like this method. 🙂

      Thanks so much for your kind words.

  8. Gratiana says:

    Dear Bccmee,
    You are such an amazing Tech Goddess Divine to teach us all how to become vidders, giffers, and screencappers–and in a completely clear step by step process! Mere thanks aren’t enough to express my gratitude to you. You are the absolute best! Or a the Brits say, “FABULOUS!”
    Cheers! Grati ;->

  9. Oh my, Oh my! I’m getting sooooooooo behind! I hope I can catch you during the weekend. I haven’t been feeling very well lately but as soon as I recover I’ll be “giffing” as if there was no tomorrow *humpf*.
    Thank you Bcc!

  10. Dhana says:

    Okay, I am having WAYYY too much fun with this!!! Here’s my second animated GIF:

    http://tinyurl.com/7exmk5s

    Off to do another! LoL

  11. Jacqui says:

    Here’s my attempt!

    • bccmee says:

      Hi Jacqui, that turned out really well! Could you please post it on my blog? Also, may I feature it as a bonus graphic this month?

      Thanks so much for sharing. 🙂 I applaud your persistence. I learned through trial and error myself.

      I look forward to many more to come. 🙂

      Wow, I’m so excited. It’s like a birthday gif for me, LOL!

      Have a great night. *HUGS*

      Take care,

  12. Jacqui says:

    Hi Bccmee I’ve redone the goodlooking gif. Hope this looks better?

    Don’t know where to post it on your blog? This is your blog isn’t it? :-/

  13. Jacqui says:

    PS I used this moment in ep 8 cause I used to have an avi with the picture from that scene (the first frame of the clip) 😉

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