Exploding Colour in Mimi Leung’s Gif Tutorial

Mimi Leung’s work is a wonderful cacophony of explosions. Explosions of colour, humour, and body parts! Hers is work made tongue firmly in cheek, slightly dark humour but brightly drawn. Her burgers with faces and flayed characters dare you not to let out a little giggle. However, the comedy aside, Mimi’s illustrations and animations are full of great patterns and intricate details.

We featured Mimi last summer, focusing on her collection of gifs. It’s a relatively uncomplicated technique many designers are embracing to quickly move their ideas from concept to animation.

Thinking that many might want to give it a go themselves, we asked Mimi if she’d be interested in giving us a step by step breakdown of how to make a gif. Not only was she kind enough to lay out the whole process, but she made something brand new for AOTM and you lovely folks. Enjoy!

 

Choosing an image to GIF

My gifs work best when I’ve already made the final image. I guess, that way the movement is all about adding something to the image instead of trying to be a full-on animation.

For this tutorial I’ve chosen an image from my Birds Colouring Book I did with I Love Mel last year. After scanning the image in, I coloured it up using Photoshop. 

Deciding how/what to animate

I need to see how things move as I work so I usually do everything directly in Photoshop rather then sketching it all out first. 

I thought it’d be funny if the top of the bird’s head popped off before the blood came out. So I separated the original image into moveable parts:

• pool of blood
• body of bird
• top part of head

I think gifs are great because they’re short and crude so there’s loads of room for playing around with the movement and you don’t have to get it really smooth for it to be effective. Usually, I just manipulate the different parts using the transform tool to create movement. 

Animating in Photoshop

The animation panel is under Windows > Animation along the top menu. I prefer to use the ‘Frames’ view as it’s more visual and doesn’t seem as complicated.

Each frame is like a page in a flip book. You specify how long you see each page by fiddling with the time delay options at the bottom of each frame. Using layers you then choose what’s visible in the frame.

[NB The ‘Animation’ window has been replaced by ‘Timeline’ in some newer versions of Photoshop]

I’ve got really pedantic in grouping and naming layers since making gifs. I keep each different element in a group folder and number the layers within each group in the sequence I want them played. 

I still end up deleting all the frames and starting the animating again once I know where and how things go. This helps me streamline all the artwork I’m actually using and make adjustments.

Preview

When I’ve got the basic movements down I preview the gif via the Save For Web window. Then I’ll go back to the PS file and make adjustments to make it work better. I keep going back and forth like this until I get something I like.

So here, I’m just tweaking the head shape in a few frames to give the falling bird a bit of a snap up before the head pops off.

I also added a simple fade in/out to make the loop back to the start less jarring.

Export

To export— save for web as a gif! I don’t know exactly what all the variants do, I just try to get as high quality as possible whilst keeping it within 600kb-ish. I fiddle with the colours a bit too.

I think some settings may affect how it works on certain sites, but I’m not really sure as I’m not that techy. Google often has the answers though.

 © Mimi Leung, 2013