Learning To Make An Animated Gif

This week, with a little help from my lovely neighbour who is a graphic designer, I've been teaching myself how to make an animated gif with Photoshop. As a (very!) small business, I have little or no budget for marketing so find myself trying to do lots of things myself. This actually means I am always learning and teaching myself new skills.

I wanted to make a brief animation to help to promote my picture book Angel's Great Escape on social media and didn't really know where to start. Luckily, you can learn almost anything these days by finding tutorials to watch online (and with the help of kindly neighbours!).

I am fairly comfortable with Photoshop but I only know the basics and hadn't really played with multiple frame animated gifs much before. Here's a link to one of the many tutorials but have a look around and find one you feel comfortable with. I created something quite basic but here are a few notes about what I've learnt.

1. An animated gif is created by turning the layers of the Photoshop file into frames and cycling through them. The animation below has 145 frames so 145 layers. It's basically a stop animation that puts me in mind of the old school animation techniques of my childhood favourites like Bagpuss and the Clangers. I used one layered PSD file to create each scene or layer and merged the visible layers then copied it and dropped it into the file that was going to be animated. I then went back to the layered PSD, undid the merge and repositioned the scene then did the same process again. And again! In each scene I moved Angel and Father Christmas a little further across. I nudged each one a maximum of 5 or 6 cursor taps each time to ensure that the finished product was fairly smooth. But at the same time, I nudged each up or down a tiny bit to give the movement a bit of a wobble as I wanted the animation to look quite rustic. I imagine there are several ways to achieve the same result but this process helped me to keep track of what I was doing and to be methodical.

2. I created the file at 1500 px x 1500 px in case I need to use it for anything else but then reduced it down to 400 px x 400 px when I saved it to help to reduce the file size. These dimensions seem to work well on mobile phone apps.

3. I was able to upload the animated gif directly to Twitter but had to save it as a video to upload it to Instagram. And for Facebook I needed to upload it to my website and then link to it from there.  Once again there are lots of tutorials online that I used to help! Here's one that neatly summarises each process. 

So much of the learning process to create the gif below has been trial and error. I enjoyed experimenting with the settings, composition and movement and making something that actually looks Father Christmas is flying by! I hope you have fun creating your own animated gifs too.