Gif Animations have been around for a long time now (probably since the beginning of the web as we know it, from what I can remember!) Animated gifs are getting even more popular now that everybody is on social media and we are getting use to funny animated content.

But how do you make an animated gif? Well, there are multiple ways to make a gif! I will show the professional way, for those who have the adobe software and a free easy route if you don’t have the bells and whistles. By the end of this blog, you should be able to export and optimize a gif animation by yourself and use it for your projects.

Click below to expand and follow the steps!

What is an animated GIF?
An animated gif is essentially a sequence of multiple images compiled in one single gif file.

How to make a animated GIF?
There are 4 ways to create, export and make an animated gif:

What is the frame rate per second / FPS for an animated gif?
Unlike video, there is no current standard FPS(frame per second) for animated gifs or a constant frame rate.
On photoshop, you can show as fast as 0.01 frame per second, and as slow as 1 frame per 240 seconds.

But 1 frame per second is optimal. In the end, it really depends on your animation. Keep in mind that the more frames you have, the higher the file size of your GIF, the more delay for the user to see your animation.

Exporting your animated gif in photoshop is very simple.

Here are the steps I usually use to export an animated GIF from Photoshop.

Assuming you already have a series of images ready in a folder:

To import a series of images in photoshop click on File > Scripts > Load Files Into Stack…

photoshop Load Files Into Stack

Click on Browse, and select all the images you need for your GIF

Click OK oncePhotoshop will create a layer for each image.
Click on Windows > Timeline

Click on the Create Video Timeline button

Now we need to add all the layers to the photoshop timeline,
Click on the timeline menu icon
Select Make Frames from Layers.
Now should you see all the image frames appear in the timeline. The only issue is that the frames are backwards. To reverse the frame order,
Click on the photoshop timeline menu icon again 
Select Reverse Frames
By default, photoshop adds 5 seconds to one frame. Just click on the down arrow and change it to the time you need (Watch demo below)

Preview of our animated gif below

Now we are ready to export our animation from Photoshop to a single animated gif file.

Open the Save for Web window and on your keyboard press:
Windows: ctrl + alt + shift + s
Mac: cmd + opt + shift + s

To make your animated gif loop and play indefinitely, don’t forget to select Forever on the “save for web” window.

If you would like to practice making an animated gif in photoshop, download here the bird images sequence.
or download the photoshop file here with all the images sequence already imported.

Yes it’s true! Photoshop can now import your video files and export them to an animated gif file!

Actually, to be more accurate, Photoshop 2017 can actually import a bunch of different kinds of video formats such as:

  • .264
  • .3Gp
  • .3GPP
  • .AVC
  • .AVI
  • .F4V
  • FLV
  • .M4V
  • .MOV
  • .MP4
  • .MPE
  • .MPEG
  • .MPG
  • MTS
  • .MXF
  • .R3D
  • .TS
  • .VOB
  • .VM
  • .WMV

Assuming you have your video file ready in a folder,
Start Photoshop and go to File > Open and choose your video file.
Once your file is open click on File > Export > Save for Web (Legacy)…

save for web animated gif from video

If you don’t have Photoshop, you can always upload your video on a popular website such as Giphy or EZGIF

Method 1 – Export a sequence of images.
This is the method I always use from After Effects. It is a bit tedious, but it always works 100% and you will have much more control over your animated GIF.

Render your After Effects composition in Image sequence.
Drag and drop your master composition in the Render Queue window

Step 2:  Edit and Setup Render Queue Settings
In the Render Queue Window, Click On Best Settings blue link
In the frame rate area, check use this frame rate
Change the number to 10 (if you need your gif animation super smooth, then increase the number)

In the Render Queue Window, Click on Lossless
Change Format to PNG Sequence
If you need your animated gif to have a transparent background: Next to Channels select RGB+Alpha
Also, your  AE composition might be too big for a GIF. Check resize and edit the width and height.

In the Render Queue Window, choose the folder location where you’d like to put the image sequence.

Click Render!

Now Open Photoshop

To import a series of images in photoshop click on File > Scripts > Load Files Into Stack…

photoshop Load Files Into Stack

Click on Browse, and select all the images you need for your GIF