How do loop GIFs work

How to properly save GIFS - and upload them

What Makes a Great GIF?

Before we really start right now, we need to clarify an important question. Is it now called GIF or JIF? The inventor of the GIF, Steve Wilhite, pronounces it JIF. (With a soft J) Most of the internet community calls it GIF. (With a hard G) I'm on the GIF team too, but it's up to you whether you call it GIF or JIF. :-)

What works best for GIFS?
There is a simple rule for doing this. A GIF should be SHORT, SIMPLE and as SMALL as possible. What do you use them for? I also wrote a blog article about 5 ideas for using GIFs.

The longer a GIF, the larger the file will be. Since the GIF is a very compressed format designed for a small file size, I would always recommend keeping a GIF as short as possible. Most GIFS are therefore created as a short loop. That is, the images repeat themselves in an endless loop.

If you try to save a complex 3D graphic with texture and shadow as a GIF, you will probably not be very satisfied with the result. The GIF file format compresses your images so much that it won't look particularly good in the end. So simply drawn images or graphics with few colors work best for GIFS and help you keep the document size small.

Our goal is always Get high quality with a small file size. So it's best to create your animation in a high resolution and then compress it to a GIF with my 3 favorite tools. I usually create my animations in the size 1088 x 1088 for Instagram or 1920 x 1080 for video formats. Since a GIF can be smaller, I compress this size to 800 x 800 or 800 x 600 px.

I present you 3 different ones here
Ways to export a GIF before:

If you like me create your hand-drawn animations with Roughanimator, I would not recommend you to export your GIF directly from the program. Unfortunately, you don't get the best result here and the colors are usually not displayed very nicely.

If you have not yet heard of the Roughanimator app, I can recommend that you sign up for my mini email course Animate with Roughanimator:

In order to create a perfect GIF, it is best to try the following 3 methods:

Method 1: Photoshop

The most professional method is to work directly in Photoshop and create your high-resolution GIF there. First of all, let's count ourselves out of the Roughanimator .mov Video app for this. You can of course also create a .mov video in any other program.

In the next step we save the .mov video on our desktop and upload it directly to Photoshop. You do this by opening up Open file click and select your video there. It may take a while for the video to upload to Photoshop, depending on the size of your document.

As soon as your video is uploaded, you will see your .mov video in the timeline at the bottom. You can now play this directly in Photoshop using the play button.

To export a GIF from it, click on File - Export - Save for Web (Legacy). I use Photoshop CC, if you have an older version of the program you may find this setting directly under File.

The first thing we do now is in the Default - GIF 128 dithering to adjust. Now we are in the menu for the GIF settings. At the bottom of the menu you can find the Image size to adjust. Since I saved the .mov video directly from Roughanimator, 1088x1088 px are preset here. We can now reduce this size to 800x800 px. Immediately the file size changes to a few MBs.

The good thing about Photoshop is that we can control how many here Colors for the GIF can be used. In order to get our document size even smaller, we can, for example, change the colors from 128 to a smaller number. So if you change the GIF to 8 colors, for example, you will see that the file size changes significantly. However, the quality of the GIF is now also suffering. Since we want to avoid this, in most cases it is optimal to stick to 128 colors. But just try out what works best for your animation.

Now we just have to do that Functions for loop playback modify from Once for an unlimited period. Then you can click Save and save the document to your desktop.

Your perfect GIF is ready.

The advantages of Photoshop: Maximum control over the file size & colors of your GIFS. Disadvantage: Photoshop is unfortunately not a free program.

Method 2: The Giphy.com platform

With this variant you use the Online platform Giphy.com to convert your GIF. You can upload your .mov video directly to the platform here. To do this, click on the start page UPLOAD and then BROWSE and import your video. If you now plan to publish your GIF on the platform, you can enter the tags and the source of your document here. You don't have to do that, however, you can also set everything to private and use the platform only for pure conversion into a GIF. When you've finished setting everything you click on Upload GIFS. This can take a while now. If that worked, your animation will automatically play in the browser window.

With some videos, the GIF may not have a particularly high quality and the colors may differ greatly from your animation. Unfortunately you did on Giphy.com no control over the colors and sizes, so unfortunately you cannot control how your GIF will look in the end.

To save your GIF from Giphy on your desktop, click on in the menu below Advanced and you can download your GIF directly to your PC under GIF Download. The advantage of Giphy is that you can create GIFS from your videos quickly and for free. The disadvantage here, however, is the loss of quality.

Method 3: the IMG Play app

I have just discovered the IMG Play app for myself. If you want to create a GIF on your mobile phone quickly without going through the computer, I can really recommend the IMG Play app. The app is super simple. You upload your video directly into the app and it compresses your animation as a GIF. However, you can set the quality in which your GIF should be saved here. You upload your picture and get into edit mode. Here you can make various settings. You can change the direction, adjust the size of your canvas and even change the colors and the background again. You can also control the frame rate here and, for example, change it back to the original 24 frames per second.

When you're done editing, click above Next and you can now save your GIF in the photos from here. You also have the option here Set the GIF size and set the looping options from infinity to 1, 3 or 5.

Unfortunately, the app is only free if you accept the watermark. For this you get high-resolution gifs, in the right frame rate and with great colors.

As you can see, there are different ways to create GIFS and each has advantages and disadvantages. But creating GIFS is fun and the technology shouldn't put you off. If you want, feel free to watch the tutorial video on IG TV.

Question to you:

Which program have you had the best experience with to save GIFS?

Make a note of this post on Pinterest!