How to make your own GIFs?

FlippingBook Online Advanced or higher allows you to add GIFs to all flipbooks you create with it. The same is true for FlippingBook Publisher Business. Sometimes we get requests from clients who needed assistance in creating GIFs. While the feature is intended to add existing GIFs, we’re happy to share some tips on how you can create a new one from scratch.

A word of warning

Creating professional animations is not easy. When it comes to regular images, everyone can take a screenshot or a picture with their phone. Quality may vary, but at least you have something quickly.

Animations are different. There are lots of tools to create animations, but making complex professional animations is firmly in the realm of professional designers. These tools generally require specialist knowledge and have a steep learning curve. Therefore, we would suggest consulting with your designer first if you have one at hand.

With that being said, let’s get started on:

Understanding what an animated GIF is
How to make animated icons and borders
How to make 360-degree animations
How to make simple data chart animations
How to turn whatever happens on your screen into a GIF 🔥
How to convert a video to a GIF
How to find GIFs on Google if all else fails

Understanding what an animated GIF is

If you want to make your own GIFs, then you'll need to have a bit of understanding of what a GIF actually is. An animated GIF is essentially a series of images shown one after the other with a short delay. You could compare it to an old-fashioned movie reel. Every individual image is called a frame. So a GIF that plays for 4 seconds and uses 5 frames per second would consist of 20 different frames (i.e. 20 images).

Now 5 frames per second don’t result in high-quality animations! Good old cable TV uses 24-25 frames per second. To get an illusion of fluidity, you need at least 10 frames per second. If you want to make a 1-minute video, then that would require 600 frames. Now keep in mind that a single 800x600 full-color frame easily weighs 250KB. 600 frames x 250 KB results in 150 MB for a 1-minute video. And it’s not that much as 800x600 resolution is considered a bare minimum quality for a video these days.

Real video formats like mp4 use lots of smart compression techniques. In most animations the differences between one frame and the next are small. So it records only the difference between frames. But in GIFs pretty much every frame is stored in its entirety. What’s more, there’s no sound, and the color palette only has 256 colors, which isn’t enough for subtle transitions!

So GIFs are absolutely no substitute for regular video. What are they useful for then? Well, fortunately, the size of a GIF goes down quickly if:

The image area is smaller
If the images are less complex
If the duration is short.

GIFs also have some unique advantages over regular video. They don’t need a ‘video player’ to control start/stop and they can use a transparent background. The latter allows you to place them over other content without completely obscuring it. Finally, they can be looped indefinitely.

That makes GIFs ideal for short animations, especially for things like icons, borders, text animation, or even graphs. But how to make them if you don’t have them already?

How to make simple animations

If all you need is a simple animation then you can do that the hard way: one frame at a time. Actually, that’s not as bad as it sounds at first! For example, the animations below took just a few minutes each to create from scratch. Some skills with image editing were enough.

A simple cadre to highlight a text block	A simple arrow to attract attention

How to create such animations? First, you need some image editing software. We used Paint.Net here which is a free, high-quality image editor for Windows. It is rich in features yet still user-friendly enough that non-professional designers can learn how to use it without taking a 21-day course. Patina is a good alternative if you’re a Mac user.

Now let’s get started! We'll show how we created the animated arrow.

Create the first frame
First, we create a new image (File > New) and set the size. We made it 120x60 pixels. The first step after that is to delete the white background because we want it to be transparent. This way we can put it on top of other content in our flipbook. So select everything (Edit > Select All) and press delete. The background now changes to a checkered pattern. This may look a bit queer, but it is the standard way for image-editing software to denote ‘Nothing here at all’.

Now, we want to create our arrow. Select the Shapes Tool and change it to the Chevron arrow. Then and draw it.

Next, we change the primary color to Red, which we want to use as the fill color. So we click on the paint bucket and then inside the arrow to fill it.

The first frame is done! Save it as frame-1.png
Now up to the second frame. Simply save the image again, using File > Save As... but change the filename to frame-2. Now use the Rectangle select tool to select the left-hand part of the image.

Change to the Move Selected pixels tool, and now simply press the right-arrow key on your keyboard twice, to move your selection 2 pixels to the right.

In our example, we moved it by 2 pixels, but if you prefer an even more fluent transition, keep to 1. Save the picture.
Create the third frame: this is even simpler: Paint.Net is still in ‘Move selected Pixels mode’ so you simply push the arrow key 2 more times, to move your selection two more pixels to the right and Save as frame-3
Repeat the steps above until you have created 10 frames. Once you get the hang of it, you’ll see that creating the next frame takes just a couple of seconds.

So, the frames are ready. Now we need to combine them into a single GIF.

Combine several images into a GIF

We now want to combine all our individual frames into a GIF. To do that, we will use an online tool EZGif. There are lots of similar services to choose from but we like EZGif the best. It has lots of options and a pretty good interface. As a free service it relies on ads, but it is acceptable.

Press Choose Files
Go to the folder on your computer where you saved your images. Select the first image, keep the Shift key pressed, and select the last one. In our example, these would be frame-1.png and frame-10.png respectively. This will also select all the images in between.
Press OK and Upload and make a GIF
You’ll now see thumbnails of all your frames. You can specify for how long the frame should be shown by adjusting the Delay time. The numbers you see there are measured in milliseconds and 1 means 1/100 of a second. We want our animation to go a bit faster than the default value of 20, so we change it to 15. Type this value, don’t use the arrows, otherwise, the value will not be applied!
We also enable the don’t stack frames option.
Now press the Make a GIF button and you’ll see a preview of your GIF.
As you can see when you look at the preview, the arrow moves but it only moves forward. To make it go back as well, scroll down a bit and choose Effects.

In the Animation flow section, choose run to the end and reverse back to the start and press the Apply selected button. As you can see, there are lots of other options to explore as well.
If you’re happy with the result, press the Save icon and you are now ready to insert your home-made GIF into your flipbooks! Our GIF is a tiny 4.2 KB animation.

Our animated border was created in a similar way. We simply created 7 identical images and recolored them with a progressively brighter shade of red each time.

How to make a 360 degrees animation

If you have pictures of a product from various angles, then you can easily stitch them together in a GIF animation too. For example, take a look at the 8 pictures below. It would definitely make sense to show all of them, but space on your page is limited.

In such cases, you can also combine them into a single GIF. We used EZGif again to combine images into a GIF and this time set the delay for a full second. The resulting GIF weighs only 84 KB, which will load pretty much instantaneously.

In our case, we had 8 pictures, at 45-degree angles. If you have more pictures then you could decrease the delay for a smoother animation. And you don't necessarily have to restrict yourself to a single product. Combining several images into a single GIF is also a great way to create ads. The transitions take less space and attract more attention!

How to make simple chart animations

Even without the help of a professional designer, you can make basic animated charts with the help of Google’s Data GIF Maker. It is limited in what it does, but as said, making professional animations is a designer’s job - there’s only so much you can achieve without them.

The Data GIF Maker lets you choose from 3 different animations. It allows you to enter data for 4 terms with a single value each. If that’s enough for your purposes, it creates really nice animations with minimal effort.

How to turn whatever happens on your screen into a GIF

Some programs allow you to create neat animations, but don’t offer the option to save them as GIFS! Google Slides, for example, can create various animations to objects and text with just a few clicks. Here we just typed ‘Let’s get started’ and right-clicked to set an animation to zoom in. With a little bit of work, we managed to turn that into the following GIF.

It has several other animations types but that’s not the point right now. And we’re also not just talking about Google Slides, which we use as an example because it’s free and relatively well known - PowerPoint and lots of other programs can do similar things. The point is that anything that happens on your screen can be turned into a GIF, and here we show you how.

So to get back to our example, we

created a new Google Slide;
typed ‘Let’s get started’ and set the font to Impact;
right-clicked and chose Animate,
and changed the Object animation to Zoom in.

When we press Play, the text animation starts and it zooms in just as we would like to add it to our flipbook.

So how to achieve that?

First, you’ll need a screen recorder. Again, there are lots of options. For Windows, ScreenToGif is probably the easiest solution we found. But in this article, we use ShareX as it is supported on other platforms than Windows too.

In ShareX, you Choose Capture > Screen recording (GIF). Now we select the text area for ShareX to capture. Since our text flies in from afar, we select not just the text itself but also a part above it, so we record the full animation.

It starts recording almost immediately but don’t worry about that. We will cut off excess later. Now press the yellow Play button in Google slides to start the text animation. When it’s finished, press the Stop button below the recording area in ShareX.

We now have our base GIF ready!

In the first few seconds, the text is still visible, revealing the time when we were looking for the Play button in Google Slides. After that, we see the transition in Google slides, when it switches from Edit mode to Play mode. We don’t want that in our GIF! No worries, We can get rid of that in EZgif.

So we go EZGif, upload the GIF that we just captured with ShareX, and we see all the frames. And here we see that the actual animation that we want starts at frame number 20.

So we scroll down again until we see the option Toggle a range of frames. Here we select 1 to 19 and press Skip and then Make a GIF! After a few seconds, the preview shows up and we’re ready to save and insert the GIF to our Flipbook!

Pro tip: Our GIF currently has a white background, which is fine if you insert it on a page in your flipbook that’s white as well. But if your page has another color, then it won’t look so impressive. In that case, better to set White to the transparent color in EZgif. You can do that in the Effects section.

How to convert videos to GIFs

As we mentioned in the introduction, GIF is a poor solution for real video in general. But if you have no real alternative because your animation is in mp4 format, and uploading it to youtube is no option then you could consider converting it to GIF. Especially if the video is short, has no sound, and loss of quality is not much of a problem.

An ideal example is this video:

The original video as mp4	The converted video as a GIF

The original MP4 file is 3.3 MB. The GIF version you see above is 5.8 MB. Both the quality and the size are excellent for a GIF. For most videos, you should expect worse quality at a bigger size. What makes this video so well suited for converting it to GIF is the relatively simple imagery: clearly defined objects and a very limited color palette.
So how do you create this GIF?

Go to the video-to-GIF page on EZGif .
Press the Choose file button and select your local video file. You can also use a video that is already uploaded online. Simply copy its URL. Then press the Upload Video button.
Change the End time and press Convert to GIF. Note that the frame rate and allowed time are connected - higher quality means a higher frame rate. The higher they are, the shorter the video can be.
Press Convert to GIF!
After a few seconds, you’ll see a preview of your GIF. But note that the size is 10.3 MB, not the 5.8 MB that we promised.
To reduce the size press the optime the GIF link
On the next screen, just use the recommended settings and press Optimize GIF. After it’s optimized, you can press the Save button and insert your GIF in your flipbook.

How to find them on Google Search if all else fails

If creating your own GIFS feels like it’s beyond you, then Google is your friend. Google can be used to find down anything, including GIFs. Search as usual on Google and then click Images. To track down GIFs, in particular, go to Tools, then go into the "Type" dropdown and select "GIF." You’ll now see a page full of GIFs to pick through. Not 100% of the results are animated, but most are so you can find a few gems. Beware about copyright though!We hope that we have given you some useful tips on how you can make GIFs, as well as some inspiration on how you can use them in business documents. Good luck creating your own GIFs!
Related articles

Was this article helpful? Yes No