Now we have learned many methods of making animations, but we are still not very clear about the final form of animation. How to output animation? Where is it used? What should we pay attention to during use? In this lesson we will explain these issues in detail.
Currently, the main animated image format on Windows systems is GIF, which can also be displayed directly on web pages. It is currently the most widely used animated image format. Including animations in the now popular mobile phone MMS messages also belong to the GIF format. The GIF format supports both still and animated expressions. Whether still or animated, the characteristics are the same.
The implementation principle of GIF format animation is not complicated. You can understand it as combining multiple still pictures (frames) to display in turn. There are also operational relationships between these pictures (frames), which are similar to the operations of any selected path, namely addition, subtraction and elimination. This is to optimize the byte count of the animation.
If a certain frame is added, the previous frame will be retained and the content of this frame will be added to form a new picture. For example, the common progress bar animation is a typical example, as shown in the figure below. Assume that a progress bar consists of 3 frames. In terms of the theoretical frame shape we see, it seems that the shortest and medium frames are stored in these 3 frames respectively. and the image of the longest progress bar. But in fact, the second frame only contains the pixels that are not in the first frame, and then acts on the first frame in an additive manner, forming a "1+2" image. Same goes for frame 3. This optimization effectively reduces the image byte count.
The subtraction method is just the opposite. It erases certain pixels in the previous frame of the image, which can be understood by the "reverse progress bar". The elimination method is to completely erase the previous frame. It is mainly used when there is no correlation between the two frames before and after. For example, when changing from all red to all green, if there are no pixels that are the same between the previous and next frames, the elimination method is used. .
In actual production, Photoshop will automatically decide which method to adopt based on the image situation, without manual intervention. It is enough to understand these calculation methods as a piece of knowledge. It can also be used as a reference when conceiving animations.
Now let’s talk about the following important feature of the GIF format, which is the limit on the number of colors. GIF can only support a maximum of 256 colors , which means that a GIF image can only have a maximum of 256 colors. This is especially obvious in static GIFs. Some images with rich colors, such as gradients of multiple colors, are difficult to perfectly express in GIFs. As shown in the left picture below, a part of a photo (note that it is a part, not the complete picture) is an image in PNG24-bit and GIF256 without dithering and diffusion dithering. The whole picture is a shop window taken in Venice, as shown below on the right.
It can be clearly seen that PNG24-bit has the best color and can be regarded as the original image. The GIF format has poor color expression. Without dithering, color spots appear in some areas with color transitions in the original image. Under diffusion dithering, the spots are somewhat lightened, but the graininess is heavier. This is caused by the principle of dithering itself. The concept of dithering has been introduced in the basic tutorial.
It should be noted that 256 colors refers to the entire image. If the entire original image is the size as shown below, the difference between the 256 colors and the original image is not very big. This is because when reducing the colors to 256 colors, Photoshop will arrange them according to the colors in the original image. This process is also called indexing, which is to group similar colors into one.
If the colors in the original image contain multiple hues, then when the 256 colors are averaged out, the number allocated to a single hue will be very small. On the contrary, if the hue in the original image is basically the same or close, 256 colors can also be expressed well. This is why the previous 256 non-imitation color looked like the spots were obvious, but now the spots are less obvious. Because the original image of the former contains more hues, some colors are assigned to blue, red, etc., and fewer colors are assigned to the yellow phase. The original image of the latter basically only has the yellow phase, so there is no need to assign colors to other hues.
The picture below is a street view photo taken in Piacenca. We compare different parts of it. The squares below are color tables, and the color blocks represent the 256 colors used. The impact of the color composition of the original image on the color index can be easily seen in the color table. There are more hues in the picture on the left, so the number of blue phases allocated to the sky among the 256 colors is smaller, and there are obvious color spots in the sky in the image. The picture on the right basically only contains the sky part, so most of the 256 colors are assigned to the blue phase, making the sky in the image perform better.
Use [File>Save for Web and Devices] [CTRL+SHIFT+ALT+S], and the save settings box will appear. This is our most commonly used output function, especially in the web design extension tutorials that we will learn in the future.
After entering the setting interface, pay attention to the red arrow. What you must see in the "Optimization" tab is the actual effect after output, that is, the effect in the browser or image viewing software. The "Original" tab is the effect in Photoshop and cannot be used as a reference standard. This should be remembered.
The green arrow is the corresponding setting area, from which we set the image format to GIF, set the number of colors to 256, and turn off the dither option. Its settings correspond to the effect on the left side of the picture above.
Pay attention to the byte count indication at the blue arrow, this is a very important indicator, whenever we must make this number as small as possible, otherwise we will not be able to use images or animations effectively.
To make the number of bytes smaller, the number of colors needs to be reduced, and the number of color blocks in the color table will be reduced accordingly. But it is obvious that too few colors will have a significant impact on image quality and can easily form color spots. Although turning on dithering can reduce color spots, it will also increase the number of bytes. It's like a seesaw between byte count and quality. You can't have both. For images that are intended to be transmitted over the Internet, the number of bytes is often more important because most visitors will not have the patience to wait for several minutes for a web page to be displayed. In addition to images, web pages also have other codes that also need to occupy bytes. Therefore, minimizing the number of bytes is a basic principle. Of course, this principle conflicts with image quality, which requires us to have enough skills to balance the two in the process of conception and production. These techniques include:
1. Don’t use too rich colors in animation. The reason has already been mentioned. More colors will lead to a decrease in image quality after indexing and form unsightly color spots. In this case, it is better to use a single color. Although it may not be gorgeous enough, at least it can avoid the appearance of flaws such as stains.
2. If rich colors are necessary, the pixels in the richly colored parts should be kept stationary in the animation. Because there is an operational relationship between the previous and next frames of the GIF animation, the part in the still state can be used in subsequent frames, and there is no need to store this part of the image in those subsequent frames. This can effectively reduce the number of bytes while maintaining the rich color of the entire animation. On the contrary, if the richer pixels are also moving, then the richer pixels must be stored in subsequent frames, which will greatly increase the overall byte count of the animation.
Comparison of the two animations below. The first one keeps the outer glow, projection and other parts of the ball unchanged, and only the highlight part changes. The second one is the overall movement of the ball. Under the premise of the same frame rate, the same duration, and both 256 and no dithering, the number of bytes of the former is 9.29K, and that of the latter is 57.1K. The difference is as much as 6 times. Then the time it takes for them to be transmitted on the network will differ by 6 times.
When we conceive animation, we must consider its purpose in advance. If it is to be used in a web page, we must also refer to its importance in the web page. If it is not very important and is decorative, try to reduce the bytes as much as possible. number. This can be achieved from two aspects: reducing the number of colors during storage and good production planning. If you encounter an animation with important instructions that must be colorful or dynamic, you should reduce the size of the animation as much as possible. Because the total number of pixels in a small-sized image is also small, indexing with 256 colors will not appear so cramped. You can learn this through your own experiments.
Another important feature of GIF is that it supports background transparency , which allows it to blend well with the background of the web page. You can also output a GIF with a transparent background by turning off the background layer. However, the background transparency of GIF can only be in two states, either fully transparent or fully opaque, but not translucent in between. Therefore, unless the boundaries of the image are horizontal, vertical, or 45-degree diagonal lines, obvious aliasing will be formed due to transparency. As shown in the figure below, a set of graphics with different boundaries appears under different background colors. It is not difficult to see the difference between the two.
It should be noted that the formation principle of edge jaggedness is not just an image problem, but also factors related to the physical limitations of the display. The relevant knowledge is mentioned in the basic tutorial.
For images with semi-transparent pixels (such as drop shadow styles), if you want to save it as a transparent background, you need to turn on the transparency dithering project, so that tiny scattered points with different density can be used to simulate translucency. As shown in the figure below. It can be seen that although the GIF under "No Transparency Dithering" also has a transparent background, the original translucent part still retains white, so it can only be applied to a white background. The latter can be applied to any background. As shown below on the right.
It should be noted that transparency dithering is not a perfect solution, it can even be said to be a very poor solution. But due to the limitations of transparency of GIF itself, it is also a solution. In actual production, if you decide to use the GIF format, you should avoid generating semi-transparent pixels at the boundaries of the image. In other words, try to avoid using transparency dithering.
Another thing to note is that if the output animation has a transparent background, it may change the calculation relationship of each frame in the non-transparent state, and may also cause the number of bytes of the animation to increase.
Now let’s briefly talk about the use of animations as MMS messages on mobile phones.
China Mobile currently allows a maximum of 100K MMS messages. It is best to control animations below 95K and leave some space for text and the code of the SMS itself. Another thing to note is the size of the animation. Different models of mobile phones have different sizes of animations that can be perfectly displayed due to their different screen resolutions. The so-called perfect display means that the mobile phone screen resolution is the same as or larger than the animation size. If the size of the animation exceeds the resolution of the mobile phone screen, the mobile phone will reduce it for display. But the quality of the reduced animation will become very poor. Common screen sizes are:
128×128: Common on early and current low-end mobile phones. It is the basic size of MMS animations. Most MMS animations downloaded from the Internet are of this size because it can run on almost all mobile phones that support MMS.
128×160: Although it has a few more pixels than the previous one, it is mainly used to display some information, so most of the animation sizes that can be run are still 128×128.
176×208, 240×320: Commonly used in mobile phones with open operating systems such as Symbian and Windows Mobile, and can play full-screen animations. There are also ordinary mobile phones that use this resolution, but it is not certain whether they can support full-screen playback.
480×640: Common in high-end mobile phone models. Although it can theoretically support full-screen playback of animations of the same size, due to the limitations of GIF itself, the smoothness of playback is not guaranteed.
When making MMS animations, 128×128 should be the primary size to consider, because it has the best compatibility, and due to its small size, the number of animation bytes for the same content is smaller than that of larger sizes. Of course, if the receiver's screen resolution is determined, it can also be made in a size comparable to it. The background of the animation is best white so that there is no obvious border. Because white is also the background color when mobile phones display MMS messages, just like the background of web pages. Of course, sometimes it is necessary to deliberately create a sense of boundary (such as the outline of a seal). You can make your own decision based on the specific situation. In addition, because most mobile phones cannot change the background when displaying MMS messages, it makes little sense to use a transparent background in the animation of MMS messages.
There is a "Device Central..." button in the lower right corner of "Save for Web and Devices". After pressing it, you can preview the effect of the animation on the selected mobile phone device. As shown below. You can select it from the device list on the left. The one selected in the picture is Nokia 3110. Adobe Device Central is actually a mobile device database that provides a centralized environment for those who produce for mobile devices. In addition to ordinary display, it can also simulate the display situation when the backlight of the mobile phone screen is turned off, and the outdoor screen is backlit. However, these features are currently of little significance to us at the moment.
Another issue to pay attention to is the frame rate of the animation. On a computer, animations at 30fps can basically be played smoothly, but the processor of a mobile phone is no better than a desktop computer, and its resources are limited. The frame rate of animation should be set to 2~5fps. For mobile phones with open operating systems, because their processor performance is better than ordinary mobile phones, it can be set to 10fps or higher. At the same time, factors such as size, total duration, number of bytes, etc. also affect the playback effect on mobile phones. It is best to try out the animation on your mobile phone to see how smooth it is.
If you want to output animations of multiple different sizes, it is best to use vector format for production, and vector format is also the best format to save the original image, in line with the principle of "preserving maximum editability" that we have always advocated.