A bunch of people have asked me this over the months, so instead of just linking to tutorials I’d like to go a little more in-depth.
My process for making animations has changed a lot in the time I’ve been doing them. I used to work almost exclusively in Flash (for animations like lighthouse lady, fish man, busy girl, train folks, and rock roller) with a little bit of Photoshop basically just for post-processing (tweaking colors with adjustment layers). I should note that when I’m animating geometric shapes I almost always make them in Illustrator, and then import them into Flash.
When I upgraded to Photoshop CS6 and then CC, I found that the animation functionality had gotten much better, so I tried it out (see beach girl and crying person). Alex Grigg’s photoshop animation tutorial, as I’ve mentioned, was invaluable here.
For some other recent animations I’ve done a hybrid approach – making geometric shapes in Illustrator and animating them in Flash, then bringing them into Photoshop to apply texture to the shapes and also do any hand-drawn animation. See "help computer" and this NYT piece.
Unfortunately, Flash CC has actually removed a lot of the features I depended on for animation (the motion editor, and inverse kinematics) so I am finally taking the plunge into learning After Effects, which I’ve been putting off for forever even though it’s industry standard. I expect it will change my approach a lot.
Before I get into the weeds with a specific example I wanna shout out Ric Carrasquillo, who has mentored me with a lot of animation stuff and is a phenomenal artist and all-around nice guy!
So the most recent animation I’ve put on tumblr is this running girl. Let me tell you how this came to be.
I have a folder on my computer called “style tests” that is filled with random scribbles, sketches, abstract color palettes, brush experiments, patterns, etc. When I feel like starting a random personal project, I peek in here and see if there’s anything that holds water. If it manages to keep my interest after wasting away in this folder for months, then it’s probably worth finishing.
Apparently I started “runner” about a year ago, in April 2013. it was initially just an idea for a static illustration in a sort of printmakey style with a limited palette. I’m sure I was thinking of this scene from Akira Kurosawa’s Dreams because it haunts me.
Anyway, it stayed like this for basically a year, then in May of 2014 I decided to do something with it. I had been thinking of the scene again and thought it would be fun to animate a run cycle.
I did rough pass animation in Flash because I find it faster and more intuitive when you’re working out timing. The final animation is two 16-frame run cycles at 12 fps, so on the 2’s at 24 fps, basically. My first pass here is on the 2’s at 12 fps, so on the 4’s at 24 fps. I asked my coworker Matt Cruickshank for tips and he pointed out that it’s physically impossible to run with your arms and legs moving foward on the same side, which gives you fascinating insight into how little I know about this stuff
Second pass with all the frames filled out – this was sufficient for me to move to final linework.
I exported the animation from Flash as a .png sequence, then imported that into Photoshop as a video layer so that I could trace over it in a new video layer. This part was the most time-consuming and tedious, so I queued up Das Boot and had at it. Here’s a progress shot. Someone on twitter mentioned that her right arm (our left) was doing some funky stuff and he was right! I fixed it as best I could in the final. It still looks weird tho :C
When I was done with the 16-frame cycle, I duplicated it and changed her facial expression in the second round so that it wouldn’t feel too repetitive. Next: color.
Then I set up some Photoshop actions to fill in the flats. Some glitches occurred. ¯\_(ツ)_/¯
When animating in Photoshop, you can create a cycling texture animation as a smart object and then clip it to a layer, video layer, or group of frame layers. This is what I did with her shirt. I made a Photoshop action to create a bunch of random blobby noise, ran it on 16 separate color layers, and clipped the resulting footage to the flat shirt shapes.
I do variations of this all the time, with static illustrations too, just to add some speckle to a solid color.
Then I spent a long time coloring all the lines………
For the background elements, I went back to Flash, using some Illustrator-made vector shapes. The hill in the background is a giant rotating circle with alternating smooth and pointy ripples.
The bush in the foreground is a spiky rectangle doing a tile tween. Both of these got punted to Photoshop as .png sequences in video layers, where I colored and textured them.
At some point in this entire process I decided to lose the spooky hand + shadow in the background (seemed too cheesy, I wanted something more ambiguous) and I also removed the kicked-up dirt, under Ric’s advice that it was driving home a point that the character animation had sufficiently made.
The sky has some texture that was not procedurally generated, but scanned in (years ago) from some powdered graphite + alcohol experiments (I’m not being glib, you literally mix the graphite powder with alcohol). The texture files were huge and this led to some problems. Every single frame of that cycling texture was a very zoomed-in portion of a duplicated enormous 600dpi smart object, and it was bogging down the .psd. I rasterized the smart objects thinking that would solve the problem, but the thing is – Photoshop often lets pixels outside the canvas hang around in case you need them. I eventually solved the issue by cutting and pasting every single layer, so that I was sure it was only saving on-canvas pixels.
When everything was ready to go, I exported all the frames as flat .pngs and ran some actions on them to tweak the colors with curves layers and gradient maps, then piled them back into a .psd (File > Scripts > Load Files into Stack…)
Then I exported it as a .gif (because this was a limited palette piece from the start, this part was pretty painless) and posted it to tumblr, but not before redrawing it in unicode
(the most essential part of my artistic process)
In all this animation took about two weeks, but I was only working for half an hour to an hour every day, in-between more pressing projects – as a way to relax and have fun.
Feel free to download the animation .psd and poke around. Please note that it will only work with CS6 and up.
I hope this was simple enough to follow. Again, I really recommend Alex Grigg’s Photoshop tutorial, it taught me basically everything I know. This Richard Williams book is also a big deal. I hope more people give animation a shot and make weird gifs – it’s fun and informative.