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

Once you have done that, click OK. Photoshop 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 you should 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)

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.

Method 2 – Render a movie file in After Effects and export the gif from Photoshop
This second method is a lot easier than method 1, but there is less control on how the gif is exported. I’ll go in detail in this article.

One thing I’d like to mention with this method is that a lot of people, including myself, had problems importing videos in Photoshop because they had this message:  “Could not complete your request because the DynamicLink Media Server is not available”. The solution I found on my side is to check that Photoshop and Adobe Media Encoder are not blocked by a security software. In my case, Comodo was blocking the communication between Photoshop and the Adobe Media Encoder. If you still have the dynamiclink error, I recommend to use method 1 which is to export a sequence of images instead of a rendering movie file.
Let’s get started!

Render your After Effects composition to a Quicktime .mov file

  1. Drag and drop your master composition in the Render Queue window
  2. Click on Best Settings and change the frame rate to 10 or 15
  3. Click on Lossless
    1. On format, choose QuickTime 
    2. Codec should be H.264
    3. Resize your comp to the size you need
    4. Turn off audio

In the Render Queue Window, choose the folder destination

Click Render!

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

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

To create a gif from Premiere, you will need to export your Premiere sequence to a series of images and then use Photoshop.
Follow the steps below

In Premiere

  1. Select the sequence you’d like to export
  2. Click on File > Export > Media
  3. Adobe Media Encoder will open
  4. Select Format PNG
  5. Define your destination path
  6. Expand Export Setting
  7. Change frame rate to 10
  8. Click Export

Now open Photoshop

To import a series 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

Once you click OK, Photoshop will create a layer for each images.
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.

Not everyone has the luxury to have Photoshop or After effects… to make gif animations.
Thankfully, there are awesome websites that allow you to make gifs from your images or videos and they even host them for you. Isn’t that sweet!

Here is my recommended list of websites to make your GIF animations.

Animated GIF file sizes can get heavy very quickly. It is always a good practice to check that your GIFs are optimized so your visitors are not waiting forever to see your animation. It will also help the server bandwidth to not be overwhelmed 🙂

There are a couple hints to optimize your gifs and here is the list you should check before you upload your gif animation online.

  1. Reduce and Crop the Width and Height – The bigger your gif is, the heavier it is. Try to crop and reduce the width and height.
  2. Remove Extra Frames – Open your GIF file in photoshop and check that there are no extra frames or unnecessary frames. Often there are identical  or multiple frames that can be removed or reduced to a single frame.
  3. Reduce the frame rate – If you produced your gif from a software, make sure your re-export your image sequence at a lower frame rate.
  4. Reduce Color – When you “save for web” in Photoshop, sometimes you don’t need 256 colors. Just lower the color- it will help reduce your file size.
  5. Online Tools – There are also really good tools online to help reduce the file size and optimize your GIFs. Try EZGIF.com
  6. Transparency – Depending on your animation, play with the transparency and see if it helps.

Animated gifs are getting old in the sense that there are a lot of restrictions such as colors, file size,  or smooth transparency.  I believe the next generation are going to be animated PNGs or name APNG for Animated Portable Network Graphics, which will have much more colors supporting 24 bit and 8-bit. It will have a very clean alpha channel/transparency and above all a file size that will be much better that GIF. Currently, animated PNGs are not supported by some browsers and can’t be opened in photoshop. Check APNG on wikipedia for more info.

Now the biggest question: Is it pronounced like “jiff” or “guiff”. Sorry folks, it is definitely pronounced like “Jiff”. Many people are going to have to get used to that! Please share this article if you liked it. Thanks!!