Gif Animation Basics: Tutorial Roundup

For those of you unfamiliar with this file format, GIF stands for (graphical interchange format). They are responsible for the animated images that have become very popular around the web in recent years. In fact, we’ve featured a few artists on Design Instruct who have created some truly amazing work with gifs.

We think gifs are a very interesting file format. As an image file, gifs are very inefficient at being able to display and store images at reasonable file sizes. This means that gifs aren’t great for showing off photos and highly detailed images. However, the gif file format is widely supported on many browsers making it a very appealing file format to work with. While it’s true the JPEG’s are better for displaying and transporting images, animated images are best displayed with gifs.

If you’ve ever wondered how animated gifs are made, look no further. Here are some great tutorials we found that will teach you the basics of gif animations and maybe offer you a chance to apply these techniques in your own work.

1) Make an Animated Gif from a Video Clip


When you think of gifs, you’re probably thinking of those looped video sequences taken from movies and tv shows. There are many tutorials on how to create those types of gifs but this tutorial from Live, Laugh, Photoshop is the most succinct and easy-to-follow that we’ve come across.

2) Create Your Own Animated Gif from Scratch


For a more hands-on approach to creating your own animations, here’s a great tutorial we found. It’s 5 years old but the concepts and methods used are still used today. Of all the basic gif animation tutorials, this allows for the most possibilities to be creative.

3) Using Gifs to Display Your Work


This is a very simple tutorial showing how you can use animated gifs to display your work.

4) Making an Animated Gif with Illustrator and Photoshop


If you want to really get your hands dirty and create something awesome, this tutorial shows a detailed workflow between Adobe Illustrator and Adobe Photoshop. This is where it really gets interesting.

5) Optimizing your Gifs


As mentioned earlier, gifs aren’t particularly efficient at displaying and storing image files are reasonable file sizes. Most websites will only accept gifs that are 2mb or less. This tutorial will show you some practical tips on how to minimize your gif file sizes.

Final Thoughts

At the moment, most gifs we see are used in funny memes or gags. However, as designers and creatives continue to explore the possibilities with gif animations, we believe it will play a much bigger role in the evolution of media consumption in the near future.

Here are a couple of amazing artists we love at Design Instruct.

Guillaume Kurkdjian’s Bisous Les Copains

David Szakaly’s incredible animations.


Tell us what you think of gifs in the comments section below.