Nous avons maintenant appris de nombreuses méthodes pour créer des animations, mais nous ne sommes toujours pas très clairs sur la forme finale de l'animation. Comment sortir une animation ? Où est-il utilisé ? À quoi faut-il faire attention lors de l'utilisation ? Dans cette leçon, nous expliquerons ces problèmes en détail.
Actuellement, le principal format d'image animée sur les systèmes Windows est le GIF, qui peut également être affiché directement sur les pages Web. Il s'agit actuellement du format d'image animée le plus utilisé. L'inclusion d'animations dans les désormais populaires messages MMS sur téléphone portable appartient également au format GIF. Le format GIF prend en charge les expressions fixes et animées. Qu'il soit fixe ou animé, les caractéristiques sont les mêmes.
Le principe de mise en œuvre de l'animation au format GIF n'est pas compliqué. Vous pouvez le comprendre comme la combinaison de plusieurs images fixes (images) à afficher tour à tour. Il existe également des relations opérationnelles entre ces images (trames), qui sont similaires aux opérations de tout chemin sélectionné, à savoir l'addition, la soustraction et l'élimination. Il s'agit d'optimiser le nombre d'octets de l'animation.
Si un certain cadre est ajouté, le cadre précédent sera conservé et le contenu de ce cadre sera ajouté pour former une nouvelle image. Par exemple, l'animation courante de la barre de progression est un exemple typique, comme le montre la figure ci-dessous. Supposons qu'une barre de progression se compose de 3 images. En termes de forme d'image théorique que nous voyons, il semble que les images les plus courtes et moyennes soient stockées. dans ces 3 images respectivement et l'image de la barre de progression la plus longue. Mais en fait, la deuxième image ne contient que les pixels qui ne sont pas dans la première image, et agit alors sur la première image de manière additive, formant une image « 1+2 ». Il en va de même pour l'image 3. Cette optimisation réduit efficacement le nombre d'octets de l'image.
La méthode de soustraction est tout le contraire : elle efface certains pixels de l'image précédente de l'image, ce qui peut être compris par la « barre de progression inversée ». La méthode d'élimination consiste à effacer complètement l'image précédente. Elle est principalement utilisée lorsqu'il n'y a pas de corrélation entre les deux images avant et après. Par exemple, lors du passage du rouge au vert, s'il n'y a pas de pixels identiques entre eux. les images précédentes et suivantes, la méthode d'élimination est utilisée.
En production réelle, Photoshop décidera automatiquement quelle méthode adopter en fonction de la situation de l’image, sans intervention manuelle. Il suffit de comprendre ces méthodes de calcul comme une connaissance. Il peut également servir de référence lors de la conception d’animations.
Parlons maintenant de la caractéristique importante suivante du format GIF, à savoir la limite du nombre de couleurs. GIF ne peut prendre en charge qu'un maximum de 256 couleurs , ce qui signifie qu'une image GIF ne peut avoir qu'un maximum de 256 couleurs. Cela est particulièrement évident dans les GIF statiques. Certaines images aux couleurs riches, telles que les dégradés de plusieurs couleurs, sont difficiles à exprimer parfaitement dans les GIF. Comme le montre l'image de gauche ci-dessous, une partie d'une photo (notez qu'il s'agit d'une partie et non de l'image complète) est une image au format PNG24 bits et GIF256 sans tramage ni tramage de diffusion. L'image entière est une vitrine prise à Venise, comme indiqué ci-dessous à droite.
On voit clairement que PNG24 bits a la meilleure couleur et peut être considéré comme l’image originale. Le format GIF a une mauvaise expression des couleurs. Sans tramage, des taches de couleur apparaissent dans certaines zones avec des transitions de couleurs dans l'image originale. Lors du tramage par diffusion, les taches sont quelque peu éclaircies, mais le grain est plus lourd. Cela est dû au principe du tramage lui-même. Le concept de dithering a été introduit dans le didacticiel de base.
Il convient de noter que 256 couleurs font référence à l’ensemble de l’image. Si l’intégralité de l’image originale a la taille indiquée ci-dessous, la différence entre les 256 couleurs et l’image originale n’est pas très grande. En effet, lors de la réduction des couleurs à 256 couleurs, Photoshop les organisera en fonction des couleurs de l'image d'origine. Ce processus est également appelé indexation, qui consiste à regrouper les couleurs similaires en une seule.
Si les couleurs de l'image originale contiennent plusieurs teintes, alors lorsque la moyenne des 256 couleurs est calculée, le nombre attribué à une seule teinte sera très petit. Au contraire, si la teinte de l’image originale est fondamentalement la même ou proche, 256 couleurs peuvent également être bien exprimées. C'est pourquoi les 256 précédentes couleurs sans imitation semblaient avoir des taches évidentes, mais maintenant les taches sont moins évidentes. Étant donné que l'image originale de la première contient plus de teintes, certaines couleurs sont attribuées au bleu, au rouge, etc., et moins de couleurs sont attribuées à la phase jaune. L’image originale de ce dernier n’a essentiellement que la phase jaune, il n’est donc pas nécessaire d’attribuer des couleurs à d’autres teintes.
L'image ci-dessous est une photo de rue prise à Piacenca. Nous en comparons différentes parties. Les carrés ci-dessous sont des tables de couleurs et les blocs de couleurs représentent les 256 couleurs utilisées. L’impact de la composition des couleurs de l’image originale sur l’index des couleurs est facilement visible dans la table des couleurs. Il y a plus de teintes dans l'image de gauche, donc le nombre de phases bleues allouées au ciel parmi les 256 couleurs est plus petit, et il y a des taches de couleur évidentes dans le ciel de l'image. L'image de droite ne contient essentiellement que la partie du ciel, donc la plupart des 256 couleurs sont attribuées à la phase bleue, ce qui améliore les performances du ciel dans l'image.
Utilisez [Fichier> Enregistrer pour le Web et les appareils] [CTRL + MAJ + ALT + S] et la boîte de dialogue des paramètres d'enregistrement apparaîtra. Il s'agit de notre fonction de sortie la plus couramment utilisée, en particulier dans les didacticiels d'extension de conception Web que nous apprendrons à l'avenir.
Après être entré dans l'interface de configuration, faites attention à la flèche rouge. Ce que vous devez voir dans l'onglet « Optimisation » est l'effet réel après la sortie, c'est-à-dire l'effet dans le navigateur ou le logiciel de visualisation d'images. L'onglet "Original" est l'effet dans Photoshop et ne peut pas être utilisé comme standard de référence.
La flèche verte est la zone de configuration correspondante, à partir de laquelle nous définissons le format d'image sur GIF, définissons le nombre de couleurs sur 256 et désactivons l'option de tramage. Ses réglages correspondent à l'effet sur le côté gauche de l'image ci-dessus.
Faites attention à l'indication du nombre d'octets sur la flèche bleue, c'est un indicateur très important, chaque fois que nous devons rendre ce nombre aussi petit que possible, sinon nous ne pourrons pas utiliser efficacement les images ou les animations.
Pour réduire le nombre d'octets, le nombre de couleurs doit être réduit et le nombre de blocs de couleur dans la table des couleurs sera réduit en conséquence. Mais il est évident qu’un manque de couleurs aura un impact significatif sur la qualité de l’image et peut facilement former des taches de couleur. Bien que l’activation du tramage puisse réduire les taches de couleur, cela augmentera également le nombre d’octets. C'est comme une bascule entre le nombre d'octets et la qualité. Vous ne pouvez pas avoir les deux. Pour les images destinées à être transmises sur Internet, le nombre d'octets est souvent plus important car la plupart des visiteurs n'auront pas la patience d'attendre plusieurs minutes qu'une page web s'affiche. En plus des images, les pages Web contiennent également d'autres codes qui doivent également occuper des octets. Par conséquent, minimiser le nombre d'octets est un principe de base. Bien entendu, ce principe entre en conflit avec la qualité de l’image, qui nécessite de disposer de suffisamment de compétences pour équilibrer les deux dans le processus de conception et de production. Ces techniques comprennent :
1. N'utilisez pas de couleurs trop riches dans l'animation. La raison a déjà été évoquée. Un plus grand nombre de couleurs entraînera une diminution de la qualité de l'image après l'indexation et formera des taches de couleur disgracieuses. Dans ce cas, il est préférable d’utiliser une seule couleur, même si elle n’est peut-être pas assez belle, elle peut au moins éviter l’apparition de défauts tels que des taches.
2. Si des couleurs riches sont nécessaires, les pixels des parties richement colorées doivent rester stationnaires dans l'animation. Puisqu'il existe une relation opérationnelle entre les images précédentes et suivantes de l'animation GIF, la partie à l'état fixe peut être utilisée dans les images suivantes, et il n'est pas nécessaire de stocker cette partie de l'image dans ces images suivantes. Cela peut réduire efficacement le nombre d'octets tout en conservant la richesse des couleurs de l'ensemble de l'animation. Au contraire, si les pixels les plus riches bougent également, alors les pixels les plus riches doivent être stockés dans les images suivantes, ce qui augmentera considérablement le nombre global d'octets de l'animation.
Comparaison des deux animations ci-dessous. La première conserve la lueur extérieure, la projection et les autres parties de la balle inchangées, et seule la partie en surbrillance change. Le deuxième est le mouvement global du ballon. En partant du principe de la même fréquence d'images, de la même durée et des deux 256 et sans tramage, le nombre d'octets du premier est de 9,29 Ko et celui du second est de 57,1 Ko. La différence peut atteindre 6 fois. Ensuite, le temps nécessaire à leur transmission sur le réseau sera 6 fois différent.
Lorsque nous concevons une animation, nous devons réfléchir à l'avance à sa finalité. Si elle doit être utilisée dans une page Web, il faut également faire référence à son importance dans la page Web. Si elle n'est pas très importante et est décorative, essayez d'en réduire l'importance. nombre d'octets autant que possible. Ceci peut être réalisé sous deux aspects : la réduction du nombre de couleurs pendant le stockage et une bonne planification de la production. Si vous rencontrez une animation avec des instructions importantes qui doivent être colorées ou dynamiques, vous devez réduire au maximum la taille de l'animation. Étant donné que le nombre total de pixels dans une image de petite taille est également faible, l'indexation avec 256 couleurs ne semblera pas si restreinte. Vous pouvez l’apprendre grâce à vos propres expériences.
Une autre caractéristique importante du GIF est qu'il prend en charge la transparence de l'arrière-plan , ce qui lui permet de bien se fondre dans l'arrière-plan de la page Web. Vous pouvez également générer un GIF avec un arrière-plan transparent en désactivant le calque d'arrière-plan. Cependant, la transparence d'arrière-plan du GIF ne peut être que dans deux états, soit entièrement transparent, soit entièrement opaque, mais pas translucide entre les deux. Par conséquent, à moins que les limites de l’image ne soient des lignes horizontales, verticales ou diagonales de 45 degrés, un crénelage évident se formera en raison de la transparence. Comme le montre la figure ci-dessous, un ensemble de graphiques avec des limites différentes apparaît sous différentes couleurs d'arrière-plan. Il n'est pas difficile de voir la différence entre les deux.
Il convient de noter que le principe de formation des irrégularités des bords n'est pas seulement un problème d'image, mais également des facteurs liés aux limitations physiques de l'écran. Les connaissances pertinentes sont mentionnées dans le didacticiel de base.
Pour les images avec des pixels semi-transparents (tels que les styles d'ombre portée), si vous souhaitez les enregistrer comme arrière-plan transparent, vous devez activer le projet de tramage de transparence, afin que de minuscules points dispersés avec une densité différente puissent être utilisés pour simuler la translucidité. . Comme le montre la figure ci-dessous. On peut voir que bien que le GIF sous « Pas de tramage de transparence » ait également un fond transparent, la partie translucide d'origine conserve toujours le blanc, elle ne peut donc être appliquée que sur un fond blanc. Ce dernier peut être appliqué à n’importe quel arrière-plan. Comme indiqué ci-dessous à droite.
Il convient de noter que le tramage de transparence n'est pas une solution parfaite, on peut même dire que c'est une très mauvaise solution. Mais en raison des limites de transparence du GIF lui-même, c'est aussi une solution. En production réelle, si vous décidez d'utiliser le format GIF, vous devez éviter de générer des pixels semi-transparents aux limites de l'image. En d’autres termes, essayez d’éviter d’utiliser le tramage de transparence.
Une autre chose à noter est que si l'animation de sortie a un arrière-plan transparent, cela peut modifier la relation de calcul de chaque image dans l'état non transparent et peut également entraîner une augmentation du nombre d'octets de l'animation.
Parlons maintenant brièvement de l’utilisation des animations comme messages MMS sur les téléphones mobiles.
China Mobile autorise actuellement un maximum de 100 000 messages MMS. Il est préférable de contrôler les animations en dessous de 95 000 et de laisser un peu d'espace pour le texte et le code du SMS lui-même. Une autre chose à noter est la taille de l'animation. Différents modèles de téléphones mobiles ont différentes tailles d'animations qui peuvent être parfaitement affichées en raison de leurs différentes résolutions d'écran. L'affichage dit parfait signifie que la résolution de l'écran du téléphone mobile est identique ou supérieure à la taille de l'animation. Si la taille de l'animation dépasse la résolution de l'écran du téléphone mobile, celui-ci la réduira pour l'affichage. Mais la qualité de l'animation réduite deviendra très mauvaise. Les tailles d'écran courantes sont :
128 × 128 : Fréquent sur les téléphones mobiles bas de gamme anciens et actuels. Il s'agit de la taille de base des animations MMS. La plupart des animations MMS téléchargées sur Internet sont de cette taille car elles peuvent fonctionner sur presque tous les téléphones mobiles prenant en charge le MMS.
128×160 : Bien qu’il ait quelques pixels de plus que le précédent, il est principalement utilisé pour afficher certaines informations, donc la plupart des tailles d’animation pouvant être exécutées sont toujours de 128×128.
176 × 208, 240 × 320 : Couramment utilisé dans les téléphones mobiles dotés de systèmes d'exploitation ouverts tels que Symbian et Windows Mobile, et peut lire des animations en plein écran. Il existe également des téléphones mobiles ordinaires qui utilisent cette résolution, mais il n'est pas certain qu'ils puissent prendre en charge la lecture en plein écran.
480 × 640 : courant dans les modèles de téléphones mobiles haut de gamme. Bien qu'il puisse théoriquement prendre en charge la lecture en plein écran d'animations de même taille, en raison des limitations du GIF lui-même, la fluidité de la lecture n'est pas garantie.
Lors de la création d'animations MMS, 128 × 128 doit être la taille principale à prendre en compte, car elle offre la meilleure compatibilité et, en raison de sa petite taille, le nombre d'octets d'animation pour le même contenu est inférieur à celui des tailles plus grandes. Bien entendu, si la résolution de l'écran du récepteur est déterminée, celui-ci peut également être réalisé dans une taille comparable à celle-ci. Il est préférable que l'arrière-plan de l'animation soit blanc afin qu'il n'y ait pas de bordure évidente. Car le blanc est aussi la couleur de fond lorsque les téléphones portables affichent des messages MMS, tout comme le fond des pages Web. Bien sûr, il est parfois nécessaire de créer délibérément une impression de limite (comme le contour d'un sceau). Vous pouvez prendre votre propre décision en fonction de la situation spécifique. De plus, étant donné que la plupart des téléphones mobiles ne peuvent pas modifier l'arrière-plan lors de l'affichage des messages MMS, cela n'a pas de sens d'utiliser un arrière-plan transparent dans l'animation des messages MMS.
Il y a un bouton "Device Central..." dans le coin inférieur droit de "Enregistrer pour le Web et les appareils". Après avoir appuyé dessus, vous pouvez prévisualiser l'effet de l'animation sur le téléphone mobile sélectionné. Comme indiqué ci-dessous. Vous pouvez le sélectionner dans la liste des appareils sur la gauche. Celui sélectionné sur l'image est le Nokia 3110. Adobe Device Central est en fait une base de données pour appareils mobiles qui fournit un environnement centralisé à ceux qui produisent pour des appareils mobiles. En plus de l'affichage ordinaire, il peut également simuler la situation d'affichage lorsque le rétroéclairage de l'écran du téléphone portable est éteint et que l'écran extérieur est rétroéclairé. Cependant, ces caractéristiques n’ont pour l’instant que peu d’importance pour nous.
Un autre problème auquel il faut prêter attention est la fréquence d'images de l'animation. Sur un ordinateur, les animations à 30 ips peuvent être jouées en douceur, mais le processeur d'un téléphone mobile n'est pas meilleur qu'un ordinateur de bureau et ses ressources sont limitées. La fréquence d'images de l'animation doit être réglée sur 2 à 5 ips. Pour les téléphones mobiles dotés de systèmes d'exploitation ouverts, les performances de leur processeur étant meilleures que celles des téléphones mobiles ordinaires, elle peut être réglée sur 10 ips ou plus. Dans le même temps, des facteurs tels que la taille, la durée totale, le nombre d'octets, etc. affectent également l'effet de lecture sur les téléphones mobiles. Il est préférable d'essayer l'animation sur votre téléphone mobile pour voir à quel point elle est fluide.
Si vous souhaitez produire des animations de plusieurs tailles différentes, il est préférable d'utiliser le format vectoriel pour la production, et le format vectoriel est également le meilleur format pour enregistrer l'image originale, conformément au principe de « préserver une éditabilité maximale » que nous avons toujours préconisé.