Background Painting/Animation Practice

Here is the final product:

[kml_flashembed fversion="8.0.0" movie="http://www.larkinheather.com/blog/entries/Kanookrunning8.swf" targetclass="flashmovie" publishmethod="static" width="500" height="333"]

[/kml_flashembed]

I've been working on storyboards and scripts for the past two weeks, so I wanted to do something a little less on the 'pre-production' side and more on the 'final product' side. I tend to get paranoid if I spend too long planning things that I won't have the skill/patience to bring it to fruition.

Drawing the Background

I started with my background. I looked through some of the pictures I took when I went to Panama during my third year of college. Once I found a good picture, I traced a 720x480 box on paper using one of models I made in Photoshop (described here).

I drew a somewhat rough version of the picture. I've tried doing drawings from pictures like this many many times before, and I usually get bogged down by trying to draw too many details. I was feeling impatient, so I just indicated the shape of the landscape and some of the major tree shapes. It looked like this:



The ugly looking white bits are where I later painted over some of my pencil lines in Painter. This was sort of a revelation to me. Usually, I don't like editing the sketch once it's scanned, but if I paint over the lines in white in Painter (instead of trying to erase them in Photoshop) then I can do it gradually, so it doesn't look obvious that it was edited (although it does when you just look at the sketch).

Painting the Background

Next, I moved into Painter. I set the sketch to "Gel" and made a layer below it that I filled solid with green. Also beneath the sketch layer, I made a layer for the light values. I put in the bright sky in the upper right corner and the trees below it, as well as the light bit in the middle of the path.

Then for the dark layer, I did a bit more sculpting of the ground, added many many more trees and silhouettes of foliage. I definitely used a lot more dark on this painting then in my last painting tutorial.

Then I added another layer for some of the greenery, but it wasn't standing out so well with the sketch covering it. So, I started adding layers above the sketch layer for foliage and other highlights. It's nice when the scanned drawing is good and you want the lines to define things ... but that really works better for indoor settings, where you can delineate objects easily. But with a forest, you can't delineate bushes and grass so easily, so I needed lots of layers above the sketch layer for those kinds of things. I still have a lot to learn about painting forests, but I don't think it's too bad. :)

After I was done in Painter, I took the painting back into Photoshop and flattened it (and saved it as a separate file). Then I took the lasso tool and selected the farther elements of the scene and applied a nice 2.0 Gaussian blur for an added feeling of depth. And voilà, it's done:

Animation Preplanning

Feeling somewhat satisfied with the painting, I decided I would go ahead and put some animation on it. I took the painting into Flash MX and immediately started to animate my character, Kanook, running through it. It was a horrible disaster. I sighed, I resigned myself to the fact that I would actually have to do some preplanning.

I sat down and thought about Kanook's run cycle. I basically broke it down into five frames:



Then I went frame by frame and sketched many cycles of those 5 frames into Flash. The tricky part was the end. I really wanted him to disappear off the screen, but nothing I was doing was looking right. That's why I left him still in the shot on the last frame. I will have to do some research on how to do that later ...

With the sketch animation done, I went and did the nicer version. I was careful this time to make the lines closed and without holes so I could color them easily with the fill tool (as described here).

Using Masks to Add Depth

Here's a neat little trick I've used many times. I make masks over the characters to show them moving behind background elements without having many background layers.

For example, see how Kanook is running into the shot:


I want to make it look like he's coming out from behind the trees. To do this, I first make a new layer and paint colored shapes where I want the character to appear. In other words, I don't put color on the trees that will be in the foreground. Here's shapes I drew for this animation:


Then, make that layer a Mask layer, by right-clicking on the layer and clicking "Mask." Drag all the layers you want to be affected by this mask under the mask layer (see the pictures for what it should look like).

If the mask layer and all its linked layers are locked, then you'll see the mask effect. Here's what what the final product looks like:


This is not a super great example since I'm so zoomed in and the tree shapes aren't so clear to begin with ... but hopefully you get the concept (ask me if not).

That's all I have to say about this animation. It was a fun little exercise that only took a few hours to do. And I hope my explanation was helpful to you, too!