From iPhone to Instagram GIF via Rush, Pr, and AE

Introduction

There are simple ways to create GIFs using smart phones. For instance, the GIPHY app can use your phone’s camera to record a short clip and convert into Instagram-able GIF format. Our goal is a little different. We want to get our video into After Effects so we can add some titles, some animation, so masks, blurs, color, etc before we turn it into an animated GIF.

The process outlined below may seem like a lot of steps, but most are very simple. This process uses the Adobe CC library to transfer your original camera footage from one app to another so you are not constantly exporting and importing.

Why use After Effects?

I find that since AE is so much like Photoshop that I just want to get my video in there once I have made the rough edit. AE offers the maximum amount of control of your image. So if you want to get creative with typography, color, and animation, AE is the application to use.

If you want to skip the first two steps (Rush to Premiere) you could save your phone video to your camera roll, airdrop it or email it (or use Dropbox, Google Drive, etc.) to your computer, and open in AE. That will work just fine. The way I show below is helpful because you don’t need to keep making copies of your video. The original is posted on Adobe CC and you are working from virtual copies most of the way through the process. Here are the steps. Each step is demonstrated with an animated GIF screencast.

Step One: Rough Edit in Rush on your Phone

Edit your rough video in Adobe Rush on your phone. In my case, I changed the speed of the video in Rush. This change carried all the way through to AE as a live effect, meaning that in AE I could still adjust the settings I made in Rush. Make sure the Rush project is saved to Adobe CC. There is a check box that enables this saving function. To save your video back to your camera roll, choose the Export option. You don’t need to post this video to a social channel in order to save your finished edit back to the camera roll.

Step Two: Open the Rush Project in Premiere.

Open Premiere Pro on your computer. From the “home” screen,

Click on: "Open Premiere Rush Project"
Select the project you want to open

The Rush project will open in Premiere. If you made changes to the video in Rush (like adjusting the speed) they should carry over to Premiere as well.

Step Three: Make Changes within Premiere and Send to AE

You can fine-tune your edit in Premiere, or add titles or additional video elements. Mostly I just want to get my footage into After Effects so I am just going to fly through the Premiere step.. To do that quickly, select the footage you want to move in the Premiere timeline (this can more than one clip) and then Right-Click on the clip. This will reveal a long menu. Select:

Replace with After Effects Composition

After Effects will launch and the clips you selected will automatically open in After Effects. Again, if we could do this directly from within AE, we would. But Adobe probably does not see much of a use case for people working in Rush (consumer/amateur) and also in After Effects (professional).

Step Four: Save your Compostion in After Effects

When your compostition opens in After Effects, your first step will be to save the new AE file. Just give the composition a name and click “Save.” Your compostion will open with your footage tranferred from Premiere. Scrub through the footage to make sure everything moved over correctly.

Step Five: Change the Comp Size and Frame Rate in AE

Next you will need to change the size of the compostion to 600 x 600 pixels and arrange the video clip into this new size. We will also change the frame rate to 15 fps in this same dialog box.

Step Six: Adjust Scale and Position

Twirl down the Transform properties triangle and scale your video to fit in the new compostition width of 600px. Since your video is not square, slide the video into the position that works best. To see more of your composition, adjust the magnification setting. This just changes the view, not the scale of the video.

Step Seven: Experiment in After Effects

Now comes the fun part! You have your video in After Effects positioned and scaled appropriately. Now you can use the power of After Effects to change colors, add text, and make other changes. You can add Effects directly to your video, or better yet, add an Adjustment Layer and put the effects there. This way, if you want to make changes you can adjust the Layer itself rather than messing with your video directly.

In the next video I am add an Adjustment Layer and applying a Levels effect. Adjustment Layers influence all the layers beneath them, so in this example the video layer will change with the application of the Levels effect.

Add a Mask

Next I want to add a mask to the adjustment layer so that only part of the image is affected.

Step Eight: Export Frames by Rendering

Once you are happy with your After Effects composition, you can export frames to bring into Photoshop for the last step. Here is a video walk-through of the steps to render your compostion as PNG frames.

Step Nine: Import to Photoshop

Now you have a folder full of PNGs numbered sequentially. Open that image sequence in Photoshop. Make sure you have the Photoshop application configured to show the video timeline, as shown in the next video.

Step Ten: Export the Animated GIF from Photoshop

This step is easy. Just export using the For Web (Legacy) setting, and configure your GIF settings. Keep an eye on the file size, since you want to keep the GIF under 5mb.

Testing your Animated GIF in a browser

If you open your GIF in a browser such as Chrome, or Firefox, the animation should play.

Send the GIF back to your Phone

Use Airdrop, Google Drive, email, dropbox — whatever method you can to send the file back to your phone. Make sure you have the .gif extension on your file, otherwise you phone may put the file someplace where you can’t find it! Now, follow these steps to use the Giphy app to upload your GIF to Instagram. Done!