Gif Animations have been around for a long time at present (probably since the showtime of the spider web every bit nosotros know it, from what I can retrieve!) Blithe gifs are getting even more pop now that everybody is on social media and nosotros are getting use to funny animated content.

Only how practice you export an blithe gif? Well, there are multiple means to brand a gif! I volition show the professional person way, for those who have the adobe software and a free like shooting fish in a barrel route if you don't take the bells and whistles. By the end of this blog, you should be able to consign 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 brand an animated gif:

  • From Professional software
    • Adobe Photoshop
    • Adobe Afterwards Furnishings
    • Adobe Premiere Pro
    • Adobe Media Encoder
  • From complimentary software
    • Like shooting fish in a barrel Gif Animator
    • Complimentary Gif Maker
    • Falco Gif Animator
    • Breathing Gif
  • From Online Apps / Websites:
    • imgflip
    • giphy
    • makeagif
    • gifmaker
    • gifcreator
    • ezgif
    • imgur.com
  • From Mobile Apps
    • Gifx
    • Giphy Cam
    • Gifs Fine art

What is the frame rate per second / FPS for an blithe gif?
Unlike video, there is no electric current standard FPS(frame per second) for animated gifs or a constant frame rate.
On photoshop, you tin show equally fast equally 0.01 frame per 2nd, and as tedious as i frame per 240 seconds.

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

Exporting your blithe gif in photoshop is very elementary.

Here are the steps I ordinarily use to consign an blithe GIF from Photoshop.

Bold you already have a serial of images ready in a folder:

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

photoshop Load Files Into Stack

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

Click OK one time.Photoshop will create a layer for each epitome.
Click on Windows > Timeline

Click on theCreate Video Timeline button

Now nosotros demand to add all the layers to the photoshop timeline,
Click on the timeline menu icon
Select Brand Frames from Layers.
Now should yous come across all the image frames appear in the timeline. The only outcome is that the frames are backwards. To reverse the frame social club,
Click on the photoshop timeline menu icon again
Select Opposite Frames
By default, photoshop adds 5 seconds to 1 frame. Just click on the down arrow and change it to the time you demand (Spotter demo below)

Preview of our animated gif below

Now we are set up to consign 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 + southward

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

If y'all 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'south truthful! Photoshop tin can now import your video files and export them to an animated gif file!

Actually, to be more accurate, Photoshop 2017 can really import a bunch of dissimilar kinds of video formats such every bit:

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

Bold you accept your video file set up in a folder,
Get-go Photoshop and go to File > Open and cull your video file.
One time your file is open up click on File > Export > Salve for Spider 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 ane – Consign a sequence of images.
This is the method I always utilize from Later on Effects. It is a chip tedious, but it always works 100% and y'all will have much more control over your animated GIF.

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

Step ii: Edit and Setup Return 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 increment the number)

In the Render Queue Window, Click on Lossless
Alter Format to PNG Sequence
If you need your animated gif to have a transparent background: Side by side to Channels select RGB+Blastoff
As well, your  AE composition might be as well big for a GIF. Cheque resize and edit the width and height.

In the Return Queue Window, choose the binder location where you'd like to put the image sequence.

Click Render!

Now Open up Photoshop

To import a serial of images in photoshop click onFile > Scripts > Load Files Into Stack…

photoshop Load Files Into Stack

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

In one case you accept done that, click OK.Photoshop will create a layer for each image.
Click on Windows > Timeline

Click on theCreate Video Timeline button

Now we demand to add together all the layers to the photoshop timeline,
Click on the timeline menu icon
Select Brand Frames from Layers.
Now you should run into all the image frames appear in the timeline. The merely outcome 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. Only click on the "down arrow" and change it to the fourth dimension you lot need (Lookout demo below)

Now we are ready to consign our blitheness from Photoshop to a single blithe gif file.

Open the Save for Web window and on your keyboard printing:
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 salvage for web window.

Method 2 – Render a movie file in Afterward Effects and export the gif from Photoshop
This second method is a lot easier than method i, merely there is less command on how the gif is exported. I'll go in detail in this article.

1 thing I'd similar to mention with this method is that a lot of people, including myself, had issues importing videos in Photoshop considering they had this message:"Could non consummate your request considering the DynamicLink Media Server is not available". The solution I found on my side is to check that Photoshop and Adobe Media Encoder are non blocked by a security software. In my example, Comodo was blocking the communication between Photoshop and the Adobe Media Encoder. If you all the same have the dynamiclink error, I recommend to utilise method 1 which is to export a sequence of images instead of a rendering movie file.
Allow's become started!

Render your Afterward Effects composition to a Quicktime .mov file

  1. Drag and drop your main composition in the Return Queue window
  2. Click onBest Settings and change the frame rate to 10 or fifteen
  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, cull the folder destination

Click Render!

Start Photoshop and go to File > Open and choose your video file.
Once your file is open up click on File > Export > Save for Spider web (Legacy)…

save for web animated gif from video

Also if you don't have Photoshop, you tin 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 serial of images and then use Photoshop.
Follow the steps beneath

In Premiere

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

At present open Photoshop

To import a series images in photoshop, click onFile > Scripts > Load Files Into Stack…

photoshop Load Files Into Stack

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

Once y'all click OK, Photoshop will create a layer for each images.
Click on Windows > Timeline

Click on theCreate Video Timeline button

At present we demand to add all the layers to the photoshop timeline,
Click on the timeline carte icon
Select Brand Frames from Layers.
Now should you run into all the epitome frames appear in the timeline. The only effect is that the frames are backwards. To opposite 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 downwardly arrow and change it to the time you demand (Watch demo beneath)

Preview of our animated gif below

Now we are set to export our animation from Photoshop to a single blithe gif file.

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

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

If you would similar to do making an blithe gif in photoshop, download here the bird images sequence.
or download the photoshop file hither with all the images sequence already imported.

Not anybody has the luxury to take Photoshop or After effects… to make gif animations.
Thankfully, there are awesome websites that allow y'all to brand gifs from your images or videos and they even host them for yous. Isn't that sweet!

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

  • Giphy
  • Imgur
  • EZGIF
  • Gifyu

Animated GIF file sizes can get heavy very quickly. Information technology is ever a adept do to check that your GIFs are optimized and so your visitors are not waiting forever to encounter your animation. Information technology will besides help the server bandwidth to not be overwhelmed 🙂

There are a couple hints to optimize your gifs and here is the list you lot should cheque before you upload your gif blitheness 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 meridian.
  2. Remove Extra Frames – Open your GIF file in photoshop and check that there are no actress frames or unnecessary frames. Oft 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 actually skilful tools online to assistance reduce the file size and optimize your GIFs. Attempt EZGIF.com
  6. Transparency – Depending on your animation, play with the transparency and see if information technology helps.

Animated gifs are getting old in the sense that in that location 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 Blithe Portable Network Graphics, which will have much more than colors supporting 24 scrap and viii-flake. It will have a very clean blastoff channel/transparency and above all a file size that will exist much better that GIF. Currently, blithe PNGs are not supported by some browsers and can't exist 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 accept to get used to that! Please share this article if you liked information technology. Thanks!!