Hey, my name is Zach Coe, an Advanced Concept Artist here at Schell Games. Over the past 8 years, I’ve worked on various projects, concepting, texturing, and illustrating for environments, user interfaces, characters, vehicles, mini games, you name it. Whatever is needed.

So recently I wanted to focus on learning how to use Photoshop’s Timeline animation tool. Sure I’ve used the Frame animation tool countless times in my concept art, but the Timeline tool has always scared me. It’s overwhelming, and unwieldy, and has lots and lots of buttons (I always worried I’d create a rift in Earth’s timeline if I used it wrong). But I decided I was going to jump in with both feet and learn the mysteries of this tool in one week.

Now I am in no way an animator, and you may be asking, “Why would a Concept Artist use animation tools?” Over the years I’ve found that complex concepts need much more than just a single still image to communicate the complete idea to the team. And I have found that even the roughest animation can take a drawing that has lots of parts and pieces and quickly show how it would move and work within a level.

When concepting anything, say a prop, an environment, a character, etc, you want to make sure everyone can understand your idea. Not just your basic idea of “I think this would look cool”, but your idea of how it works, why it works, how it moves. Sometimes you can do a drawing or two, talk to the modelers, animators and programmers, and the idea is communicated just fine.

Sometimes though, there’s more to it than that. Sometimes your idea is so specific and detailed that a rough animation is vital to help the team see how the concept’s intricate components work together.

So for me, I will occasionally do an animated piece of concept art to present alongside my drawing/painting. For instance, below is a time machine I concepted for our iOS game “The World of Lexica.” I came up with this futurey motorcycle/grasshopper looking machine, and my initial drawing is focused on defining the look of the machine.

But once I had the look down, I wanted to show more accurately how I designed the parts to move. This key information is just as much part of the concept as how the machine looks. It helps the team understand its function and how it needs to be built in 3D to achieve this. So I also made this animated concept:

Since the Frame Animation tool has always been so invaluable to me in creating concepts like the image above, I wanted to see how the Timeline tool could help me. Would it make my concept animation easier?

MY OBJECTIVEIn order to better communicate the concepts that require movement, I wanted to see if it would be beneficial to learn how to create more complex animation samples using Photoshop’s Timeline animation tool. My goal was to visually show how some of the more complex concepts I’m trying to communicate would work/animate in game.___________________________________________

WHAT I LEARNEDAfter much trial and error:1. This tool is best used for multiple repetitive background animations, like these:

2. Then use the Frame by Frame tool for any character work overtop of the background, because it is NOT good for specific precise movement animations, like when you need a character jumping around in an environment.

3. NEVER use it for both, ever … lesson learned.___________________________________________TIP: USING SMART OBJECTS WAS INCREDIBLY ADVANTAGEOUSI knew a lot of time would be spent toward the animation end and I might not have much time to art things up (as it turns out I only had a day and a half to do the art), so I set everything up in the beginning as Smart Objects. This took a little longer in the initial setup of the level, but it made my job worlds easier, as well as saving me tons of time, later on in the week.

I started it like a 3D project, with a “whiteboxing” mentality of keeping everything as simple replaceable objects for the initial setup. This way, once I had my animations in place, the only assets I had to update/change were my master Smart Object files in order to update all of my art in the animations.

For example, you can see the “Whiteboxed” base animation from Day 1 below:

As you’ll notice, there’s no pretty art to look at, few parts are actually animating, and one of the assets even has notes to myself scribbled on it. But this early on, because I made it easy on myself with the initial setup, I could just focus on my Timeline animation education, pure and simple.

In addition to this, I was able to use a similar thing to Smart Objects that I’d never tried before: externally linked files. Photoshop now lets you create a master photoshop file, and then reference that file from within other Photoshop files! o_O I know, amazing, right? Because of that, I was able to set up quick animations for my character, even starting it as a simple stick figure like in the video above, and then anytime I changed something on my character in the master file I could simply update my animations with the updated master art - see my chart breakdown below:

Wow … that’s a lot of files, but they all worked together great. :P___________________________________________DISADVANTAGES & SETBACKS

-THE TIMELINE TOOL IS HORRIBLE FOR DOING CHARACTER ANIMATIONWhat I found is that it’s great for letting you show a bunch of little animations at once in a single scene without having to coordinate them frame by frame, like all of the saw blades, shiny spikes, clouds in the window, etc. What it’s NOT great for is moving a character around to precise points and reusing animations.

For instance, in order to re-use my jump animation, I had to make a copy of my “jump” smart object layer for every single time my character needed to jump. This type of task becomes a time-consuming PAINSTAKING process, and is better reserved for the frame by frame animation tool where you can easily re-use the same jump animation layers over and over.

-BEWARE THE DREADED PHOTOSHOP SAVE FOR WEB GLITCHOn top of the character animation issue above, I won the coveted “I BROKE PHOTOSHOP” award! When your animation gets too long with the Timeline Tool, Photoshop playback is super chuggy, but I need to see my animation in real-time, so I constantly have to export an updated gif to see my progress. However, by my millionth gif export on Wednesday afternoon, Photoshop’s “Save For Web” function broke on me. Completely. Apparently from my research there are 2 ways to fix it: 1. Delete your “Save for web” prefs (this didn’t work) 2. Reinstall Photoshop (even then it would break again)Neither of these solutions worked. :(

MY BACKDOOR SOLUTION(There may be better ones. This is what I came up with on the fly.)

Since I also couldn’t view the animation in real-time directly in Photoshop, I absolutely had to have an exporting option, so I resorted to exporting several times a day as a Quicktime video. This took longer than “Save for Web”, but at least it allowed me to see my progress.

Because of this breakage, I had to get a screen capture of my exported video to show here. Check it out below:

SCREEN CAPTURE OF MY EXPORTED VIDEO

CONCLUSIONSo all told, I did learn a lot, and about more than I was expecting. It was definitely a fun challenge, and I’m really glad I tried it! I pushed myself to learn something new, and came out with some great tips and tricks to use in future work.

And though I wouldn’t use the Timeline Tool in this particular way again, I do know more about it now and am well versed on some things it is useful for (as well as the awesome power of Smart Objects and Externally linked PSDs) and hopefully this will help someone else out there or in the studio here as well.

For more concept work visit my website, or follow me on Facebook, Instagram, and Artstation.