Animated GIF Tutorial – Part 2b

Animated GIF tutorial – part 2b

Richard Armitage as John Porter shirtless

Richard Armitage as John Porter

Enjoy one more John Porter screencap before diving into this section of the Animated GIF tutorial!  ♥

Keeping up the momentum, we’ll be jumping right in.  This is the 2nd section of Animated GIF tutorial – Part 2.  If you missed them, here is the Animated GIF tutorial – Part 1 and here is Animated GIF tutorial Part 2a.

Richard Armitage as John Porter

Here again is the final product I’ll be making as we progress through the tutorial.


Tutorial Part 2 Continues Here – Clipping the Video

Now that you have your VOB file loaded into Adobe Premiere Pro, you’re ready to begin clipping your scene for your animated gif.

  1. Scrub the playhead to the beginning of the short scene you want to clip. In other words, slide the blue thing.     🙂
Select beginning of scene with playhead

Select beginning of scene with playhead

  1. Now we’re going to set the “In Point” of our scene.  Click the “Set In Point” button which looks like a left curly bracket.  {
Set the In Point

Set the In Point

  1. Now scrub or scroll to the right to find the end of the scene you’d like to use for your animated gif.  Your scene shouldn’t be more than 5 seconds long.  If you need more control, you can click the Step Forward and Step Backward buttons in Adobe Premiere Pro.
Step forward or backward

Step forward or backward

  1. When you have the blue playhead at the end point of the scene, click the “Set Out Point” button which looks like a right curly bracket.   }
Set the Out Point

Set the Out Point

  1. Now that we have our In Point and Out Point set, we are going to drag our clip down to the Timeline.  We don’t want our audio because animated gifs cannot have sound.  To drag our clip down to the Timeline, point your mouse over the “Drag Video Only” button which looks like a piece of film.  Drag Video Only  Your mouse pointer should look like a hand as shown in the screencap below.   Click and drag down to the beginning of the Timeline as indicated by the path of the dotted arrow.  Release the mouse button.
Drag Video Only to Timeline

Drag Video Only to Timeline

  1. You should now have your short clip in the Timeline and ready to export!  Before you export the video, you might want to check to make sure it’s correct.  To play your clip, click the “Play” button in the Program panel on the right as shown in the screencap below.
Play in Program Monitor

Play in Program Monitor

  1.  If you’re not happy with your clip, you can delete it by clicking on it to select it in the Timeline and then pressing the Delete key on your keyboard. To re-do it, repeat steps 16-21 above.
Click to select and delete clip if necessary

Click to select and delete clip if necessary

  1. It’s now time to export our clip so we can have it ready for the final big step in Adobe Photoshop!   Before we export, click anywhere in the Sequence 01 Timeline so that there is a yellow border around it, indicating that it’s selected. We do this to make sure just our clip is exported, and not the whole VOB file!
Select the timeline

Select the timeline

  1. To export the file, click the File menu, then Export, then Media…
File / Export / Media

File / Export / Media

We need to select our Export Settings.  These are the ones that work best for me:

  1. For Format, click the down arrow and choose “QuickTime.”
Export Settings QuickTime

Export Settings QuickTime

  1. We want to give the exported file a meaningful name.  Click on the default Output Name, “Sequence_01.mov.”
Export Settings Output Name

Export Settings Output Name

  1. Confirm that you are in the Animation folder.  Highlight (select) the default filename “Sequence_01.mov.” and give it a new name such as GIF01.  Then click the “Save” button.
File Name

File Name

  1. As you may recall, animated gifs cannot have audio, so clear the checkbox next to “Export Audio.”
Export Settings No Audio

Export Settings No Audio

  1. To set your Video Codec, click the down arrow and select “JPEG 2000.”
Export Settings Video Codec JPEG2000

Export Settings Video Codec JPEG2000

  1. We’re almost done with our settings…just a few more!  If necessary, scroll down a bit on the Video tab of the Export Settings screen.  Change the Width to 1,280 and the Height to 720.  Make sure the Frame Rate is 25.  Set Field Type: Progressive and Aspect: Square Pixels (1.0).
Export Settings ETC

Export Settings: Width, Height, Frame Rate, Field Type, Aspect

  1. Finally, press the “Export” button, wait a few minutes for it to process, and you’re done! You can now save your file and close Adobe Premiere Pro.
Click the Export Button

Click the Export Button


If you would like to play your short MOV file, ironically it will not play in VLC Player! If you want to watch it, you can do so in Quicktime which is available for a free download here: http://www.apple.com/quicktime/download/

That wraps up the Adobe Premiere Pro editing process. Stay tuned for part 3: Finalizing the animated gif in Photoshop!

Of course, if you have any questions or input, please post a comment. 🙂

A big THANK YOU for your support. The final section of the animated gif tutorial will be posted on Wednesday.

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

12 Responses to Animated GIF Tutorial – Part 2b

  1. judiang says:

    Thank YOU for taking the time and effort to put together these tutorials. They are well done and easy to understand. I’m printing copies to have at hand. 🙂

    • trinalin says:

      Printing???!!!! That’s so 20th century!

      But I agree, fabulous tutorials! Thanks for all your hard work, bcc! Need to boot into Winders & play around with your tutorial (which I’ll follow via the web pages, not by printing! Cuz I’m a 21st century gal!)

  2. CDoart says:

    I agree with Judiang, I am printing your descriptions as well, to have them at hand when trying. As I have another video editing program, I must try around a bit to find the according settings, but your descriptions are a great help. Thank you, bccmee!!!

    • bccmee says:

      @CDoart: You may wish to consider downloading the free trial of Adobe Premiere Pro CS5 if possible. Someone else posted that she had difficulty with the download so I’d be curious if you have better luck. 🙂

      However, I’m curious to see if your editing program will generate a clip that will work in the next part of the tutorial. Thanks so much for checking in.

      • CDoart says:

        I will try around a bit and am looking forward to your next tutorial on Wednesday.
        In the first try I squeezed Lucas a bit and am not sure where I went wrong, as the settings looked right, but nothing can diminish his beauty ;o)
        I also will try to download the test version. I already downloaded it once, but had no time to install and test it, then. I will keep you updated ;o)

        • bccmee says:

          @CDoart: You should be able to stretch Lucas back to normal in Photoshop. 🙂 Thanks again! Good luck with downloading the trial version of Adobe Premiere Pro CS5.

  3. Jacqui says:

    Hi Bccmee I made a short clip about 7 seconds with window movie maker (only got the adobe download assistent not the program) How do I make it avatar format and remove the sound?

  4. Ania says:

    Bccmee, can I ask one question? Regarding the point of the 25th Which format should I choose, if you on my list does not have “QuickTime”? I have something like this:
    http://imageshack.us/photo/my-images/193/pytaniew.png/

    • bccmee says:

      @Ania: Great progress! Instead of QuickTime, use Microsoft AVI. The only problem I’ve had with AVI is that on my Adobe Premiere Pro, I cannot set it to “Square Pixels” so I must choose for Aspect: “D1/DV PAL (1.0940)” which is a little distorted but not too bad. Thanks so much for checking in. I really look forward to your animated gif(s) tomorrow!!!

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