Concernant le concept de couleur, nous avions envisagé de rendre l'ensemble très simple et épuré en utilisant un arrière-plan bleu et une écriture jaune. Le bleu et le jaune étant des couleurs complémentaires, ils sont très lisibles et se distinguent bien l'un de l'autre.
Nous pourrions théoriquement créer une nouvelle surface de couleur, y appliquer le bleu et ensuite colorer le texte en jaune. Nous pourrions le faire, mais nous aurions alors le problème de comment superposer une lingette sur toute l'image en plein milieu de l'animation pour inverser les couleurs.
Nous pourrions essayer de créer un calque d'ajustement via Calque > Nouveau > Calque d'ajustement ou en utilisant Ctrl+Alt+Y et appliquer un effet d'Inversion des canaux. Mais nous verrions alors que nos couleurs ne sont pas totalement complémentaires. Pour le bleu, c'est l'orange qui est complémentaire et cela ne convient pas ici, les couleurs ne fonctionnent pas ensemble.
Mais je veux absolument le faire, et il y a une solution.
Étape 1
Nous procédons comme suit : nous prenons la surface de couleur bleu roi et appuyons sur Ctrl+Shift+Y ou allons dans Calque > Paramètres pour les calques de couleurs et réglons la couleur sur noir.
Cela modifie joliment l'aspect et After Effects renomme même la surface de couleur.
Nous écrivons maintenant le texte "Animation facile" en blanc.
Nous avons du noir et du blanc sans transparence et pouvons inverser très facilement les couleurs.
Mais maintenant nous avons du noir et blanc, alors que je veux du bleu et du jaune.
Étape 2
Nous créons donc une autre couche d'ajustement en appuyant sur Ctrl+Alt+Y ("Calque d'ajustement 2") et appliquons l'effet Effets > Correction des couleurs > Teinte/Saturation dessus.
L'effet est très simple et pré-mappé les couleurs. Il prend le noir et le blanc et leur attribue une autre valeur de couleur.
Nous adaptons ensuite le noir pour le transformer en bleu. J'avais déjà écrit un code couleur "008FF", c'est ce beau bleu.
Et nous adaptons le blanc pour le transformer en jaune, la valeur de couleur est "FFF000", un jaune vraiment vibrant.
Étape 3
Nous avons maintenant appliqué ceci après la couche d'inversion. Je vais également renommer cela en "Changement de couleurs" et "Colorisation".
Verrouillons également le calque supérieur, car nous n'aurons plus jamais à y toucher.
Si j'active ou désactive "Changement de couleurs", nous obtenons une magnifique inversion des couleurs, sans basculer vers l'orange ou le violet.
Mais comment réalisons-nous la transition ? Nous pouvons déplacer le calque "Changement de couleurs" de gauche à droite ou de haut en bas à travers l'image pour créer une transition. Mais ce n'est pas très intéressant.
J'aimerais faire quelque chose de plus, diviser le tout en bandes, et ces bandes devraient balayer l'image pour briser un peu plus les bords. Comment pouvons-nous faire ça de la meilleure manière ?
Étape 4
Il existe des effets pour cela, comme par exemple dans Effets > Effets de transition; nous avons le Line Sweep, qui va dans cette direction, mais une ligne est d'abord complétée avant que la suivante ne démarre.
Ce n'est pas assez irrégulier pour moi.
Étape 5
C'est pourquoi nous utilisons au mieux des masques. Je fais un double-clic sur le symbole de masque et j'applique un masque qui s'adapte parfaitement à mes mesures. C'est une fonctionnalité très pratique que nous utiliserons également plus tard.
Étape 6
J'aimerais diviser ce masque en 20 morceaux, de sorte que nous ayons 20 colonnes individuelles. Cela n'est pas possible avec les outils standard d'After Effects.
Mais dans de telles situations, je crée simplement un script pour cela. Pour les éléments que nous utilisons ici, j'ai inclus les scripts dans le tutoriel correspondant.
Nous y trouverons Layer Chainer, Mask Slicer et Sequence Strokes. Mask Slicer est ce dont nous avons besoin ici, comme vous pouvez vous en douter.
Il s'agit du symbole devant le nom de fichier de l'Extendscript Toolkit, je peux le démarrer ici. Lorsque je le fais, l' Extendscript Toolkit démarre également.
Cet outil doit être installé séparément, car il ne l'est pas par défaut. Vous devrez le faire, cela peut se faire très simplement via Creative Cloud.
Dans ce script, nous avons quelques paramètres. Je n'ai pas créé d'interface utilisateur pour tous les scripts, car ils sont destinés à mon usage personnel. Cela signifie que vous devez modifier directement tous les paramètres dans le fichier texte.
Dans ce cas, nous pouvons modifier deux valeurs : le nombre de "noOfSplices" pour déterminer combien de tranches individuelles nous voulons au final.
Et le "separateLayers", qui peut être true ou false. Avec true, une nouvelle couche est ajoutée pour chaque tranche.
Essayons avec 4 tranches pour voir…
… aller dans After Effects et choisir le masque que nous voulons découper. C'est très important.
Ensuite, choisir After Effects CC dans la destination de l'application en haut. Vous voyez, il y a aussi d'autres programmes ici, ce toolkit est destiné à écrire et tester des scripts.
Dans ce cas, nous choisissons donc After Effects, puis j'appuie sur le bouton Lire ….avif "Animation facile: Les couleurs.")
… et revenons à After Effects. Nous avons maintenant les nouvelles couches, chacune composée d'une seule couche.
Et si maintenant je génère un dégradé de 4 couleurs ici, …
… vous verrez que cela donne à nouveau une image complète. En fait, c'est une couche avec une coordonnée, seules les masques sont découpés. Cela signifie que nous avons des tranches individuelles de cette couche, ce qui peut être très pratique car nous pouvons les déplacer et les faire pivoter individuellement.
Mais nous n'avons pas besoin de cela ici. Je veux autre chose.
Étape 7
Je veux avoir toutes les masques sur une seule couche, et non pas 4, mais 20.
Et pour separateLayers nous mettons sur false. Je sauvegarde, appuie à nouveau sur Lire …
… et maintenant nous avons les 20 masques sur une seule couche.
Je les sélectionne de 1 à 20 et appuie sur Ctrl+C ou cmd+C. Ensuite, je supprime le masque original et ajoute tous ceux-ci à sa place ici.
Maintenant ils sont tous là et je voudrais les animer dans l'étape suivante.
Étape 8
Malheureusement, les masques n'ont pas de propriétés de transformation telles que la rotation et l'échelle, seulement le tracé du masque. Mais ce n'est pas un problème.
Nous sélectionnons tous les masques et les déploions. Ensuite, nous appuyons sur Tracé de masque, définissons une image-clé et allons un peu plus loin dans la composition, où nous déplaçons ensuite tous les masques directement vers le bas de l'écran.
Étape 9
Regardons cela. La musique joue en arrière-plan, c'est parfait. Et nous avons maintenant deux images-clés linéaires, ce qui n'est pas très excitant.
J'aimerais rendre cela un peu plus excitant et ne pas travailler avec des images-clés linéaires, car nous l'avons déjà entendu avec les règles de Disney : la vitesse constante n'existe pas dans la vraie vie, donc nous n'en avons pas besoin non plus dans l'animation.
Étape 10
Pour cela, nous cliquons sur l'Éditeur de courbe. Là, je vois les courbes que nous allons apprendre à connaître précisément avec la balle rebondissante.
Pour les restreindre aux tracés de masque, je sélectionne tous les masques et appuie sur U, pour voir toutes les propriétés animées.
Ici, nous voyons maintenant la courbe de vitesse, le graphique de vitesse. Ce n'est pas aussi agréable à travailler qu'avec la courbe de valeur, nous le verrons plus tard. Mais vous pouvez bien travailler avec cela si vous souhaitez animer de nombreuses propriétés en même temps.
J'aimerais mettre un Facilite progressive dessus, soit avec F9 soit avec ce bouton.
Ainsi, le graphique a beaucoup changé. À gauche, ce serait une vitesse constante, nous démarrons à une certaine vitesse et nous arrêtons brusquement.
Avec Facilite progressive, nous commençons lentement à partir de zéro en vitesse, puis redescendons. C'est alors une forme parabolique.
J'aimerais rendre cela encore un peu plus extrême. Pour cela, je prends la tangente et tire simplement un peu, de sorte que nous ayons vraiment un pic au milieu.
Voyons comment cela rend …
Je laisse cela se dérouler et je vois : C'est vraiment fluide. Nous avons un mouvement beaucoup plus rapide au milieu qu'au début et à la fin. J'aime ça.
Étape 11
Nous aurions pu faire de même avec la position - mais pourquoi alors avons-nous découpé les tranches?
Nous déplaçons cela maintenant de manière irrégulière dans le temps et disposons les images-clés de manière aléatoire, de sorte que nous obtenions un peu de variété dans la forme de la révélation. Les lignes ne doivent pas toutes se déplacer en même temps.
À la fin, cela ressemble un peu à une skyline. Cette ligne unique qui normalement diviserait notre image, nous voulons la briser. Parfois, cela peut se faire seulement d'un côté, ou seulement à l'avant ou à l'arrière. J'essaie d'éviter qu'elles se terminent à la même hauteur.
Cela a l'air bien.
Et vous voyez, si vous activez l'aperçu - ça a l'air cool. Fantastique.
Étape 12
Et maintenant nous pouvons prendre cette couche, la tourner, la mettre à l'échelle, la déplacer et bien sûr l'utiliser plusieurs fois, car c'est simplement l'effet d'inversion.
Nous la dupliquons, la déplaçons dans le temps et passons du jaune au bleu et du bleu au jaune.
Dans ce cas, elle est préalablement affichée, puis disparaît. Nous devons encore l'inverser, car je veux qu'au début nous n'ayons pas de couche et que la couche se déplace vers l'avant.
Donc je supprime à nouveau la couche dupliquée et active la couche "Changer les couleurs". Ensuite, nous sélectionnons tous les keyframes en dessinant un rectangle par-dessus.
Avec un clic droit, je vais sur l'assistant des keyframes et trouve ensuite tout en bas Inverser l'ordre des keyframes.
Je viens de faire ça et maintenant la couleur jaune se déplace du bas vers le bleu.
Et maintenant ça devrait fonctionner lorsque je duplique à nouveau la couche et la déplace un peu plus vers l'arrière.
Nous passons maintenant d'une couleur à l'autre et revenons. Parfait.
Cela fonctionne déjà. Notre prochain défi dans la prochaine partie de cette série de tutoriels sera alors le texte.
