A series of tutorials on creating plane animation in Photoshop CS3 (1): Overview.
The principle of animation formation is that the human eye has the characteristic of persistence of vision. The so-called persistence of vision means that after seeing an object, even if the object disappears quickly, it will still leave a continuous image in the eyes for a certain period of time. This is true when the object is relatively bright. It is especially obvious in the case of . The most common thing is to use flash when taking pictures at night. Although the flash has long been extinguished, the halo will still remain in the eyes of the subject and last for a period of time.
The earliest application of this feature may have been done by us when we were in elementary school. It was to draw the movements of many characters on the footer of the textbook, and then quickly flip through it to achieve continuous images in the eyes. This is animation. It should be noted that the animation here does not refer to cartoon animation. Although the production principles of cartoon animation are the same, the animation here generally refers to all continuous images.
To sum up, the so-called animation is to use multiple still pictures to play continuously and use persistence of vision to form a continuous image. For example, traditional movies use a long series of films to continuously record single frames, and project them onto the screen with lights in sequence at a certain speed. There is a speed requirement here. Imagine if we slowly flip through the textbook, we will only experience multiple still images instead of continuous images. The same is true for playing movies. If the speed is too slow, what the audience sees is equivalent to a rotating slideshow. In order to allow the audience to experience continuous images, the movie is played at a speed of 24 frames per second, that is, 24 still images are continuously projected on the screen in one second. The unit for animation playback speed is fps, where f is the English word Frame (picture, frame), p is Per (per), and s is Second (second). In Chinese, it means how many frames per second, or how many frames per second. Movies are 24fps, often referred to as 24 frames.
Other devices that can produce images in real life also have the concept of frame rate, such as TV signals. The PAL format used in China and Europe is 25 frames, and the NTSC format used in Japan and the Americas is 29.97 frames. If the animation is played on a computer monitor, 15 frames can achieve the effect of continuous images. In this way, when you make videos in the future, you have to think about what device to publish them on and set different frame rates.
The recognition accuracy of the human eye is actually much higher than the above frame rates, because the visual system composed of the human eye and the brain is very developed. It just has different sensitivity levels depending on the environment. For example, in a dark environment, the visual persistence time of brighter light sources is longer, so the movie only requires 24 frames. By the way, as an aside, only a few animals have eyes that surpass humans in some aspects, but all of them are seriously deficient in other aspects. For example, the eagle, the "King of Details", is color blind, while the owl, the "King of Night Vision", has fixed eyes and has to turn its head to observe its surroundings.
In the Photoshop design tutorials we watched in Tianji Design Online, Photoshop is mostly used to create static images such as posters and printed manuscripts. We mentioned that it has the ability to produce animations. Now we are going to create an animation composed of multiple frames in Photoshop. Expand a single screen to multiple screens. And create a kind of image continuity among these multiple scenes to give shape to the animation.
Nowadays, many animations produced using Flash can come with dubbing and interactivity, making the entire animation more vivid. The animation produced by Photoshop can only be called simple animation, mainly because it only has pictures and cannot add sound, and the audience can only watch it in a fixed way. But simplicity does not mean crudeness. Although the former provides more production and expression methods, the latter still has its own unique advantages. For example, layer style animation can easily create some beautiful things that are difficult to achieve with other software. Animation details. Furthermore, just as drawing on paper is a very simple act, different people draw differently. Therefore, excellent animation does not necessarily require complex technology, what is important is excellent creativity.
No matter which software it is, their production principles are the same, just like the RGB color mode we have studied so hard, it can be applied everywhere. So our current task is to use the basic knowledge of Photoshop that we have learned, extend it to animation production, and learn the general skills and methods of animation production. This knowledge can still be applied to other aspects later. And we will also introduce how to convert Photoshop animations to videos and add sound to them.
In addition to differences in production, there are also differences in usage. Animations are often placed in a certain area of a web page to emphasize certain content, such as advertising animations. This kind of animation usually has corresponding fixed sizes according to different placement locations, such as 468x60, 140x60, 90x180, etc. Animation can also be applied to mobile phone MMS (a multimedia text message service that can send pictures, sounds, and videos). Each of these uses has its own characteristics, and there are other factors to consider besides size. Such as the limit on the number of bytes, frame dwell time, etc. We will explain it step by step in the tutorial.
Note: Before starting this series of tutorials, we require readers to have learned the basics of Photoshop, understand and master concepts and operations such as adjustment layers, layer styles, etc., such as "How to create a curve adjustment layer" and so on. Only a brief introduction to the operation will be given, and the principles will not be explained in detail. Therefore, it is recommended that new readers learn the basics first.
In addition, only the Photoshop CS3 Extended (extended) version has the animation production function, which is not available in the ordinary version. The CS2 version comes with action creation functions, and the operation is similar to CS3 Extended. CS and earlier versions require the bundled ImageReady software for animation production. It is recommended that you use the same CS3 Extended version as the tutorial.
Since it is called animation, it means to make the images in the screen move. Let's actually draw and create a "simple and crude" animation now.
Create a new blank image of 150×150, create a new layer and draw a rectangle, roughly as shown on the left below, and the layer palette as shown on the right. It can be seen from this that this is an ordinary lattice layer. You should use vector layers as much as possible in actual operations. We will also pay attention to this in the following tutorials.
Open the animation palette through [Window_Animation], as shown in the left picture below. At this time, there are also some more options in the layer palette, as shown by the red arrow in the right picture below. If you close the Animation palette, it will be restored to its original state. Don't worry about it for now. In addition, the animation palette is often combined with the measurement record palette. The latter has nothing to do with our current content and can be turned off.
After opening the animation palette, we can start making animations. Click the "Copy Selected Frame" button at the red arrow in the animation palette. 
, you will see a new frame added. As shown below. According to our previous habits, this icon should represent a new one, such as a new layer, etc. Although the literal explanation here is copy, it is actually a new one, but the newly added frame is actually the same as the previous frame. Same content. Correspondingly, everyone should be able to imagine 
The function of the button is to delete the frame.
Make sure that the copied 2nd frame is currently selected in the animation palette, and then use the move tool to move the square in the layer a certain distance, roughly as shown in the left picture below. At this time, the animation palette is as shown in the middle picture below. It can be seen that although the position of the block has changed in frame 2, the position of the block in frame 1 remains unchanged. This is a very important feature.
Repeat this operation of first copying the frame and then moving the block several times, and finally you will get something like the picture on the right below (similar to this). Now we have 7 frames, and the blocks are in different positions in each frame. Pay attention to the sentence "The position of the squares in each frame is different", and then look at the layer palette. It is obvious that only one layer exists (the background layer is not counted for the time being), which leads to a feature: for one layer Say, its position (or coordinates) can be specified individually in different frames. According to this feature, we can animate the movement of objects using just one layer.
Now you can press the play button in the animation palette 
, you can see the effect of the box moving in the image window, but it moves very fast. This is because the frame delay time is not set. Note that there is now a "0 seconds" below each frame in the animation palette. This is the frame delay time (or dwell time). The frame delay time indicates how long the frame is displayed during the animation. For example, if the delay of a certain frame is set to 2 seconds, then when this frame is played, it will stay for 2 seconds before continuing to play the next frame. The delay defaults to 0 seconds, and the delay can be set independently for each frame.
The method to set the frame delay is to click on the time below the frame and select the corresponding time in the pop-up list. As shown in the left picture below, set frame 7 to 0.5 seconds. "No delay" in the list is 0 seconds. If there is no time you want to set, you can select "Other" and enter the value yourself (in seconds). You can also modify the delay uniformly after selecting multiple frames. The method of selecting multiple frames is the same as selecting multiple layers. First click on frame 1 in the animation palette to select it, then hold down the SHIFT key and click on frame 6. Just select frames 1 to 6. Then set the time zone of any frame, as shown in the right picture below, set to 0.1 seconds. This is a more commonly used delay time.
Play the animation again and you will see that the block moves slower and stays for a longer time at the end of the movement. Obviously, this is due to the long delay it was set to. This long delay actually plays a prominent role, and this feature can be used to highlight a certain theme in actual production. We will also find time to introduce some expression techniques in subsequent tutorials.
In addition to the delay time, another feature of animation is that you can set the number of playback loops. Note that there is a "forever" under the first frame of the animation palette, which is the number of loops. After clicking, you can choose "once" or "forever", or set the number of cycles yourself. Then play the animation again to see the effect of the loop number setting.
Although in most cases animations loop continuously (that is, forever), single or a few times (2 to 3 times) loops are also used in some places, mainly when using animation to create web components. when. For example, animate the name of a column from scratch to gradually appear, so that when the name is fully displayed, it should be fixed, and cannot disappear again and then fade in again. At this time, it is necessary to use the "once" cycle setting.
Press 〖CTRL+S〗[File>Save] to save the animation settings, and the file format is psd. This file format is proprietary to Photoshop and can record all relevant information. It is recommended that everyone save their works in this format to facilitate future modifications. If you need an independent animation file that can be used on web pages, you need to use [CTRL+ALT+SHIFT+S] [File>Save for Web and Devices], and a large window will appear as shown on the left below. This large window has a lot to cover. But now you only need to refer to the settings in the red arrow area.
At the same time, a play button and loop options will appear in the green arrow area at the bottom right of the window. Changing the number of loops here will also change the settings in the source file. Note that if no GIF is selected within the red arrow area, the play button is unavailable. This is because only the GIF format supports animation. If you forcibly save it to other formats such as JPG or PNG, the generated image will only have the first frame.
During the storage process, the warning message as shown on the right below may appear. Don't ignore it and just confirm. You can also make it invisible again. However, everyone should pay attention to using half-width English or numbers when naming files, and do not use full-width characters or Chinese characters. This is to be more widely compatible with browsers of various languages.
In this chapter, what everyone needs to master are two attributes of animation, namely frame delay time and number of loops. In addition, you need to master the methods of making simple object displacement animations such as "copying frames and moving layers". And use this method to create an animation with the displacement of two objects at the same time. The effect is similar to the picture below.
In the next section we introduce the second part: the propagation characteristics of the first frame.