The people in the picture – Photoshop layered animation

The “Qingming Shanghe Tu” depicts the prosperous scene of Bianliang, the capital of the Northern Song Dynasty, and the two banks of the Bian River, and has become one of the top ten most famous paintings in China, while today’s people use the latest electronic technology to animate it, making it more lifelike and the effect is shocking. In this paper, we analyze the layering techniques used in this animation and apply them to our own pictures to turn our still pictures into dynamic animations.

Layering Analysis of Static Images

There is a technique in animation production, which is to create layering. We appear to be in the same plane of the image, but in fact many of the elements are in different layers, for example, the sky is a separate layer, the trees in the background and the flowers in the foreground are also separate layers, and the characters who need to do the action are also separate layers. This allows the characters to traverse through different layers to produce a superb three-dimensional feeling, while greatly saving costs – only the state of the characters needs to be changed, and other elements do not have to be changed, saving time and effort.

Let’s take a clip from the animated version of “Qingming Shanghe Tu” as an example for analysis. There are at least five major layers: the background village, the main road, the big tree on the left side of the foreground, the house on the right side of the foreground, and the characters (Figure 1). Except for the characters moving (at the blue mark), the scenery of several other layers are static and motionless, and because several scenes have been layered, the characters can travel through different layers of scenery in a very realistic way.


Figure 1 Layered analysis in “Qingming Shanghe Tu

Decomposing multiple layers in a flat Chinese painting

Master the above principle, plus Photoshop (this article to CS5 version for example) powerful layer layering function, even if we have little painting skills, but also can produce similar effects of animation.

First of all, prepare the image material for the animation, here I choose is the Qing Dynasty painter Wu Yun made a partial landscape, a boat floating in the water, we want to make the boat move (Figure 2). This painting is chosen because its composition elements are relatively simple and easy to operate.


Fig. 2 Partial of the landscape painting by Qing Wu Yun

Now let’s do the layering operation, obviously this painting can be divided into four major layers: the river surface, the island in the background, the trees in the foreground and the boat. Among them, the river surface is more click color, through the magic wand tool can be extracted from them. Operation before the best backup of the original image, in the Layers panel, the “Background” layer dragged to the “Create New Layer” button, release the mouse button to make a copy of the current background layer, double-click the new layer name to rename it Double-click on the new layer name to rename it “River”.

Select the magic wand tool and click on the river layer to intelligently select the river part. If the automatically selected part is beyond what you want, you can adjust the tolerance value in the toolbar above until you are satisfied with the selected content. In addition, for the part of the omission, you can press Shift and leave it, and then click the magic wand tool, you can add the part of the content to the existing selection.

Next, press the shortcut Ctrl + Shift + I to reverse the selection, and then press Ctrl + J to reverse the selection of the island, trees, boats, etc. copy to a new layer, the layer renamed “fishing island. Now the river and fishing island layers are shown below, where the square indicates a transparent area, without any color (Figure 3, Figure 4).


Figure 3 Separated river surface layers


Figure 4 Separate out the island, trees and boats

Duplicate them with the Stamp tool and fill in the blank areas of the river with a single color of water and place them underneath as a large background.

Make two more copies of the fishing island layer and rename them “foreground trees” and “boats” respectively. The next operation is relatively simple, in the fishing island layer, in addition to the fishing island, all the other elements are erased with the eraser tool, the boat layer in addition to the boat all the other elements erased, and so on.

Finally, we should pay attention to the order of the layers, in this case, from top to bottom are the fishing island, foreground trees, boats and the river (Figure 5).


Figure 5 Layering and sorting of layers

Static state painting into a motion picture

Photoshop comes with a professional animation tool. Click the menu “Window→Animation” command, the animation pane will appear at the bottom of the main interface, and there is already a frame by default. The first frame, we will be the river, foreground trees, boats and fishing island of the four layers are selected, let them all show. The next operation is to expand the boat layer and make it move in the direction of the red arrow (Figure 6).


Figure 6 Planning the path of the boat’s movement

Click the “Copy Selected Frame” button at the bottom of the animation pane to create a new frame in which we move the boat to the back of the foreground trees and rotate the boat slightly (Figure 7).


Figure 7 Displacement operation for the boat

At this point we have created two frames, click the play button below the animation pane, you can see that the boat really moves, but the flash is too fast and unnatural. So we need to add some transition frames between these two keyframes. Select the second frame, click the “Transition Animation Frame” button below (the icon of multiple small squares connected into a line), set the number of frames in the pop-up dialog box, click “OK” and a series of transition frames will be generated automatically. Now click Play again and the effect will be more natural (Figure 8).


Figure 8 Create transition frames automatically

Tip: The more transition frames you have, the smoother the animation will be, but the bigger the final animation file will be. On the contrary, the less transition frames, the smaller the animation file will be, but the animation effect will be more rigid.

If the boat is not moving forward in a straight line, you can set more keyframes and then add transition frames in the middle of each keyframe. After setting, click play and feel satisfied with the effect, you can press Ctrl+Shift+Alt+S to store the animation in GIF format (Figure 9). Because we have layered the image, the boat will go around from the back of the foreground trees, very three-dimensional. For those who are interested, try it too.

Leave a Comment