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.
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
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.
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.
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.
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.
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).
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.
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.
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.