Most tutorials nowadays contain many visuals to grab the reader's attention and explain how to better solve different problems. Specifically, I found that GIFs are a very good tool for presenting GUIs. In this article, I will show you how to make animated GIFs that can be used alongside text to create faster and better demos.
Step 1: Download ScreenToVideo
The first step to making animated GIFs is to find the right editing tool. ScreenToVideo is a platform where you can record, edit and export videos to many file formats, including animated GIFs. This is the tool I am going to use in this tutorial.
Just go to screentovideo.com and download the free trial. The installation should be straightforward and takes less than a couple of minutes. Please note that in the free trial version your GIFs will be watermarked.
Step 2: Record your screen
Start recording your screen by clicking on the home button. We will use a small preset of 426 x 240 and add a timer of 3 seconds. After the timer goes off, you can begin your presentation. Don't worry if you clicked on the wrong button, as you can edit the video afterwards.
I recorded a short video of me playing the dinosaur game on Google Chrome that appears automatically when no internet connection is available. It took some time to reach the moment when birds spawn, so I will edit out the less-eventful parts of the video.
Step 3: Cut and Delete Unnecessary Frames
Cutting a video in multiple pieces can be done by right-clicking on the timeline component and choosing the Split (CTRL + T) option from the menu. Alternatively, you can add a freeze-frame (CTRL + F).
Now cut the video once again at the end and delete the unwanted section.
Step 4: Add Text to Your GIF
When you make a GIF to enhance a tutorial, adding text can help the viewer follow what's going on. I added a dashed speech balloon pointing to the little dinosaur that shows the instructions for the game.
Step 5: Add a Sketch Animation
Sketch animations are a good way to focus the user's attention on the most important areas. I used an arrow at the end of the GIF.
Step 6: Export Your GIF
Finally, we can export our first GIF. A balance between frame rate and file size should be found. For our purposes, the default options should be enough.
Now, let's take a look at the final product:
Congratulations! You should now be able start creating your own animated GIFs for short tutorials. Keep in mind that you can use ScreenToVideo for longer videos that include animations, interactivity and much more. I hope you enjoyed this short demo! Please share your thoughts (and your own GIFs) in the comments.
This article was first published on dev.to