Animated GIF Tutorial – Part 2a

♪ ♪ ♫ When you read you begin with A, B, C…. ♫ ♪ ♫
♫ ♫ ♫ When you make animated gifs, you start with your VOB!  ♪ ♫ ♫

Animated GIF Tutorial – Part 2a

Welcome back to our animated gif tutorial.  Before you begin this part, you should have some video footage available to clip into a short segment.  If you do not, please complete Part 1 of this tutorial.  🙂  Today we are going to clip the VOB file into a short scene to be used in our final animated gif.  There are many ways to do this. I am showing you how I do it in Adobe Premiere Pro.

This part of the tutorial uses many screencaps so it is divided into two posts. Also, I used lower-quality images to speed up the page loading times.

Once again, here’s the final product that I’ll be using to demonstrate.  Mmm, John Porter makes it hard for me to concentrate so I must apply effort, LOL!  ♥

Richard Armitage as John Porter

As I mentioned in part 1, the gif consists of video and text and the animation loops indefinitely.

Here again are the “broad strokes.” I will break it down step-by-step, but I want you to see 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.   You are here!
  3. Import that clip into Adobe Photoshop to set the timings.
  4. Finally, add the text, resize the image and save for the web.

NOTE: Adobe Premiere Pro and Adobe Photoshop are not free, but you can download fully-functional trial versions for a 30-day period.

Tutorial Part 2 Starts Here – Clipping the video

Today we’ll learn part 2: clipping the video. Now that we have a long segment of video footage, we need to edit it down to a 2-5 second sequence for our animated gif.  We will be using the video editing program Adobe Premiere Pro because it supports VOB files without the need to convert them.

We’ll be downloading and installing Adobe Premiere Pro if necessary first. Then we’ll create a new project in our Animation folder with the proper settings.  After that, we’ll import our VOB video file, clip it, and export it for the next step.  Today’s lesson requires a lot of screencaps so I am dividing it into two posts in the same day.  Also, for faster page loading, I used lower-quality images.  This is essentially a crash course in Adobe Premiere Pro!  😀

If it seems a bit overwhelming at first, take it step-by-step and you should be fine.  If  you have problems, go back a few steps and try again.  Feel free to post your questions in the comments and I will answer them as soon as I am able.  You are also welcome to answer the questions of others!  This is a team effort.  😀

  1. Be sure you know where your VOB or other video file is located. Mine is in the C:\Animation folder.
  2. If you don’t already have Adobe Premiere Pro, you can download a free 30-day trial at  My tutorial is written using version CS5, so that’s where I’m directing you.

NOTE: If you already have another version of Adobe Premiere Pro, you should NOT download the trial!  The reason is because once the trial period is over, your program will become inoperable and you will have to uninstall everything and reinstall your old version.  If you lost your original registration code, you will be left without anything, and a previous version is much better than no version at all.  🙂

  1. Install Adobe Premiere Pro CS5. I don’t have a tutorial for the download and installation of Adobe Premiere Pro, but if you have difficulty, please let me know via the comments.
  2. Start Adobe Premiere Pro CS5 and you should see something like this:
Adobe Premiere Pro New Project

Adobe Premiere Pro New Project

  1. Click on “New Project” and you will see something like the image below. We’re going to set our file location and give it a name.
Adobe Premiere Pro File Name & Location

Adobe Premiere Pro File Name & Location

  1. To set your file location, click the “Browse…” button and navigate to the C:\Animation folder you created in Part 1. Then click the OK button.
Browse for folder

Browse for folder

  1.  Give the file a name by highlighting (selecting) the word “Untitled” and typing a new name. I’m going to call my new file GIF.  Then click the OK button.
Add a file name

Add a file name

  1. Now we’re going to choose our sequence settings. These settings work well for most of my animated gif projects.  To access these settings, click the down arrow beside “AVCHD,” then the down arrow next to “720p.”  Finally, select “AVCHD 720p25.”  We’re going to keep the default Sequence Name “Sequence 01” so click the “OK” button.
Sequence Presets

Sequence Presets - Click for full-size

  1. Now you should have Adobe Premiere open!  We will only be using a few features to make our short clip.   Your screen should look similar to the screencap below.  Click for full size if desired.
Adobe Premiere Pro main screen

Adobe Premiere Pro main screen

  1. We need to import our VOB file in order to clip it down to a short segment.  To do this, click the “File” menu, then “Import.”
File / Import

File / Import

  1. Make sure  you are in the appropriate folder. I’m in C:\Animation.  Then select your VOB file and click the “Open” button. (The Open button is not visible in the screencap.)
Import Location

Import Location

  1. Confirm that your file is imported and in the Project Panel as shown below.  In order to begin the clipping process, we need to DOUBLE-CLICK the VOB file in your Project Panel as shown with the arrow.
Your VOB file is imported

Your VOB file is imported

  1. After double-clicking the VOB file, it will appear in your source monitor.  However, since you are at the beginning of the file, you may see only a black screen as shown below.
Source Monitor

Source Monitor

  1. To see the footage, we will scroll though it by sliding that blue thing.  😉   In technical terms, we will “scrub the playhead” back and forth.  Then we can see our footage.  Go ahead and scrub through  your footage using the blue playhead so you can find the location where you want to start your clip for  your animated gif. Now would also be a good time to Save your file.
Scrub the playhead to scroll through the footage

Scrub the playhead to scroll through the footage

  1. Optional: It might be a good idea to write down the timing of the beginning of the sequence you’ll use for your animated gif.
Timing Location

Timing Location

That’s the end of this section of the tutorial. Take a nice study break and then go on to Animated GIF tutorial – part 2b.

Here’s a screencap to rest your eyes on. ♥

Richard Armitage as John Porter looking gorgeous

Richard Armitage as John Porter looking gorgeous

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

16 Responses to Animated GIF Tutorial – Part 2a

  1. Ania says:

    Today, I guess, have to give up. I have trouble downloading Adobe Premiere Pro. The first time, after nearly two hours of downloading an error occurred (No. 110), so repeated retrieval – and unfortunately without success. 😦
    I’ll have to try tomorrow.

    • bccmee says:

      @Ania: Oh I’m very sorry to hear that. 😦 Good luck to you. I’ll try to see if I can find another editing program that will work in the meantime.

      • Ania says:

        Bccmee Thank you very much for your time and effort, but today (finally!) I downloaded Adobe Premiere Pro. Sorry for confusion that I caused yesterday 😦
        Now I come to part 2b, your tutorial.

  2. And only few remained….. I’m sorry to say I had troubles too.
    I’m not a good study!
    I had to download Premiere Elements 9 for XP instead of Pro and commands are non exactly the same. I must say Premiere had always given me headaches (I used it 10 years ago, more or less).

    Well, I already learned how to create screencaps, thanks to you.
    Now, I am playing with Premiere Elements and having a lot of fun with short slide shows.
    In case I create something worth, I will send you.
    Thanks for your time, dear!

    • bccmee says:

      @Carla: Adobe Premiere Elements will certainly be able to create clips! Do you have any version of Adobe Photoshop for the final part of the tutorial? I do appreciate all your efforts and participation. Good luck in creating some videos and I would love to see your work when you are ready to show it! 🙂

  3. Jacqui says:

    Hi have finally downloaded from above link but programm looks like regualr photoshop? Don’t see a ‘new project’ text and downloading a clip doesn’t work ???

    • bccmee says:

      @Jacqui: Thanks for your input. I’m surprised nobody caught my mistake before. I have fixed the link. 🙂 The link now leads to Adobe Premiere Pro.

      • Jacqui says:

        Oops should I than remove the photoshop program first? (I already have Gimp) and than download the premiere pro? :-\

        • Jacqui says:

          PS Saw the un squised clip too, didn’t notice mine was squised. There’s maybe a lot for me to learn about clipmaking for example how can you see how it will look online?

        • bccmee says:

          @Jacqui: Please keep your trial of Adobe Photoshop because it is used in future steps. I don’t have a tutorial for making animated gifs with Gimp. 🙂

        • bccmee says:

          @Jacqui: Regarding the unsquished clip, you may want to try to create it again. Is it possible that one of your settings differed from mine? I created mine in Adobe Premiere Pro. What software did you use?

  4. Jacqui says:

    Just the program that went with the PC I bought: windows movie maker

    • bccmee says:

      @Jacqui: I don’t know why your aspect ratio was incorrect as I’ve never played with Windows Movie Maker. However, if you downloaded the trial of Adobe Premiere Pro, the settings in the tutorial should help. Then maybe you can find a tutorial for Windows Movie Maker once your Premiere Pro trial expires. 🙂

      I look forward to your first animated gif and I hope you post it here!

      Thanks for checking in!

  5. asare says:

    “Sorry, a serious error has occurred that requires Adobe Premiere Pro to shut down. We will attempt to save your current project.”please what is the problem

Please share your thoughts! Email address is optional.

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s