Have you ever been perusing the internet and come across MOVING images? I don’t mean videos being played on YouTube, but actual moving images. The answer is yes, whether you knew what you were looking at or not. These wizardly files I am talking about are called GIFs. GIF is an acronym for a file type created for use on the internet that stands for Graphics Interchange Format, but that is where my technical knowledge of them ends. What I DO know, however, is how to make them. That process is what I will be explaining in this post.
Sparksight recently decided to update our website, and I thought, “What better way to spend some down time than designing a few GIFs to give a little bit of pizazz to our homepage?” I spoke to Sharon, one of our incredible designers, and got the downlow on what we would need. Basically, she told me the dimensions of the buttons and to keep the file size as small as possible. Easy!
Step 1: Sketching and Storyboarding
So how do you actually make one of these things? As with most of our animation projects here at Sparksight, I started with some quick sketches for what I had in mind. The GIFs I wanted to create were going to be animations that looped continuously when you hovered over a button for each of our portfolio sections (Video Production, Creative Design, and Event Design). With that in mind, I came up with a few icon ideas for each and worked on how I could seamlessly transition from one shape to the next. I knew that the animation would only be around 3 seconds long, so I didn’t really need much in the way of storyboards. This was primarily an exercise to get me warmed up and find some natural motion in the graphics I came up with.
Step 2: Designing in Illustrator
I jumped into Adobe Illustrator and began designing some of the assets I would use in my animation. I LOVE Illustrator. It is by far my favorite Adobe product to work in, and it integrates into After Effects flawlessly. This is crucial when doing any sort of complex animation. Knowing a lot of the morphing of shapes would be handled natively in After Effects, I only created the most complex shapes I would need in Illustrator. I could write whole posts on the tools I use most frequently in Illustrator, and at some point I might, but for now let’s just say I created these graphics and leave it at that.
Step 3: Animating and Exporting from After Effects
I imported my Illustrator files into After Effects and started animating. The native shape and mask tools in After Effects allow a ton of flexibility in animation, but they are not the most wieldy tools to design with. Creating my in between shapes and getting the loops as smooth as I liked caused a bit of frustration, but I eventually got these to something I was happy with. After Effects used to allow you to export GIFs directly, but somewhere along the line they took this feature out and made it a more complicated process. But don’t fear! All you need to do is export a video and take it into Photoshop. Make sure to export as a format that allows the use of an alpha channel, otherwise you lose the ability to have transparency in your GIF. I exported mine as a Quicktime movie using the Animation codec. This allows you to render the RGB and Alpha channels simultaneously, which is exactly what you will want to do!
Step 4: Saving from Photoshop
To actually turn this Quicktime file into a GIF we need to use yet another Adobe product, Photoshop. Open Photoshop and bring in your Quicktime movie. It will open Photoshop’s animation toolset, which I think most people are unaware exists. Unfortunately, we won’t be using any of its cool features this time around. Leave your movie untouched in the timeline and choose File > Save for Web. There are quite a few settings in the window that comes up, but you can ignore most of them. The big things you will want to address are transparency, looping options, and colors. Transparency is usually checked on by default, but make sure your settings are what you need. You can also set your GIF to play through once or loop continuously. There are uses for both, but I generally find that looping forever is the way to go. No one wants to have to refresh your page to watch 3 seconds of animation over and over. Colors are the big one here, because they can greatly affect your file size. For something as small as the icons I created, 256 colors is just overkill. I cranked mine down to 32 and was still very pleased with the result. You may be asking yourself, “These things only use 3 colors, why do you need anymore than that?” It is a good question, but the way Photoshop rasterizes our images actually puts hundreds of colors on screen at once. Lowering the colors too far will just result in a crummy looking GIF. You can see some examples below. The 32 and the 256 really don’t look very different, but the 32 is much smaller in file size, which is what you are looking for to put up on your website
And there you have it! Create animated GIFs to use however you see fit! GIFs are a great way to add a bit of interest or easter eggs to a website, but be careful. They can become distracting pretty quickly, as well as slow down your site’s performance. Take a look at what I put together below!
