How to Export an Animated GIF using Adobe Photoshop and After Effects (Part 3)

  •  8 Comments

Previous articles:

Animated GIF images are one of the most popular image types on the web. The process of making a design and animating it is a different story, but in today’s tutorial I’ll show you how to export an animated GIF.

If you are interested I will make a tutorial about the process of making the bicycle design below for import into Adobe After Effects. Let me know in comments.

Animated GIF

I have attached folder where you can find the After Effects file and Adobe Illustrator file as well.

Step 1: Open Attached After Effects File

First, open the file you wish to make into a GIF image. Download the file I have attached and choose file “bike.”

After effect file

Press 0 (zero) on keyboard to render the file; you should see bicycle moving.

This is a quick animation, and if you are familiar with After Effects you should be able to make something similar in no time.

Attached file

Step 2: Export the JPG Sequence

When the file is animated and ready to export click File – Export – Add to Render Queue as shown below.

Render queue

Before you render the image, you’ll want to check your settings. Click Best Settings.

Best settings

Make sure you have Best Quality and Full Resolution, if you want the best settings. Leave everything else as is.

Best settings

Click Lossless as shown below. Its right below the Best Settings option we just used.

JPG sequences

For Format dropout choose JPEG Sequence and click OK. This will make multiple JPG images from your AE original file. All the JPEG images combined will make an animation.

JPG sequences

Click the name beside “Output To” and choose a destination.

OUTPUT

Click Render. This will render JPEG Sequences and put them in a folder.

Render

Step 3: Export an Animated GIF

Open Adobe Photoshop and navigate to the folder where your JPEG sequences are located, select the first image in folder and check Image Sequence. By doing so you will create a video file. Click Open.

Image sequence

A new window will pop up; leave 30 frames per second. You can also choose 25 fps, if you have worked using that frame rate.

Frame rate

Click File – Export – Save for Web.

Save for web

You should see window like this.

Save for web

To make a GIF image you should select GIF on right corner.

gif

Select Forever on the bottom. This option will make a loop on your animation so it will never end.

Forever

Click Save and choose a destination.

Previous articles:

Newsletter

8 Comments
  1. Melanie Jul 13, 3:07 pm

    Hi! I would like to learn How to make the gif! Thanks!

    Reply
    0
  2. Peer Jul 22, 2:48 am

    Interesting and good to know that this can be done in after effects, I usually just do it in Photoshop as it has the tools to do animated gifs build in as well.

    Reply
    0
  3. CyBorg Jul 22, 11:43 am

    Yes, i would like to see how you made this in illustrator.

    Reply
    0
  4. pepperstreet Aug 8, 10:30 am

    Wasn’t there a direct GIF export in the past!? I can’t recall it, but I think it was even available in PRE-CreativeSuiteV1-days. Does anyone remember it?

    Reply
    0
  5. Chris Feb 20, 2:22 am

    How do you save an image sequence with a transparent background? I tried a png sequence and I used the transparency button in after effects.

    Reply
    0
    • Christina H Mar 2, 6:37 pm

      Hey Chris, to save an image sequence with a transparent background The output module format: is set to “PNG Sequence” and the Video Output module Channels: is set to “RGB + Alpha”

      Reply
      0

Leave a Reply

*
* Minimum length: 20 characters

Download Web Design Freebies & Resources

psd

Please Confirm Your Email!