Sign up for my weekly newsletter and get the Photoshop Layer Tricks & Shortcuts PDF.I want that! x

Creating an animated gif in Illustrator & Photoshop

18 Dec 2014

I've always been fascinated by the wonderful animated gif images created by the talented folks of RADIO. So I thought to myself I have to try this too, and since it's about Christmas time I had the idea to draw Santa. Giving this some further thought, I decided Santa had to go on a diet, and do a bit of exercising instead of leaving all the heavy lifting up to Rudolf and his friends. So I swapped the reindeers for this beautiful vintage bicycle named Omer by Achielle, this way Santa is riding in absolute style! Let's have a closer look on how I created this animated gif…

Santa riding a bike

Creating the illustration in Illustrator

This article will give you some insight on how you can create an animated gif starting from a static illustration created in Illustrator, and composing the animation using Photoshop's Timeline feature. So first I started drawing a static version of Santa riding a bike which would serve as the first frame of my animation. I started with the bike, and then I drew Santa.

Stay organised

During the process I made sure that my layers stayed as organised as possible. So I divided things up in layers, starting with a layer for the bike and one for Santa. While drawing I made sure to group the objects that belong together, and also give these groups a proper name so that I would never loose oversight. Naming everything might seem a bit overkill, but believe me if I say it's essential if you're going to create an animation with 30 different poses of Santa's legs, the crank, the pedals…

Limit colors to save on file size

Use global colors in Adobe Illustrator

One of the challenges when creating an animated gif, is to keep the file size as low as possible. Cutting the amount of frames can help, but of course you want to end up with a smooth animation. Besides the amount of frames, the pixel dimensions also play a big role of course, but the best thing you can do is to try to use as less colors as possible. During the creation I saved each color I used as a global swatch color. Global colors are pretty handy because if you change this color later on in your process, then this change will automatically be applied to your illustration. You only need to check the 'Global' checkbox when double clicking the swatch in the Swatches panel.

Calculate the frames

While you organise your drawing into layers and grouped objects, keep in mind which parts of the drawing will stay static and which will be animated. Make sure that those elements that need to be animated are a separate group or layer. In the image below you can already see that I used number 1 at the end of the name of certain grouped objects. Since the screenshot is still taken in the middle of my process, those numbered grouped objects are only some of the moving objects of my illustration. The chain and the wheels will of course also rotate.

Santa riding a bike created in Adobe Illustrator

Creating the animation states

Once you have finished your illustration, you have only created 1 frame of the animation. The next step is creating the other frames representing the different states of the animation. This is the hardest part of the process. You have to analyse and figure out what will be animated, and in how many steps. I started with the most obvious objects, which are the rotating parts: the wheels, the crank and the pedals. So I kept in mind that the amount of frames I needed to create should be a divisor of 360 (for a complete rotation).

I decided to go for 30 frames in total. This meant I had to create 30 different states of the wheels, the crank, the pedals and of course Santa's legs. I copy rotated each grouped object at 12°, and then repeated this action for another 28 times using the Transform Again function (Cmd/Ctrl + D). Since the object is grouped, Illustrator creates a separate group layer for each, also using the same name. All I needed to do is change the number at the end. Again, I don't think this is overkill, because the numbers are important for when I'll compose each frame. This way I know the e.g. 'crank 12' goes together with 'front wheel 12', 'back wheel 12' and 'right leg 12' and 'left leg 12' etc.

Rotating the crank, chain wheel & pedals into 30 different positions

So what about the other elements in the drawing that also needed to be animated but in a different way? Well here I also used the same technique of numbering every state of a grouped object, and I kept in mind that in case I needed to repeat the animation of the element more than once that the number of states is either a divisor of 30, or the way I would apply the states would create a fluent loop animation. For the beard I used 4 states, but I went from state 1, 2, 3, 4, back to state 3, 2, 1 and again to 2, 3, 4 and so on. A little bit of math and experimentation was needed to make this work, because there is also the factor of speed (frame duration) that you need to keep in mind. Using 1 single frame for each state appeared to be way too fast. It was like the beard and hat were vibrating.

30 different rotated positions of the crank, chain wheel & pedals

The image above shows the crankset in all its states (viewed in Outline Mode). I used Transform Again to create the different states and rotated each part at 12°, but I did correct each pedal to keep them all horizontal. However in the end, while drawing all the states of the legs of Santa, I tweaked the angle of the pedal a little bit here and there to match the pose of the foot.

drawing 30 different positions of the right leg

While drawing each state of the leg, I turned off the layers that show the other states of the crankset and made sure only the corresponding state was visible. Then I went into Isolation Mode (by double clicking the object) to draw. Going into Isolation Mode is very helpful, especially in this situation where things are getting a bit complex with all the different states of other elements etc. It helps you in focussing on what you're drawing. One way of working is switching to Outline Mode before going into Isolation Mode, and then hit Cmd/Ctrl + Y again to see only the object you're working in Preview Mode. To check the smoothness of each state of the leg, I often turned on the layers of some of the previous poses of the legs so I could check where I was I going. Still… this was the hardest part of all. Making sure the legs are well animated. I had to do some tweaking again, while composing the frames in Photoshop. You can only guess what the outcome will be, which in a way makes it exciting to create these kind of things.

Composing the animation in Photoshop

Once I created all the different states. I made sure all my layers and objects were visible in my document, and I exported my file to Photoshop by going to File > Export. I used 72 dpi and made sure Write Layers was selected, together with Maximum Editability. Then I opened the file in Photoshop and started composing the different frames via the Timeline (Window > Timeline).

Composing the different frames via the Timeline in Photoshop

Compose frame by frame

Once you click the Create Frame Animation button in the Timeline panel at the bottom of your document, you create your first frame. From there on it's a matter of selecting a frame and playing with the eye icons of the layers in the Layers panel. At this point, you'll be happy you named your layers and used numbers. This way you know exactly which layer belongs to which state and frame. The beard, ribbon, and hat were the only objects that needed a bit of estimation and experimentation to make things work. Also the chain has 2 states, but you can hardly see the movement since things go fast. I switch between state 1 and 2 for each frame.

Little details count

At the end I added the tiny bump by putting a stone on the road. I moved the stone in different (estimated) positions through the different frames. Same for the lines in the background. Although, I have to admit that they gave me a headache at first to get them right. First of all I had trouble making sure they loop fluently, and also to achieve a sense of movement. After the first try I ended up with a lot of flickering lines instead, but after doing a bit of math, and by spreading the different states of the lines better over the different frames, I was able to fix it.

Frame duration

While composing your animation, you need to do a lot of testing and tweaking. One of the things you need to experiment with is the duration of each frame. You need to find the proper speed. Even a millisecond can make a difference. Luckily this is the easy part, as you can set this for all frames in one action, by selecting all frames and clicking the dropdown arrow at the bottom of a frame.

Conclusion

While working on this creation, I underestimated the amount of work needed. It made me also think if this is the best and most efficient way to create this. Especially when I was struggling with the lines. I know I could do this in no time in Adobe Flash. In Flash you can use tweening. Just like Flash, Photoshop also has a tween function. Though, I wasn't able to use this function and I don't know how exactly this tweening works. I tried a couple of things, but probably because I added those lines at the very end of my process it messed up things so I decided to add the lines in positioning them frame by frame also using different layers of each position. So I guess certain animations might be way more efficient using Flash, but since it's been a whole while since I worked in Flash and I had to draw all these different states of Santa's legs, I decided Illustrator would be the best option, in combination with Photoshop. It's up to you of course to choose what's best. After all it's the result that counts. So there you have it! I hope you enjoyed the read, and it has sparked some ideas.

Merry Christmas!

{aj-job}

Authentic Jobs my partner in crime helps you find a job.

{aj-job:aj-job-type}

{aj-job:title}

{aj-job:aj-company-name} - {aj-job:aj-location}

{/aj-job} {sponsor}{/sponsor}

Comments

  1. 1 Michel 19 Dec 2014

    I didn’t do often animations in any Adobe apps, with the exception of Fireworks, which I used once or twice to make some quick animations—for example, this rotating tape cassette was quickly made in Fireworks. (I think I used tweening, maybe with combination with Twist-and-Fade, but don’t remember now. :-)

    Flash is Adobe’s best tool for more complex animations; but not sure how much time Adobe will continue to develop it, I think they lost the direction and it’s possible they’ll discontinue it in a year or two… who knows.

    Photoshop and Illustrator are not exactly tools for animation, but this is where your tutorial shines in all its glory—it’s a very interesting workflow you developed, so thanks for sharing it with your readers! :-)

  2. 2 Andi 22 Dec 2014

    After Effects ?

    This is exactly what AFX/AE is made for. Even using flash for an Illustrator file seems quite odd as well.

  3. 3 Joshua 24 Dec 2014

    I saw this graphic from Roadbikerider.com and followed the link to check out this blog. I’ve done animations previously and I used vectors imported into After Effects. It’s much much easier that your work flow appears, once you learn the interface and tricks. To my knowledge, that’s how most of the smooth animated gifs you see on Dribble are created. AE doesn’t create gifs, though, so you have to import the frames into PS to compile and export as a gif.  ... just my 2 cents, hope it helps.

  4. 4 Veerle Pieters 24 Dec 2014

    @Michel Thanks for the compliment on the workflow, and for sharing your cassette animation too. I thought of Flash too, since I’ve worked in Flash years ago, but it seems that After Effects is best suited for these kind of thing.

    @Andi, @Joshua Thank you for your comment. I’ve never used AE, so I don’t know anything about it… I have to check this out in detail and learn how to do this. After a quick search it seems you just start from a static illustration, and use the Puppet tool to manipulate the legs, the crank, pedals etc. to create the cycling movement. Indeed it would take much much less time. I just had no idea :)