PhotoshopGIF animation Getting Started Tutorial simple animation production method-PS tutorial

Animation is formed because the human eye has the feature of vision temporarily. The so-called vision temporarily means that after seeing an object, the object quickly disappears, and a certain duration of continuous image remains in the eyes, this is especially evident when the object is brighter.


Introduction:
Animation is formed because the human eye has the feature of vision temporarily. The so-called vision temporarily means that after seeing an object, the object quickly disappears, and a certain duration of continuous image remains in the eyes, this is especially evident when the object is brighter. The most common method is to use a flashlight when taking a photo at night. Although the flashlight has been out, the photo still has a halo in the eyes of the person who is taking the photo for a period of time.


For the earliest application of this feature, we may have done it in elementary school, that is, to draw a lot of actions on the footer of the textbook, and then quickly flip to achieve continuous images in the eyes, this is an animation. It should be noted that the animation here does not refer to Cartoon Cartoons. Although the cartoon animation works in the same way, the animation here refers to all continuous images.


In summary, the so-called animation is to use multiple static images for continuous playback, and use the vision to temporarily form continuous images. For example, a traditional film uses a long string to continuously record the film of a single image, and projects the film to the screen at a certain speed. Here is a speed requirement. imagine if we slowly flip the textbook, we will only feel multiple static images rather than continuous images. The same is true for playing movies. if the speed is too slow, what the audience sees will be a rotating slide. To make the audience feel the continuous image, the video is played at a speed of 24 images per second, that is, 24 static images are shot continuously on the screen within one second. The unit of animation playback speed is fps, where f is the English word Frame (screen, Frame), p is Per (Per), and s is Second (seconds ). The number of frames per second or per second in Chinese. A movie is 24 fps, usually referred to as 24 fps.


Other devices that can produce images in real life also have the concept of frame speed, such as television signals. the PAL system used in China and Europe is 25 frames, the NTSC standard used in Japan and America is 29.97 frames. If an animation is played on a computer, 15 frames can be used to play continuous images. In this way, when making videos, you need to determine the devices on which the videos will be published to set different frame rates.


The recognition accuracy of human eyes is much higher than the above frame rates, because the visual system of human eyes and brain is very developed. The film has different sensitivity levels based on different environments. for example, in a dark environment, for a longer period of time, the film only needs 24 frames. By the way, only the eyes of a few animals can surpass humans in some ways, but there are also serious defects in other aspects. For example, the "King of details" e is color blind, and the eyes of the "King of Night Vision" owl are fixed. you must turn your head to observe the surroundings.


In our previous courses, Photoshop was used to make static images, such as posters and printed documents. we mentioned that Photoshop is capable of animation production. Now we want to create an animation composed of multiple frames in Photoshop. Extend a single image to multiple images. And create an image continuity in these multiple images to make the animation shape.


Nowadays, many animations made using Flash can be accompanied by dubbing and interactivity, making the whole animation more vivid. The animation produced by Photoshop can only be called a simple animation. this is mainly because it only has a picture and cannot add sound, and the audience can only watch it in a fixed way. However, simplicity does not mean simplicity. although the former provides more production and performance methods, the latter still has its own unique advantages, layer style animations can easily make exquisite animation details that are hard to implement by other software. Furthermore, painting on the same paper is very simple, but the quality of different people is also different. Therefore, excellent animations do not necessarily require complex technologies. what is important is excellent creativity.


No matter which software they are, their production principles are the same, just like the RGB color pattern we used to study hard, where they can be applied. Therefore, our current task is to use the basic Photoshop knowledge we have learned to extend it to animation production and learn the general skills and methods of animation production. This knowledge can be applied to other aspects in the future. We will also introduce how to convert Photoshop animation into a video and add sound to it.


In addition to the differences in production, the use is also different. An animation is often placed in a certain area of a webpage to emphasize a certain content, such as an advertisement animation. This type of animation usually has a fixed size according to the placement, such as 468x60, 140x60, and 90x180. You can also apply animations to mobile phone MMS (a multimedia text message service that can send pictures, sounds, and videos ). These functions have their own characteristics. in addition to dimensions, there are other factors to consider. Such as the limit on the number of bytes and the frame stay time. We will explain it step by step in the tutorial.


Before the beginning of this tutorial, we require that you have learned the basics of Photoshop and understand concepts and operations such as adjusting layers and layers, for example, we only briefly describe how to create a curve adjustment layer, instead of explaining the principle in detail. Therefore, it is recommended that new readers learn the basic content first.


In addition, the Photoshop CS3 Extended version only provides the animation production function, which is not available for normal versions. CS2 provides the action creation function, which is similar to CS3 Extended. In CS and earlier versions, you need to use the bundled ImageReady software for animation production. We recommend that you use the same CS3 Extended version as the tutorial.


Since it is called an animation, it is to make the images on the screen move up. now let's create a simple and simple animation.

Create a blank image of 150 × 150, create a layer, and draw a rectangle, as shown in the left figure below. the layer palette is shown in the right figure below. We can see that this is a normal dot matrix layer. in actual operations, we should use vector layers as much as possible. we will also pay attention to this point in the subsequent tutorials. (Figure 01)



Figure 01


Use window _ animation to enable the animation board, as shown in the left figure below. At this time, the layer palette also has some more options, as shown in the red arrow on the right. If the animation board is disabled, it is restored to the original state. You do not need to pay attention to it here. In addition, the animation board is often combined with the measurement record board. The latter has nothing to do with our current content and can be closed. (Figure 02)



Figure 02


After enabling the animation board, we can start making the animation. in the animation board, click the "copy selected frame" button at the Red Arrow, A new frame is added. As shown in. According to our previous habits, this should be represented as a new building, such as a new layer. Although the literal explanation here is a copy, it is actually a new building, however, the newly added frame is actually the same content as the previous frame. Correspondingly, you should also want to get the button to delete the frame. (Figure 03)



Figure 03


Make sure that the animation board currently selects the copied 2nd frames, and then use the mobile tool to move the blocks in the layer to a certain distance, as shown in the left figure below. The animation board is shown in the following figure. We can see that although the position of the square has changed in the 2nd Frame, the position of the square in the original 1st frame remains unchanged. This is a very important feature.