Tower 33 - Animation

I worked with Tower 33 to translate my static illustrations into a short story for the main banner of their website. Here is a quick breakdown of my (maybe overly complex) process that includes a mix of cel animation in Photoshop and compositing in After Effects.

Most things I create start with a concept and rough sketches. I want to clearly understand my client's product as well as audience. With that fundamental knowledge I create a simple, abstract story that hopefully creates a bit of delight for the viewer.

My first step in animating is to create a rough pass - How long is this going to take, what is the pace, what do the transitions look like. I use an app called Rough Animator on the iPad. It is the best tool to do something quick and dirty.

Once I have the rough animation, I'll go into Photoshop and illustrate the key elements as well as the transitions in high fidelity. I used Kyle Brush's "Go Gritty" for the lines and "Dry Media - Conte 2" for the fills.

I bring all the elements into After Effects and combine the cel transitions I created in photoshop with the static illustration. I animate those in the After Effects timeline. I also add "turbulence" to the drawings in photoshop so the lines have a hand drawn feel.

I created some textures in Photoshop and looped them in After Effects so I could add them to each of the different elements that had a fill.

Above is a static layout of the Tower33 homepage with the animation dropped in.