|
How To Make Animated GIFs Online
This is a tutorial on how to use two different free websites for crafting animated gifs.
With recent technological advancements online, you no longer need to spend money on fancy softwares to craft gifs and other photo editing.
This tutorial involves two websites. EzGIF and Photopea.
First, let's take a look at a EzGIF (click to see the site)
EzGIF is simple to use, though it has it's flaws. These shortcomings will reveal why I also suggest using Photopea to better edit your work.
To start, let's head over to the Video to GIF converter tab.
NOTE: Do NOT paste Youtube or Twitter URL links into the second box. It will not read a URL unless it ends with a file extension (.mp4, .avi, etc)
To begin this demonstration, I have uploaded a short video that is only 8 seconds long.
EzGIF will not read video files that are over 100MB. For longer videos, it breaks down time counted by seconds, rather than minutes-per-second. If this is confusing to you, then you can pause the video at clips you want and use the current position button to timestamp it.
The reason my video is so short is because 10 seconds is your max limit for higher frames.
For the best quality in GIFs, the higher the frame rate. This is very important if you want smooth framerate for reasons I am about to show.
With higher framerate, the file size is larger. Bear this in mind and try to avoid giant file size gifs. When they are over 8 MB, it will slow things down.
The framerate here is important. As for the size, it don't really matter if you are going to use Photopea to resize it, but you have options there.
When the framerate is lower, that leads to choppy animations.
For my demonstration, I have set the FPS to 20 frames. Let's see the result.
As you can see from what I have circled, this is a giant file size.
We don't want that, so what's the solution? EZGif tells us we can optimize the GIF.
There are several ways to reduce the file size though. One of the easiest ways is to make it smaller.
On the optimization tab, you have several options but for this tutorial, I am going to ignore them. They are your choice to mess around with. But as I said, resizing the image by 50% lower, is a good solution. We'll be happy to see that the other editor site has this feature built in.
Now that I have saved my gif, let's head to Photopea (click to go)
If you've ever used Adobe Photoshop and Image Ready, you might feel that this site already looks quite familiar to you.
Photopea is an opensource photoshop based software that is entirely free online. You don't need to spend money on fancy programs when this site does everything that an Adobe program does for free.
Before I drag the file I made on EZGIF, I am first going to open the original MP4 video file by dragging it in the box.
Right off from the start, Photopea is asking us to set the frames-per-second on the video.
For my demonstration, I set them at 20.0. Remember though; the higher the FPS, the higher the quality but also the bigger the file size. This means that you shouldn't go for a ridiculously high number like 30 or higher.
NOTE: If you are running on a PC with an integrated graphics card and/or under 8 gigs of RAM, this website might slow down for you. It is not the website's fault. it is your computer. Photopea eats up a lot of memory as it processes big files.
So after loading my video and converting it in Photopea, you will notice this box on the right hand corner.
If you've used Adobe Photoshop, you will recognize this box instantly.
Because a video has to be converted into frames to make an animation, that is what you see on the layers.
If you want to edit the color or anything else of an animated gif, you must select ALL the layers before using any other tools.
It is entirely possible to edit the colors, change black/white or even filter an animation through Photopea. But again, you need to select all frames. You also have to bear in mind the technical limitations of a standard PC (your computer will slow down as it processes filters and other editing).
For the sake of this tutorial, I am simply going to show optimization when trying to save a GIF in Photopea.
Click the 'File' button on the upper left hand corner. Options will drop down and then go to 'Export as', and click the GIF option.
If the file is over 10 MB, Photopea will automatically make this pop up
This is good! You can automatically scale it down from Photopea's built in control itself!
Lets click OK! (Your computer might slow down here as it processes the animation. DO NOT close the tab, give it time)
As you can see in this screenshot, Photopea has successfully reduced my GIF by 50%. The file sizeis down to 5.7 MB which is great.
You're probably wondering what some of these controls are on the optimization.
This little chainlink thing determines the aspect ratio of a GIF. It can be checked or unchecked simply by clicking it.
With the aspect ratio enabled, any time you change the width or height, the other option will automatically change based on the ratio alone.
I believe the other options explain themselves. As for editing animated gifs in Photopea, there are all kinds of options and ways you can edit them in the same way Photoshop can edit pictures.
Here is the animated GIF I made.
I hope this tutorial is useful for everyone! Have fun!
|
