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.

Impress your audience with animated websites and web presentations.

With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.

Create a Website

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:

Marta Berzina

Graphic designer from Latvia with passion for design and nature. You can see my work on Behance, Dribbble and Instagram.

Posts by Marta Berzina

Animated Presentations Made Easy

Learn more All Products
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree