When it comes to animating an image to create a GIF, the process is like building a flip book; how the motion looks relies completely on the designer. The timing of the motions, as well as the amount of layers and the way one ties them in with the loop cycle, is a fine art and can be manipulated to fit virtually any purpose or desired effect.
HubSpot has a great tutorial about how to make an animated GIF, but it actually isn’t as hard as it seems. As far as tools go, it’s most common to use Illustrator and Photoshop to animate an image that’s already in vector format, but most other UI design tools do the trick, as well. You can seamlessly transfer layers from one format to another and speed up the production, but they also allow you to have a balance of tightly designed and layered frames without distortion from adjusting the time between those frames. Ultimately, the idea is to create a believable motion which can span anywhere from two to twenty-two frames. It is also possible to create GIFs using free alternatives to the Adobe Creative Suite, but for our example we’re going to show you the GIF making process with Illustrator and Photoshop.
How To Create A GIF
When creating a GIF, having an image and a rough idea of what motion you want to convey a good starting point. With this example, we have opted to use four frames, which is pretty straightforward and gives a bold effect. Here we also started in Illustrator, as it’s the platform most people use to draw out vector images for graphics and logos. (Vector images are great as they adjust in size, which is ideal for responsive web designers working on your website.
As you work, make sure to view the layers individually as the design continues to build. This will help you avoid confusion later on in the process.
Keep in mind that GIFs add an extra bit of color for websites, feel-wise. Sketch out something that is eye-catching and grabs your audience. A good GIF is a great marketing tool.
Once you’ve built up all the layers of your design, go to File>Export>Export As. You are then going to export the file under a Photoshop format (psd) and check to use the Artboards. This coverts the layers of the Illustrator file to a Photoshop file.
For the final export options, most of the options should be tweaked to fit the project and or the use of the GIF. However, make sure to select the Write Layers option or else the GIF will be converted to a flat image.
Now you want to open the Photoshop file of the layered image. Then go to Window>Timeline to pull up the Photoshop Timeline.
Since there are only four images in this GIF, the timeline is fairly simple. Make sure the layers are in descending order (stopping point of motion to starting point).
Then you’re going to click on the little three horizontal bars on the upper right corner of the Timeline Panel at the bottom of the screen. There you are going to select Make Frames From Layers, which makes animation frames from the image layers.
As the layers are converted to frames, the timing at which one frame transitions to another can be adjusted and manipulated. You can also set the animation to run on a continuous loop or not. Make sure to preview the animation during this step to get optimal results. Also note that when selecting all frames, a consistent transition time can be set.
Once the design is finalized, select File>Export>Save for Web (Legacy). In the Save for Web window, you can adjust options such as transparency and image size to fit your requirements.
Selecting Save will open up another window, one last step in the GIF making process. Here just decide on the name of the GIF and where you want to save it.
Then click save one more time, and you’re done! Now your GIF is ready to use!
At DC Dev Shop, we’re dedicated to making you a functional, efficient, and visually appealing website with all the animation and features you want and need. We offer services in web design and web development, helping you to brand and optimize your digital presence through interactive design and specialized web design services. We’ll even make you GIFs and keep it in line with your website style guide ;).