Design 101: Designing Product GIFs

There’s an interesting trend going on in the design world. This trend showcases a company’s product in GIF form. It’s nice because the user doesn’t have to click on a play button to view it, and it’s pretty much like viewing a video without sound. So, how do you create these yourself? In this article, I’ll show you how I created a few GIFS for INRVU here.

Getting Started

Showcasing a product can be done a couple of ways. You can either record a screencast, throw it in Photoshop, and export it as a GIF, or you can build your own from scratch. The vector GIF might look better than the screencast GIF though because of how GIFs work. There’s a limited amount of colors it can handle — 256 to be exact.

Making sure you design with the least amount of colors possible will increase the output quality of your GIFs. According to Andy Orsow at invisionapp blog, he mentions “If you want amazing GIFs, you need to be really selective about your use of color. Not only will it play a huge part in your file size, but using less color lets you make longer, more involved GIFs that are still relatively small in size.” Keep it simple. You don’t need to count, but the GIF quality will be great as long as it contains 256 colors or less.

To start building your vector GIF from scratch, make sure to create all vector elements in your preferred design program. It might be easier to keep your artboard size set to the desired screen size of your GIF so you can export GIF elements in the exact size they will appear. When you’re exporting GIF elements, make sure to crop them with the least amount of space around them and as a transparent background PNG for full quality.

If you’re working in Adobe Illustrator, make sure you export at 72 dpi so it will retain the same dimensions. If you export at 300dpi or if you create elements that are bigger than they should be, you’ll have to manually scale them down in After Effects. When saving these images, make sure they’re all in one folder and that you don’t move the folder location since After Effects uses file paths in compositions.

Designing in After Effects

Once you’ve created all of your elements for your product GIF, create a new composition and set it to the desired size of your GIF. Start creating your GIF as you’d like it to appear. It’s important to create a cursor to display movement and clicks. I like to do this with a simple circle with lowered transparency. To create a click, you can animate the circle to shrink to a smaller size and return to the original size. Use After Effects to simulate the product in the way it actually happens while making sure each animation is interesting. In my INRVU GIF, I made each screen fade away after each click. Also, when I simulated copying a link, I made a transparent blue rectangle appear behind the text block in the Illustrated browser window I made to make it look like it was actually being highlighted and copied (see GIF to the left). When finished, you can export the file as the default export (.mov). If you need a transparent background, set the Video Output Channel to “RGB + Alpha” in the Output Module settings. For more information on alpha channels, click here. Now, you’ll need to take it to Photoshop.

Photoshop Export

Photoshop is great because it can take any movie file and transform it into a GIF. First, open Photoshop. You don’t have to create a new document, you can just click the icon that looks like a film strip in the bottom left corner under the Timeline panel and choose “Add Media” from the dropdown menu (see photo to left). Find and select your movie file you exported from After Effects, click “Open.” Now, all you have to do is click File > “Save for Web…” from the dropdown menu. From here you’ll have to adjust some settings. In the “Save for Web” menu settings, select GIF. For information on which settings to choose, view this article here.

In conclusion, creating vector product GIFs are great because they will more than likely look crisper than screencast GIFs since they have fewer colors. You can also animate individual pieces when you create a vector GIF from scratch. If you do decide you’d like to make a screencast GIF or if you need to use an actual screenshot in your GIF, I’d recommend using the article I referenced earlier, here. Vector GIFs look great, and with some awesome animation, they are very interesting to watch. Plus, when you’re done, you can re-use elements you created for other GIFs to display the product.

Kyle Christensen

Kyle is the Brand Director at Red Branch Media.

Kyle leads our Graphic Design Department at Red Branch Media. His ability to manage incoming tasks, collaborate with the design team, hit deadlines and keep our file storage system well-organized has helped to shape the design department clients love today. While he’s away from the branch, he spends his time playing drums, video games, cranking the latest emo, pop-punk and screamo songs on Spotify, drinking local Omaha brews, and enjoying life with his wife. Kyle has a BASA with a Concentration in Graphic Design and a Minor in Art History from UNO.