7 Tips for Creating GIFs
At InVision, GIF animations are used not only for pampering – they play an important role in terms of marketing and training. Therefore, we even tried to use them on our main page instead of animations made using code.
In the end, people started asking us: “How do you create GIF animations?” It’s time to reveal the secret.
GIF Image Design
1. Secret ingredient
Here’s my little secret: all of my GIF animations were video files at first. I usually use ScreenFlow, which by the way I also use to create videos of our products. This is a simple program that at the same time contains many useful animation tools.
After I save the animation as a video file, I import it into Photoshop via File> Import> Video Frames As Layers.
Tip: If you cannot afford ScreenFlow or After Effects, create an animation in Keynote and export it as a video. Finally, at least some use of this feature in Keynote.
2. Less colors = more fun
If you want to make cool GIF animations, you need to approach the choice of color with special trepidation. This will affect not only the file size, but also allow you to create longer animations with a small file size. (For me, small is less than 1MB)
3. Use motion blur if possible
Programs like ScreenFlow and After Effects allow you to export video using motion blur. This will not only give your animation a professional look, but also simplify the process of reducing the file size in Photoshop.
4. Be (partly) lazy
Imagine what other elements I could add to the GIF animation at the beginning of this post. Small tooltips with usernames, cursor clicking on the plus button and so on. People don’t need to see all this in order to get a general understanding of what they saw, so only show what you need – you are limited in time and file size.
Export GIF animations
Before you start to worry about the tips below, try exporting your GIF animation. If it is an acceptable size, great job! Continue in the same spirit. Otherwise, try the following methods.
5. Delete duplicate frames
Most likely your animation stops or remains motionless at some point in time. Looking closely, you can notice that this moment consists of several identical frames with a duration of 0.03 seconds. If there are 10 such frames, delete 9 of them and set the remaining frame duration to, for example, 1 second.
If this does not help, try importing the video again, but this time select the Limit To Every 2 Frames option. This should significantly reduce the file size.
Tip: This is a simple and quick rule, but if your animation consists of more than 150 frames, it will be difficult to keep the file size to a minimum.
6. Fewer colors
When you save the GIF animation in Photoshop, you will see a drop-down menu next to the “Colors” parameter. Experiment with the values, try as few colors as possible, which will not turn the entire file into garbage.
7. Change the Lossy * parameter (loss)
To be honest, I don’t even know what this parameter means. But I know for sure that if you put it at a level between 1 and 10, then get rid of extra kilobytes without losing quality.
(“Lossy” – the acceptable level of loss of graphic information in a raster file, which allows to reduce the file size of the image)
Nothing changed! Help!
If you tried everything that was said above, but could not reduce the size of the GIF animation, then you need to take a step back. Maybe you want the impossible? Is there any other way to achieve what I want? Is it possible to split a file into two GIF animations? It would be better if your GIF animation focuses on one aspect.
Bonus video: super fast creation
Choose a part: Download the video file from which I made animated GIFs for this article! (You will need Screenflow 5 to open it.)
Tip: Use GIFs in your prototypes to create stunning transitions.