Création et transformation de dégradés
Le dégradé est un type de nuance. Il peut être linéaire ou radial. Dans ce tutoriel, vous apprendrez à créer, à appliquer et à transformer des dégradés pour le bateau.
Publié le
Bienvenue dans cette nouvelle vidéo d'initiation à Adobe Animate.
Dans les précédentes, nous avons vu comment organiser l'espace de travail, utiliser les outils de dessin, créer des symboles, et des interpolations classiques, et nous nous sommes familiarisés avec les séquences.
Dans cette vidéo, nous verrons comment améliorer les illustrations à l'aide des puissants outils de dégradé d'Adobe Animate.
J'ai utilisé ces outils dans de nombreux projets pour créer des illustrations ou concevoir des interfaces.
Voici l'une des interfaces que j'ai créées à l'aide des dégradés d'Animate.
Je vais vous montrer quelques-unes de ses animations, dont ce moteur que j'ai entièrement créé dans Animate en dessinant chaque pièce.
On dirait de la 3D, mais ce sont uniquement les dégradés qui donnent cette impression.
Sur cette pompe, j'ai également appliqué des dégradés pour créer une dimension 3D.
Voici ce que cela donne.
Je le répète, il n'y a là que des dégradés.
J'en ai également utilisé pour convertir un bitmap en dessin vectoriel.
Le bitmap est l'image du haut.
Pour réduire son échelle, je l'ai redimensionné et redessiné dans Adobe Animate en utilisant des dégradés, afin d'obtenir le même rendu qu'avec l'original.
J'utilise souvent cette technique, notamment pour ce plateau-repas créé à l'aide des remarquables outils de dégradé d'Adobe Animate 2020.
Bien, nous allons pouvoir commencer.
Mais juste avant, je vais modifier certaines préférences dans la nouvelle application Adobe Animate 2020.
Je vais donc sélectionner l'option Modifier les préférences.
Sur Mac, il faut choisir Animate > Préférences > Modifier les préférences et sur PC, Fichier > Modifier les préférences.
Dans la liste déroulante Aspect d'IU, je choisis Compact au lieu de Confortable.
L'affichage des éléments du scénario est condensé, tout comme celui des icônes d'outil.
Toujours dans le menu Animate, sous Préférences, je sélectionne Préférences expertes, ce qui réduit la fenêtre de la séquence.
Enfin, je reviens à l'espace de travail que nous avons créé dans la première vidéo de la série.
Nous sommes maintenant fin prêts.
Pour l'instant, aucun dégradé n'est appliqué au bateau.
Je vais afficher la bibliothèque et double-cliquer sur le bateau – toc, toc, toc ! – pour passer en mode de modification.
J'aimerais retravailler les couleurs à l'aide de dégradés.
Je clique donc sur cette icône pour ouvrir le panneau Couleur.
Ce champ indique qu'il s'agit d'une couleur unie.
Je clique ici et je sélectionne Dégradé linéaire.
Un dégradé apparaît au bas du panneau avec deux étapes : une première à gauche, le noir, et une autre à droite, le blanc.
Lorsque je clique sur celle-ci, le triangle de la partie supérieure de l'étape de dégradé devient noir et la couleur sélectionnée s'affiche ici.
Si je clique sur le sélecteur du blanc, le code hexadécimal correspondant s'affiche également, et le petit triangle du haut est noir.
Ce dégradé comprend deux étapes.
Pour ajouter d'autres étapes ou d'autres couleurs entre les deux, il suffit de cliquer aux endroits souhaités, puis de double-cliquer sur une couleur pour la modifier.
J'obtiens ainsi un dégradé différent.
Il est tout aussi facile de supprimer des étapes : il suffit de les faire glisser, comme si vous les jetiez hors du panneau.
Pour l'instant, deux étapes suffiront.
L'idée est de créer un dégradé à partir des couleurs de l'illustration.
Si je double-clique ici, je n'ai accès qu'aux 216 couleurs de la palette web.
Il sera difficile de trouver exactement le marron du bateau, et le même en plus foncé.
Mais je peux utiliser la pipette à l'extérieur du panneau et prélever le marron de l'illustration.
Idem pour la deuxième étape.
Du coup, ce n'est plus un dégradé, mais une couleur unie.
Pour créer un dégradé, je vais cliquer sur la seconde étape, ou la première, cela n'a pas d'importance, et modifier la teinte, la saturation ou, par exemple, la luminosité : en déplaçant ce curseur, je peux assombrir la couleur de l'étape, un marron, en l'occurrence.
J'obtiens ainsi un beau dégradé, du marron au marron foncé.
Je peux réduire ce panneau.
À l'aide de l'outil Pot de peinture, je clique sur le bateau pour appliquer le dégradé.
Je peux aussi faire glisser pour ajuster le dégradé en changeant son orientation, ou la largeur et la position de la transition entre les couleurs.
Je peux également me servir de l'outil Transformer le dégradé, en le sélectionnant dans le menu de l'outil Transformation libre ou en appuyant sur la touche F.
Cet outil est encore plus performant pour l'ajustement des dégradés.
Lorsque je clique sur le dégradé, son point central s'affiche.
Il m'indique la position actuelle du centre du dégradé.
La poignée externe me permet d'étirer le dégradé pour l'allonger ou le raccourcir en fonction de la taille du bateau, et la poignée du haut le fait pivoter.
Je vais déplacer le point central et l'étirer davantage.
C'est pas mal du tout, le dégradé part du marron clair et s'assombrit vers la proue.
Je recommence : j'affiche le nuancier, je double-clique sur cette étape du dégradé et cette fois-ci, j'échantillonne la couleur à l'intérieur de la coque.
Idem pour la seconde étape, que j'assombris en jouant sur la luminosité.
Voilà.
Je referme le panneau.
Avec l'outil Pot de peinture, je peins les zones à l'intérieur de la coque.
Je sélectionne à nouveau l'outil Transformer le dégradé.
Je clique ici… En fait, il est plutôt pas mal, celui-là.
Je vais cliquer sur ce dégradé et le faire pivoter pour que la couleur s'assombrisse vers le fond de la coque, et je réduis un peu sa taille.
La couleur claire est en haut et s'assombrit en direction du fond de la coque, ce qui donne une impression de profondeur.
Même chose ici.
Je le fais pivoter… Idem pour celui-ci… Je le redimensionne, je le fais pivoter, je repositionne le point central, je le réduis pour voir la partie foncée du bas du dégradé.
Là, c'est pas mal !
Passons maintenant aux bancs.
Je sélectionne cette couleur, je double-clique… Je sélectionne la même couleur pour l'autre étape, c'est bien plus facile que de la rechercher ici.
J'ai maintenant un dégradé du vert au vert.
Je clique sur la seconde étape et je fais glisser le curseur de luminosité vers le bas pour assombrir le vert.
Cela revient à ajouter du noir ou du blanc, c'est le principe de la luminosité.
J'active l'outil Pot de peinture et j'applique les dégradés.
Avec l'outil Transformer le dégradé, il ne me reste plus qu'à les peaufiner.
Je fais pivoter celui-ci et je le réduis légèrement.
Le dégradé s'assombrit en allant vers l'arrière-plan.
Je le fais également pivoter et je le redimensionne.
Quelque chose dans ce style !
Pour terminer, j'aimerais supprimer les contours.
Avec les dégradés, le contour en bas du bateau n'est plus nécessaire.
Je clique dessus et je le supprime.
Je supprime aussi celui de gauche.
Idem à droite, je clique sur le contour et je le supprime.
Je peux aussi supprimer la ligne à l'arrière du banc, elle n'est pas utile.
Cette ligne ne devrait pas être visible non plus.
Je supprime aussi celle-ci.
Il ne reste que le contour du bord supérieur de la coque.
Je vais double-cliquer dessus pour sélectionner tous les contours : les deux lignes des bancs et le contour de la coque.
Dans le panneau Propriétés, j'applique à cette ligne une épaisseur de trois ou quatre pixels.
Et j'ajoute une couleur claire au contour supérieur de la coque.
Comme ça.
Cela fait ressortir le contour, comme si la coque avait un bord plus clair, ce qui donne de l'épaisseur et de la profondeur.
Je vais refaire un test.
Je constate qu'on a réussi à créer une impression de relief sur le bateau à l'aide des dégradés d'Adobe Animate.
Vous pouvez améliorer la voile et l'eau en utilisant la même technique.
Pour l'eau, essayez avec plusieurs étapes pour passer d'un bleu foncé à un bleu clair, puis du bleu clair au blanc, en appliquant même de la transparence alpha sur le blanc.
À bientôt !
Ce que vous avez appris :
Les dégradés peuvent être créés dans le panneau Couleur.
Un dégradé peut comporter de nombreuses étapes.
Le paramètre de luminosité permet d’assombrir ou d’éclaircir une couleur.
Les dégradés peuvent être appliqués à l’aide de l’outil Pot de peinture.
Il est possible de modifier l’angle d’un dégradé en faisant glisser dans n’importe quelle direction. Les dégradés peuvent être manipulés à l’aide de l’outil Transformer le dégradé.
Les dégradés peuvent inclure des couleurs transparentes si vous diminuez la valeur Alpha de la couleur.
