Une série de didacticiels sur la création d'une animation plane dans Photoshop CS3 (1) : Présentation.
Le principe de la formation de l'animation est que l'œil humain a la caractéristique de persistance de la vision. La soi-disant persistance de la vision signifie qu'après avoir vu un objet, même si l'objet disparaît rapidement, il laissera toujours une image continue dans les yeux. une certaine période de temps. Cela est vrai lorsque l'objet est relativement brillant. C'est particulièrement évident dans le cas de . La chose la plus courante consiste à utiliser le flash pour prendre des photos de nuit. Même si le flash est éteint depuis longtemps, le halo restera toujours dans les yeux du sujet et durera un certain temps.
La première application de cette fonctionnalité a peut-être été réalisée par nous lorsque nous étions à l'école primaire. Il s'agissait de dessiner les mouvements de nombreux personnages sur le pied de page du manuel, puis de le parcourir rapidement pour obtenir des images continues dans les yeux. est une animation. Il convient de noter que l'animation ici ne fait pas référence à l'animation de dessin animé. Bien que les principes de production de l'animation de dessin animé soient les mêmes, l'animation ici fait généralement référence à toutes les images continues.
En résumé, ce qu'on appelle l'animation consiste à utiliser plusieurs images fixes pour jouer en continu et à utiliser la persistance de la vision pour former une image continue. Par exemple, les films traditionnels utilisent une longue série de films pour enregistrer en continu des images uniques et les projeter sur l'écran avec des lumières en séquence à une certaine vitesse. Il y a ici une exigence de vitesse. Imaginez que si nous feuilletons lentement le manuel, nous n'obtiendrons que plusieurs images fixes au lieu d'images continues. Il en va de même pour la lecture de films si la vitesse est trop lente, ce que voit le public équivaut à un diaporama rotatif. Afin de permettre au public de profiter d'images continues, le film est joué à une vitesse de 24 images par seconde, c'est-à-dire que 24 images fixes sont projetées en continu sur l'écran en une seconde. L'unité de vitesse de lecture de l'animation est le fps, où f est le mot anglais Frame (image, image), p est Per (per) et s est Second (seconde). En chinois, cela signifie combien d'images par seconde, ou combien d'images par seconde. Les films sont à 24 images par seconde, souvent appelés 24 images.
D'autres appareils capables de produire des images dans la vie réelle ont également le concept de fréquence d'images, comme les signaux TV. Le format PAL utilisé en Chine et en Europe est de 25 images, et le format NTSC utilisé au Japon et dans les Amériques est de 29,97 images. Si l'animation est jouée sur un écran d'ordinateur, 15 images peuvent obtenir l'effet d'images continues. De cette façon, lorsque vous réaliserez des vidéos à l’avenir, vous devrez réfléchir à l’appareil sur lequel les publier et définir différentes fréquences d’images.
La précision de reconnaissance de l’œil humain est en réalité bien supérieure aux fréquences d’images ci-dessus, car le système visuel composé de l’œil humain et du cerveau est très développé. Il a simplement des niveaux de sensibilité différents en fonction de l'environnement. Par exemple, dans un environnement sombre, le temps de persistance visuelle des sources lumineuses plus lumineuses est plus long, le film ne nécessite donc que 24 images. Soit dit en passant, seuls quelques animaux ont des yeux qui surpassent les humains sous certains aspects, mais tous sont gravement déficients sous d’autres aspects. Par exemple, l'aigle, le « Roi des détails », est daltonien, tandis que le hibou, le « Roi de la vision nocturne », a les yeux fixes et doit tourner la tête pour observer son environnement.
Dans les didacticiels de conception Photoshop que nous avons regardés dans Tianji Design Online, Photoshop est principalement utilisé pour créer des images statiques telles que des affiches et des manuscrits imprimés. Nous avons mentionné qu'il a la capacité de produire des animations. Nous allons maintenant créer une animation composée de plusieurs images dans Photoshop. Étendez un seul écran à plusieurs écrans. Et créer une sorte de continuité d’image entre ces multiples scènes pour donner forme à l’animation.
De nos jours, de nombreuses animations produites à l'aide de Flash peuvent être accompagnées de doublage et d'interactivité, ce qui rend l'animation entière plus vivante. L'animation produite par Photoshop ne peut être qualifiée que d'animation simple, principalement parce qu'elle ne contient que des images et ne peut pas ajouter de son, et que le public ne peut la regarder que de manière fixe. Mais simplicité ne signifie pas grossièreté. Bien que le premier offre davantage de méthodes de production et d'expression, le second présente toujours ses propres avantages uniques. Par exemple, l'animation de style calque peut facilement créer de belles choses difficiles à réaliser avec d'autres logiciels d'animation. De plus, tout comme dessiner sur papier est un acte très simple, différentes personnes dessinent différemment. Par conséquent, une excellente animation ne nécessite pas nécessairement une technologie complexe, ce qui compte c’est une excellente créativité.
Quel que soit le logiciel dont il s’agit, leurs principes de production sont les mêmes, tout comme le mode couleur RVB que nous avons tant étudié, il peut être appliqué partout. Notre tâche actuelle consiste donc à utiliser les connaissances de base de Photoshop que nous avons acquises, à les étendre à la production d'animation et à acquérir les compétences et méthodes générales de production d'animation. Ces connaissances pourront encore être appliquées ultérieurement à d’autres aspects. Et nous présenterons également comment convertir des animations Photoshop en vidéos et y ajouter du son.
Aux différences de production s’ajoutent également des différences d’utilisation. Les animations sont souvent placées dans une certaine zone d'une page Web pour mettre en valeur certains contenus, comme les animations publicitaires. Ce type d'animation a généralement des tailles fixes correspondantes en fonction de différents emplacements de placement, tels que 468 x 60, 140 x 60, 90 x 180, etc. L'animation peut également être appliquée aux MMS des téléphones mobiles (un service de messages texte multimédia qui peut envoyer des images, des sons et des vidéos). Chacune de ces utilisations a ses propres caractéristiques et d’autres facteurs doivent être pris en compte outre la taille. Comme la limite du nombre d'octets, le temps d'arrêt des trames, etc. Nous l'expliquerons étape par étape dans le tutoriel.
Remarque : Avant de commencer cette série de didacticiels, nous demandons aux lecteurs d'avoir appris les bases de Photoshop, de comprendre et de maîtriser les concepts et opérations tels que les calques de réglage, les styles de calque, etc., tels que "Comment créer un calque de réglage de courbe", etc. Seule une brève introduction au fonctionnement sera donnée et les principes ne seront pas expliqués en détail. Il est donc recommandé aux nouveaux lecteurs d’apprendre d’abord les bases.
De plus, seule la version Photoshop CS3 Extended (étendue) dispose de la fonction de production d'animation, qui n'est pas disponible dans la version ordinaire. La version CS2 est livrée avec des fonctions de création d'actions et le fonctionnement est similaire à CS3 Extended. CS et les versions antérieures nécessitent le logiciel ImageReady fourni pour la production d'animation. Il est recommandé d'utiliser la même version CS3 Extended que celle du didacticiel.
Puisque cela s'appelle animation, cela signifie faire bouger les images à l'écran. Dessinons et créons maintenant une animation "simple et grossière".
Créez une nouvelle image vierge de 150 × 150, créez un nouveau calque et dessinez un rectangle, à peu près comme indiqué à gauche ci-dessous, et la palette des calques comme indiqué à droite. On peut voir qu'il s'agit d'une couche de réseau ordinaire. Vous devez utiliser autant que possible des couches vectorielles dans les opérations réelles. Nous y prêterons également attention dans les didacticiels suivants.
Ouvrez la palette d'animation via [Window_Animation], comme indiqué dans l'image de gauche ci-dessous. À l'heure actuelle, il existe également des options supplémentaires dans la palette des calques, comme le montre la flèche rouge dans l'image de droite ci-dessous. Si vous fermez la palette Animation, elle sera restaurée à son état d'origine. Ne vous inquiétez pas pour l'instant. De plus, la palette d'animation est souvent combinée avec la palette d'enregistrement de mesures. Cette dernière n'a rien à voir avec notre contenu actuel et peut être désactivée.
Après avoir ouvert la palette d'animation, nous pouvons commencer à créer des animations. Cliquez sur le bouton "Copier l'image sélectionnée" sur la flèche rouge dans la palette d'animation. 
, vous verrez un nouveau cadre ajouté. Comme indiqué ci-dessous. Selon nos habitudes précédentes, cette icône devrait en représenter une nouvelle, comme un nouveau calque, etc. Bien que l'explication littérale ici soit une copie, il s'agit en fait d'une nouvelle, mais le cadre nouvellement ajouté est en fait le même que le cadre précédent. .Même contenu. En conséquence, chacun devrait pouvoir imaginer 
La fonction du bouton est de supprimer le cadre.
Assurez-vous que la deuxième image copiée est actuellement sélectionnée dans la palette d'animation, puis utilisez l'outil de déplacement pour déplacer le carré du calque d'une certaine distance, à peu près comme indiqué dans l'image de gauche ci-dessous. À l'heure actuelle, la palette d'animation est celle indiquée dans l'image du milieu ci-dessous. On peut voir que bien que la position du bloc ait changé dans l'image 2, la position du bloc dans l'image 1 reste inchangée. Il s'agit d'une fonctionnalité très importante.
Répétez cette opération en copiant d'abord le cadre puis en déplaçant le bloc plusieurs fois, et enfin vous obtiendrez quelque chose comme l'image de droite ci-dessous (similaire à celle-ci). Nous avons maintenant 7 images et les blocs sont dans des positions différentes dans chaque image. Faites attention à la phrase "La position des carrés dans chaque cadre est différente", puis regardez la palette des calques. Il est évident qu'un seul calque existe (le calque d'arrière-plan n'est pas compté pour le moment), ce qui conduit à une fonctionnalité : pour un calque, par exemple, sa position (ou ses coordonnées) peut être spécifiée individuellement dans différents cadres. Grâce à cette fonctionnalité, nous pouvons animer le mouvement des objets en utilisant un seul calque.
Vous pouvez maintenant appuyer sur le bouton de lecture dans la palette d'animation 
, vous pouvez voir l'effet du déplacement de la boîte dans la fenêtre d'image, mais elle se déplace très rapidement. Cela est dû au fait que le délai de trame n'est pas défini. Notez qu'il y a maintenant un "0 seconde" sous chaque image dans la palette d'animation. Il s'agit du temps de retard de l'image (ou temps de maintien). Le temps de retard d'image indique la durée pendant laquelle l'image est affichée pendant l'animation. Par exemple, si le délai d'une certaine image est réglé sur 2 secondes, alors lorsque cette image est lue, elle restera pendant 2 secondes avant de continuer à lire l'image suivante. Le délai est par défaut de 0 seconde et le délai peut être défini indépendamment pour chaque image.
La méthode pour définir le délai d'image consiste à cliquer sur l'heure sous l'image et à sélectionner l'heure correspondante dans la liste contextuelle. Comme le montre l'image de gauche ci-dessous, réglez l'image 7 sur 0,5 seconde. "Aucun délai" dans la liste est de 0 seconde. Si vous ne souhaitez définir aucune heure, vous pouvez sélectionner "Autre" et saisir vous-même la valeur (en secondes). Vous pouvez également modifier le délai de manière uniforme après avoir sélectionné plusieurs images. La méthode de sélection de plusieurs images est la même que pour sélectionner plusieurs calques. Cliquez d'abord sur l'image 1 dans la palette d'animation pour la sélectionner, puis maintenez la touche MAJ enfoncée et cliquez sur l'image 6. . Sélectionnez simplement les images 1 à 6. Ensuite, définissez le fuseau horaire de n'importe quelle image, comme indiqué dans l'image de droite ci-dessous, sur 0,1 seconde. Il s’agit d’un temps de retard plus couramment utilisé.
Rejouez l'animation et vous verrez que le bloc se déplace plus lentement et reste plus longtemps à la fin du mouvement. Cela est évidemment dû au long délai prévu. Ce long délai joue en fait un rôle de premier plan, et cette fonctionnalité peut être utilisée pour mettre en évidence un certain thème dans la production réelle. Nous trouverons également le temps d’introduire quelques techniques d’expression dans les tutoriels ultérieurs.
En plus du temps de retard, une autre caractéristique de l'animation est que vous pouvez définir le nombre de boucles de lecture. Notez qu'il y a un "pour toujours" sous la première image de la palette d'animation, qui correspond au nombre de boucles. Après avoir cliqué, vous pouvez choisir « une fois » ou « pour toujours », ou définir vous-même le nombre de cycles. Rejouez ensuite l'animation pour voir l'effet du réglage du numéro de boucle.
Bien que dans la plupart des cas, les animations tournent en boucle en continu (c'est-à-dire pour toujours), des boucles simples ou répétées (2 à 3 fois) sont également utilisées à certains endroits, principalement lors de l'utilisation d'une animation pour créer des composants Web. Par exemple, animez le nom d'une colonne à partir de zéro pour qu'il apparaisse progressivement, de sorte que lorsque le nom est entièrement affiché, il soit corrigé et ne puisse pas disparaître à nouveau, puis apparaître à nouveau. À ce stade, il est nécessaire d'utiliser le réglage du cycle « une fois ».
Appuyez sur 〖CTRL+S〗[Fichier>Enregistrer] pour enregistrer les paramètres d'animation et le format de fichier est psd. Ce format de fichier est propriétaire de Photoshop et peut enregistrer toutes les informations pertinentes. Il est recommandé à chacun de sauvegarder ses œuvres dans ce format pour faciliter les modifications futures. Si vous avez besoin d'un fichier d'animation indépendant pouvant être utilisé sur des pages Web, vous devez utiliser [CTRL+ALT+SHIFT+S] [Fichier>Enregistrer pour le Web et les appareils], et une grande fenêtre apparaîtra comme indiqué à gauche ci-dessous. . Cette grande fenêtre a beaucoup à couvrir. Mais maintenant, il vous suffit de vous référer aux paramètres dans la zone de la flèche rouge.
Dans le même temps, un bouton de lecture et des options de boucle apparaîtront dans la zone de flèche verte en bas à droite de la fenêtre. Changer le nombre de boucles ici modifiera également les paramètres du fichier source. Notez que si aucun GIF n'est sélectionné dans la zone de flèche rouge, le bouton de lecture n'est pas disponible. En effet, seul le format GIF prend en charge l'animation. Si vous l'enregistrez de force dans d'autres formats tels que JPG ou PNG, l'image générée n'aura que la première image.
Pendant le processus de stockage, le message d'avertissement affiché à droite ci-dessous peut apparaître. Ne l'ignorez pas et confirmez simplement. Vous pouvez également le rendre à nouveau invisible. Cependant, tout le monde doit faire attention à l'utilisation de chiffres ou d'anglais demi-chasse lors de la dénomination des fichiers, et ne pas utiliser de caractères pleine chasse ou de caractères chinois. Ceci doit être plus largement compatible avec les navigateurs de différentes langues.
Dans ce chapitre, ce que chacun doit maîtriser, ce sont deux attributs de l'animation, à savoir le temps de retard des images et le nombre de boucles. De plus, vous devez maîtriser les méthodes de création d'animations simples de déplacement d'objets telles que « copier des images et déplacer des calques ». Et utilisez cette méthode pour créer une animation avec le déplacement de deux objets en même temps. L'effet est similaire à l'image ci-dessous.
Dans la section suivante, nous introduisons la deuxième partie : les caractéristiques de propagation de la première trame.