34 GIF tips: illustrators reveal techniques for creating amazing animated GIFs

6 illustrators reveal how to turn artworks into fun, charming, powerful or hilarious animated GIFs in Illustrator, Photoshop or After Effects.


The basic elements of an eye-catching GIF are easy language and a dynamic motion that fits to the mood of the concept and the message.

For example, a good GIF can sometimes be really playful and full of dynamism, or it could have a really slow and smooth movement that describes the feeling behind the moving images.

Fausto Montanari (Italy) & Nikolay Ivanov (Bulgaria)

We started developing the concept for this GIF using the logo of the client as a main reference. We wanted to recreate it in the illustration style and keep the message that it brings. It represented a mobile house that has four wheels, chimney and smoke going out of it - which represented the coziness of a house. The people behind the logo are a group of enthusiasts that have a common aim to help homeless people get back on their feet. They are finding them place to live, helping them get a job, so that they can be okay again.

The challenge here was to create a visual that is simple enough to easily convey the message and serious enough to illustrate the topic. It also had to give the viewer the chance to use his imagination to imagine what is happening next.


With the animation, it was important to make character’s acting feel authentic. The small gestures, sudden stop and confused look are important in conveying the feelings of a lost man. All the small details in creating the dynamic mood are important to achieve a touching story, despite there being no sound and a really short duration.

Fausto Montanari (Italy) & Nikolay Ivanov (Bulgaria)

Advertisement. Article continues below

If you are inexperienced at making GIFs, start by combining two or three different images. For example, make a switch button that – when it’s pressed – turns on the lights and the opposite way around.

Fausto Montanari (Italy) & Nikolay Ivanov (Bulgaria)


If you want to make a GIF that tells a story, you need to know exactly what you will have to animate when you make the illustration. You need to think of your GIF as of a little movie with a plot.

Advertisement. Article continues below

Make a storyboard so you can follow the story easier – or so the animator you work with can see clearly what is happening in the story.

Fausto Montanari (Italy) & Nikolay Ivanov (Bulgaria)


Sometimes it can be a big challenge can be to stay within the mood. Whether a GIF is fun, sad, scary – or fast or slow – it’s all about the decisions you make as an artist that makes a good story.

Fausto Montanari (Italy) & Nikolay Ivanov (Bulgaria)


It all starts with an idea. In this case, I woke up this one morning and I wanted to animate a moose running through nature. But instead of a moving background, I wanted to have the whole looped GIF to be from a stationary perspective. So some sort of a machine had to be created, that would 'fake' the natural world around that moose.

Rafael Varona (Germany)

Advertisement. Article continues below

While parts of the background were animated with simple motion tweens in After Effects, others were created with good old frame-by-frame drawing.

To make your animation look as realistic as possible, pick the best example from nature that you can find – in this case the famous Muybridge Horse – and copy its motion.


I always try to add more details in each new frame as possible, which should be pleasing to the viewer as they discover new things within each loop.

Rafael Varona (Germany)


I created a big window-display illustration for a Berlin-based eyewear manufacturer called Mykita. Once it was done they asked me to do a couple of looped GIFs for their annual charity project in the same style. I started to develop some ideas how to incorporate the thought behind the different charity organisations and how to animate the illustrations and have them exciting and visually appealing.

Rafael Varona (Germany)

Advertisement. Article continues below

The charity organisation behind this GIFs is teaching blind people the technique of echolocation, which makes it possible for them to even ride a bike. It was obvious to place a character on a bike in the centre.


Her hair and shirt were animated frame-by-frame. For the background, I used a very easy technique to create a nice feeling of depth: I created a couple of layers with trees and additional flowers and added a motion tween from left to right. The further away the object is, the slower the speed. This technique – known as parallax – lets you create a realistic moving background.

Rafael Varona (Germany)


To create GIFs, I first open up a new file (I used to use Flash, but now I like doing animation in Photoshop). I create a new video layer and start drawing a shape. I draw a movement frame-by-frame. I try to make it interesting and to loop back to the first frame. Once there's a loop, I export it to After Effects, where I duplicate the loop and treat it as a sort of an animated LEGO block.

I build something with the blocks and sometimes combine other loops as well. I play around with the sizes and rotation and position of the loops, but also with how they relate to each other on the Timeline - they don't start and end at the same time. What I end up with is a very organic abstract sculpture that is constantly moving. I export it as a MOV file and take it back to Photoshop, where I save it as a Gif (using Legacy – Save for Web for most control).

Ori Toor (Israel)

Advertisement. Article continues below

Remember to embrace the GIF aesthetic. You will have to compromise the quality of the image in order to create a GIF that's compliant with most web platforms. That means you'll have to either create something that's very short, has a limited palette or is very rich but then very compressed. Don't expect to make a 10 second HD animation with tons of colour. Look through the Tumblr guidelines and prepare yourself in advance.

Ori Toor (Israel)


There is no one way to gain attention and popularity as a GIF maker – there are absolutely no rules here. I've seen GIFs being used as a promotional moving images, an alternative to a music video (much like a lyrics video) and sometimes an editorial illustration. They’re also a sub-genre of video art.

My experience taught me it's better for me to approach any art project without knowing exactly what I'm doing. If I have a general idea, it's better to keep it vague and start working immediately and not to flesh it out too much beforehand with sketches and the like. With GIFs it's no different.

Ori Toor (Israel)


The main magic gift of illustration is in creating something that doesn't exist in life – and it gives you absolute freedom. Especially with the Poltergeist series I worked on recently.

I was commissioned by Tumblr to work on the Poltergeist movie launch. They sent me some images from the movie and the trailer. The brief was very free – they sent a reference of a drawing I had published previously on my blog and asked to use this specific etching style – so I was inspired by a moment in the trailer where the teenager in the family had her phone possessed by the poltergeist.

First off, I sent them this animatic so they could see the movement and give approval.

Laurène Boglio (FR/UK)

Advertisement. Article continues below

I worked it up into this GIF, but Tumblr decided to keep it simple by removing the messages – which I was very happy to do [results on the next page].

Laurène Boglio (FR/UK)


The final GIF.

Creating GIFs is very simple in Photoshop. You just need to be organised in your layers and quite patient because Photoshop is very sensitive and, sometimes, moving the wrong layer could ruin the whole animation.

Laurène Boglio (FR/UK)


Snow Globe is my recent Christmas-inspired piece. Unlike my usual pieces where I plan a meticulous scene [see later pages, Ed], my goal was to make a simpler GIF that conveys an idea quickly.

Nancy Liang (Australia)

Advertisement. Article continues below

It always starts with sketches and planning. I do a draft using quickly drawn thumbnails and jot down notes for animation – I need to know what it roughly looks like and I need to list what needs to be animated and how it will be done.


Once that is organised I will start the rendering process. This involves the drawing and cutting of illustration elements that are then scanned and arranged in Photoshop.


Once I'm happy with my static image I then move onto the animation process.

Advertisement. Article continues below

My animation is heavily controlled. For me, organisation is the absolutely key to success – everything must be named accordingly and it is especially important to categorise the animated elements from the still ones.

Nancy Liang (Australia)


The nice thing about making GIFs for a client is that they already have an idea, they just need someone to realise it. With that in mind, the process of making a GIF for a client is quite similar to that of a still illustration: the initial planning and sketches, then the rendering and animating phase and any revisions that come afterward.

Nancy Liang (Australia)


The main challenge is attention to detail, especially while animating. My process is quite labour intensive – it involves moving elements frame-by-frame – so when one frame goes off, the whole thing is off as well. If a client disagrees with a certain movement it sometimes means re-making the whole motion from scratch.

Nancy Liang (Australia)

Advertisement. Article continues below

To minimise this likelihood, I have to be as specific as possible with myself and client in the planning stage – making sure we both are on the same page. Oh and managing version control, that’s helpful.

Nancy Liang (Australia)


One of the most exciting projects I’ve worked on is the rebrand for data company Quantcast. Design studio JaegerSloan got me on board to create looping pattern GIFs, which the company could use within their logo. These GIFs communicate the brand values and the types of behaviour they can measure online.


I’ll talk you through one of these GIFs, which was created to communicate online shopping. Being part of a larger rebrand, the GIFs had to be clear and concise and follow the brand colour palette.

Advertisement. Article continues below

The first stage was conceptualising the piece and creating the illustration. It began as a usual illustration commission, with sketches first, then worked up in Illustrator to be signed off by the client. The difference was that the file was setup so it was prepared to animate – all layers were separated and labelled.

Once signed off, it’s time to take it into After Effects. This is where it gets fun! I knew roughly what I wanted the animation to do – items drop down, box folds up and tape rolls over. But what order does this happen? How quickly do the items drop? How do the items move as they drop and bounce around? These are all played with in the animation stage. This particular GIF went through three rounds of revisions – mostly finessing the timing – to get the finished piece.


It’s all about making the most of the flexibility of the digital medium. Traditional illustrations are great, but GIFs can be really playful, engaging and clever. Commercially, I’ve created GIFs for editorial work, social media and even branding. For me, the most engaging GIFs are the ones that loop seamlessly and infinitely, with a lot of movement and playfulness.


In my (biased) opinion, illustration can communicate a very specific message or complex concept in a distilled, poignant, funny or unique way – or all of the above. It can have a very distinct voice, which I think separates it from traditional photography.

Advertisement. Article continues below