Animation de beam de bordure SaaS premium dans Adobe After Effects

1. Intro: Bonjour, je m'appelle Valérie et souhaite la bienvenue dans Premium Effects Collection, une série de cours spécialisés sur After Effects dans lesquels je vous enseigne les effets les plus utiles que vous devez connaître pour améliorer vos projets et obtenir un look haut de gamme Et ce qui rend ces effets vraiment spéciaux c'est qu'aucun outil d'intelligence artificielle ne peut les reproduire avec le même niveau de perfection et personnalisation que lorsque vous les créez nativement dans After J'ai appris et pratiqué chacun de ces effets au point de pouvoir les enseigner de la manière la plus simple possible. Pas de plugins, juste After Effects. Il s'agit d'un cours de niveau intermédiaire. Pour suivre, vous devez donc connaître les principes de base d' After Effects, tels que les images-clés, précompositions, les médicaments pour le suivi et Bien, dans ce cours, nous allons créer une animation Border Beam Premium Une séquence parfaite que vous pourrez utiliser dans votre prochaine vidéo explicative SAS Je vais vous montrer non seulement comment le rendre vraiment beau, mais aussi quels problèmes vous pourriez rencontrer et comment les résoudre. À la fin de ce cours, vous aurez les connaissances, les compétences et la confiance nécessaires pour créer cette belle animation et la personnaliser. Et le meilleur, c'est que tout ce que vous allez apprendre ici est 100 % natif d' After Effects. Aucun branchement n'est nécessaire. Donc, si vous êtes prêt à vous amuser et à améliorer vos compétences, ne perdons pas de temps et allons-y directement. Rendez-vous dans le cours. 2. Configuration du projet et construction de la base: Bonjour et bienvenue au cours. Avant de commencer, veuillez télécharger le dossier principal du cours. À l'intérieur, vous trouverez trois dossiers. Le premier s'appelle AE, dans lequel nous allons enregistrer le projet After Effects sur lequel nous allons travailler dans ce cours. Le second s'appelle Assets, où vous trouverez tous les actifs que nous utiliserons. Les actifs que vous voyez ici proviennent d'une société SAS que j'ai créée afin que nous puissions nous entraîner comme dans le cadre d'un vrai projet. Et le troisième s'appelle Final. Vous y trouverez l'animation finale que nous allons créer dans ce cours. Comme vous le savez probablement déjà, il s'agit d'une animation très courante que nous voyons dans de nombreuses vidéos explicatives de SAS La plupart du temps, il est utilisé pour les scènes où nous devons révéler une application d'entreprise Nous allons donc non seulement apprendre à créer un effet de faisceau lumineux impressionnant, mais aussi à créer l'illusion qu'il révèle le design Maintenant, avant de commencer, si c'est la première fois que vous regardez l'un de mes cours, je voudrais simplement mentionner la petite note que vous verrez dans le coin inférieur gauche disant : « Faisons-le ensemble ». Quand vous le voyez, cela signifie que vous devez suivre et passer à l'action. Mais lorsque vous passez à regarder et à écouter, assurez-vous d'arrêter de travailler et de prêter attention à mon explication. C'est bon. Cela dit, ouvrons maintenant After Effects ensemble. J'utilise la version bêta pour bénéficier de toutes les nouvelles fonctionnalités, que vous aurez probablement déjà présentes si vous regardez ce cours après la dernière mise à jour d' After Effects. Si vous avez une ancienne version d'After Effects, c'est parfait. Ne t'inquiète pas. Toutes les techniques que nous allons apprendre dans ce cours peuvent être facilement appliquées dans n'importe quelle version. D'accord. Une fois que vous aurez ouvert After Effects, ajustons certains paramètres afin que nous puissions tous être sur la même longueur d'onde. Tout d'abord, assurons-nous que nous utilisons tous la même disposition de panneau. Pour cela, allez dans Windows, puis dans Workspace. Et sélectionnez la disposition des panneaux par défaut. Si la vue par défaut semble différente, cliquez ici sur Réinitialiser par défaut pour enregistrer la mise en page. Ensuite, passons aux préférences puis entrons dans le menu de composition. Maintenant, assurez-vous que tout est sélectionné de la même manière que dans mon cas. C'est bon. Une fois cela fait, une dernière chose que nous ferons avant de commencer est de cliquer ici pour ouvrir paramètres du projet et d' accéder au menu des couleurs pour régler la profondeur de bits à 16 bits par canal, ce qui améliorera considérablement l'apparence de nos dégradés et de nos effets de lueur. Génial. Ceci étant fait, créons notre première composition. Nous pouvons l'appeler master comp, car ce sera notre composition principale Sélectionnons ensuite le modèle HD de paysage des réseaux sociaux avec 30 images par seconde. Et pour la durée, vous pouvez la régler à 10 secondes. Ensuite, pour la couleur d'arrière-plan, laissez-la en noir et enfin cliquez sur OK. Génial. Et maintenant, assurons-nous qualité de notre aperçu est réglée sur complète. Ensuite, assurez-vous de régler le panneau de prévisualisation de manière à ce qu'il soit adapté pour plus de commodité. OK. Alors maintenant, la première chose que nous voulons faire est de créer notre panneau d'interface utilisateur principal. Peu importe si vous avez déjà un design avec un arrière-plan pour de meilleurs résultats, nous créerons nous-mêmes le panneau principal de l' interface utilisateur, créant un nouveau calque de forme ici, dans After Effects. Pour cela, assurons-nous de sélectionner l' outil rectangle, puis double-cliquer dessus pour créer un rectangle avec les dimensions de la composition Maintenant, pour le AVC, nous n'en avons pas besoin, nous pouvons donc l'éteindre. Pour ce faire, maintenez la touche Alt ou Option enfoncée sur Mac et cliquez ici pour basculer entre les différentes options de couleur Vous pouvez voir que le trait est maintenant désactivé. Génial. Et maintenant pour la couleur de remplissage, nous allons utiliser la palette de couleurs que j'ai préparée. Supposons que le client nous ait demandé de trouver la palette de couleurs, ouvrir le dossier principal du cours que je vous ai demandé télécharger et d'entrer dans le dossier des ressources. Maintenant, faisons glisser la palette de couleurs dans le projet. D'accord. Et maintenant, pour utiliser la palette, double-cliquons dessus, et un nouvel aperçu s'ouvrira. Dans notre cas, nous n'utiliserons pas la palette de couleurs du thème lumineux. Rétrécissons donc ce panneau et zoomons pour voir les couleurs sombres du thème. Génial. Cela fait, il ne nous reste plus qu'à sélectionner la couleur du remplissage. Pour le type de style visuel que nous recherchons, il est préférable d'utiliser des couleurs sombres pour le panneau principal de l'interface utilisateur. Sélectionnez donc le rectangle que nous avons créé et choisissez une couleur très foncée. Allons-y avec cette couleur foncée. Nous pouvons toujours ajuster les couleurs ultérieurement si nécessaire. Génial. Et maintenant, ajustons la taille du rectangle. Je préfère ajuster la taille de la forme plutôt que l'échelle de la couche, car j'enregistre la propriété d'échelle de la couche pour l'animation. Et bientôt tu comprendras ce que je veux dire. Pour l'instant, réduisons les dimensions jusqu'à obtenir de belles valeurs arrondies. Génial. Ensuite, arrondissons les coins. Réglons-le sur 60. Ça a l'air sympa. Activons maintenant le fond transparent afin de voir un peu mieux ce que nous faisons. Génial. Et maintenant, sélectionnons cette couche et changeons le nom en boîte principale. Cool. Nous pouvons fermer la couche maintenant et continuer à travailler. À ce stade, nous pouvons commencer à travailler sur le faisceau. Pour commencer, nous devons ajouter une autre forme, exactement la même, mais juste pour le trait. Donc, pour cela, sélectionnons la case principale que nous avons ici et appuyons sur Ctrl ou Commande sur Mac et D pour la dupliquer. Sur cette nouvelle couche, appuyons sur Entrée et changeons le nom en trait. Maintenant, assurons-nous de désactiver le remplissage de cette couche et d'activer le trait. donc le curseur sur le remplissage, puis maintenez la touche Alt ou Option enfoncée sur Mac, puis cliquez ici jusqu'à ce que vous désactiviez le remplissage Passons ensuite au trait et sélectionnons. Pour l'instant, disons cette couleur orange vif. Plus tard, nous pourrons ajuster toutes les couleurs. Pour l'instant, nous nous assurons simplement de tout configurer correctement. Ensuite, pour la largeur du trait, vous pouvez la définir sur dix pour le moment. Et maintenant, avant de passer à autre chose, il y a une chose très importante que je veux faire avec vous. Et c'est la parentalité de certaines propriétés, du trait à la boîte principale. La raison en est que, disons, plus tard dans le projet, nous devons ajuster la taille et la forme de la boîte principale. Nous voulons que le trait soit ajusté automatiquement en même temps. Comme vous pouvez le constater à l'heure actuelle, le trait n'est pas ajusté. Pour configurer cela, ouvrons la boîte principale, les propriétés du tracé du rectangle. Une fois terminé, associons les propriétés du trait à la boîte principale. Ainsi, lorsque nous modifierons ces propriétés sur la boîte principale, le trait sera également ajusté automatiquement. Maintenant, pour terminer la configuration, associons également l' ensemble de la couche de traits à la couche de boîte principale. Ainsi, lorsque nous voulons le redimensionner ou le déplacer, tout bougera ensemble. Comme vous pouvez le constater, nous pouvons le déplacer et le trait se déplace avec lui. Nous pouvons également ajuster la rondeur et la rondeur du trait sera également ajustée correctement Et, bien entendu, il en va de même pour la position et la taille du rectangle. C'est bon. Je vais maintenant tout ramener à la normale et nous pouvons passer à autre chose. fait, c'est le moment idéal pour sauvegarder notre projet afin de garantir les progrès que nous avons réalisés jusqu'à présent. Appuyons donc sur Catrol ou Commande sur Mac et S, et enregistrons-le dans notre dossier AE Appelons ce projet Border Beam Animation. Génial. Nous sommes maintenant prêts à passer à l'étape suivante dans laquelle nous nous concentrerons sur le fait que le trait ressemble à un faisceau élégant. C'est ce que nous ferons dans la prochaine leçon, alors à bientôt. 3. Shaping the Beam: Reviens. Notre prochaine étape consiste donc à faire en sorte que ce trait ressemble à un faisceau. Voyons donc comment nous pouvons le faire. abord, pour mieux voir ce que nous faisons, désactivons l'arrière-plan transparent. Ouvrons maintenant la couche de traits, sélectionnons le contenu et ajoutons un effet de trajectoire de découpe. L'effet de découpage nous permettra de découper le trait à partir des bords. Pour cela, nous devons d'abord raccourcir le trait. Pour ce faire, nous devons jouer avec les propriétés de fin ou de départ. Ajustons cette fois la propriété de fin. Peu importe lequel. Réglons-le sur 20, et maintenant nous devons ajuster le décalage pour que nous puissions voir le trait dans le coin supérieur gauche. Il fait bon quelque part par ici. Nous l'amenons ici parce que c'est là que nous voulons que le faisceau apparaisse. Réglons le décalage sur 200. Ensuite, nous devons affiner les bords du trait. Pour cela, nous devons ouvrir le rectangle et trouver le menu des traits. Maintenant, si nous faisons défiler la page vers le bas, nous pouvons trouver ici l'effet de conicité, qui nous permettra de rendre les bords du trait plus nets. Réglons donc la longueur de départ à 100 % et la longueur de fin à 100 % également. Mais comme vous pouvez le constater, nous pouvons à peine voir le trait maintenant. Cela lui a donné l'air un peu trop fin. Pour résoudre ce problème, sélectionnons le trait et augmentons la largeur du trait jusqu'à, disons, 20. C'est mieux C'est bon. prochaine étape pour configurer le faisceau consiste donc à ajouter un autre trait, mais cette fois un peu plus petit et avec une couleur légèrement plus claire. Donc, dupliquons le trait que nous avons. Disons ensuite que ce trait de couche est grand et que ce trait est petit. Génial. Et maintenant, pour le petit trait, nous devons d'abord régler la couleur sur une couleur très vive, peut-être du blanc ou peut-être de cette couleur ici. Pour l'instant, allons-y avec celui-ci. Après cela, nous devons réduire un peu ce trait. Commençons par ajuster l'effet de la trajectoire de découpage. Positionnons-nous ici et zoomons pour voir ce que nous faisons. C'est un peu mieux. Maintenant, fixons la fin à dix. Et puis ajustons le décalage. Le plus petit trait est donc positionné quelque part au centre du trait le plus gros Comme vous pouvez le voir, cela commence déjà à ressembler à une très belle bordure. Bien entendu, les valeurs de l'effet de trajectoire de découpe peuvent changer en fonction des dimensions de votre boîte principale. Mais l'idée principale est de créer une transition agréable entre le plus petit trait et le plus grand trait. C'est bon. Une fois cela fait, une dernière chose que nous pouvons faire pour le rendre encore plus beau est d'ajouter l'effet CC Sweep à notre couche de boîte principale Vous avez probablement vu de nombreux tutoriels utilisant cet effet sur YouTube. Mais dans notre cas, combiné à notre configuration, le faisceau ressemblera à quelque chose que vous n'avez jamais vu dans ces didacticiels. OK, ajoutons donc l'effet CC Sweep maintenant. Comme j'utilise une version plus récente d'After Effects, je peux appuyer sur Catrol ou Commande sur Mac et sur Entrée pour ouvrir le panneau d'application rapide Dans ce panneau, je peux rechercher n'importe quel effet dans After Effects. Elle est similaire à la très populaire console Plug-in FX gratuite. Si vous utilisez une ancienne version d'After Effects, il vous suffit d'accéder à l' onglet Effets et préréglages et de rechercher l' effet à partir de là D'accord. Donc, une fois que vous avez trouvé l'effet, appuyez sur Entrée pour l' appliquer au calque sélectionné. Et maintenant, avant de faire quoi que ce soit d'autre, nous devons d'abord nous assurer que la propriété nommée centre de cet effet est centrée dans notre couche de boîte principale et, plus important encore, qu'elle doit rester centrée même lorsque nous déplaçons la boîte principale. À l'heure actuelle, comme vous pouvez le constater, l'effet reste en place. Lorsque nous déplaçons la couche, nous avons besoin qu'elle suive la case principale. Permettez-moi de tout ramener à normale et de vous montrer comment faire. OK, donc d'abord, nous devons appliquer une expression rapide à la propriété du centre. Pour cela, survolez le chronomètre de la propriété centrale, maintenez la touche Alt ou Option enfoncée sur Mac, puis cliquez dessus pour ouvrir la zone d'expression Ensuite, nous devons taper TCMP. Comme vous pouvez le constater, l'expression tocomp est déjà Nous pouvons simplement appuyer sur Entrée pour l'appliquer. Enfin, entre parenthèses, nous devons saisir la valeur Cela fera en sorte que la propriété centrale suive la couche. Génial Pour terminer l'expression, cliquons quelque part en dehors de celle-ci. Et avant de poursuivre, nous devons nous assurer que la propriété centrale se trouve désormais au centre de la couche. Alors apportons-le ici. Zoomons pour plus de commodité et faisons-le glisser vers le centre. Génial. Maintenant, remettons le panneau d' aperçu en place. Mais cette fois, au lieu de le faire manuellement, nous pouvons utiliser un joli raccourci Shift et la touche point d'interrogation. Génial Et maintenant, comme vous pouvez le voir, si je déplace notre forme, l'effet suivra le calque et la propriété du centre restera au centre de la forme. C'est bon. Je vais appuyer sur la commande Z, et nous pouvons maintenant continuer à ajuster l'effet de balayage Ajustons la direction afin le faisceau dans la bonne position. Bien entendu, nous voulons que ce soit dans ce domaine. Réglons donc la direction sur -60. Ensuite, augmentons la largeur. Réglons-le sur 150 pour le moment. Ensuite, pour l'intensité du balayage, il faut la baisser, la mettre à zéro Zoomons un peu pour voir ce que nous faisons. Les limites des couches les rendent difficiles à voir. Désactivons-les à l'aide d'un raccourci. Appuyez sur Ctrl ou Commande sur Mac puis sur Shift H. Nous pouvons maintenant voir ce que nous faisons de mieux en mieux. Bien, passons maintenant à l'intensité des bords. Réglons-le sur 60 pour le moment. Et pour l'épaisseur du bord, laissez-la à quatre. Nous pourrons ajuster toutes les valeurs de l'effet ultérieurement. Pour le moment, ça a l'air sympa. Passons donc à la couleur. Pour la couleur, nous devons choisir quelque chose d'un peu plus clair que la couleur de la boîte principale. Celui-ci. Maintenant, avant de passer à autre chose, isolons cette couche afin de voir ce que nous faisons. On le voit à peine. Essayons d' augmenter la largeur à 200. C'est mieux Essayons ensuite de choisir une couleur plus claire. D'accord. Et maintenant, essayons d' ajuster l'épaisseur. Mettons-le à six et voyons à quoi cela ressemble. C'est mieux Réglons maintenant l'intensité des arêtes. Je vais le mettre à 120. Ça a l'air bien. Je vous montre toutes ces étapes de va-et-vient afin que vous puissiez comprendre les propriétés avec lesquelles vous devez jouer et avoir une idée générale de l' apparence du faisceau pour obtenir les meilleurs résultats. Et pour cela, je dois également vous montrer les situations où le faisceau ne semble pas correct. C'est pourquoi je prends de mauvaises décisions en cours de route. C'est bon. Dissolons maintenant la couche pour voir à quoi elle ressemble avec le reste de la configuration Je trouve que ça a l'air génial. Et maintenant, je veux vous montrer une astuce simple pour le rendre beaucoup plus premium. Nous allons créer un effet de lueur intérieur qui suivra le faisceau. Laissez-moi vous montrer ce que je veux dire. Tout d'abord, vérifions-nous qu'aucune couche n'est sélectionnée. Sélectionnez ensuite l'outil Ellipse et maintenez la touche Maj enfoncée pour créer une ellipse proportionnelle Réglons la taille de l'ellipse sur 500 et veillons à désactiver la couleur du trait, puis ajoutons une couleur de remplissage Au fait, je le fais depuis le panneau des propriétés, mais vous pouvez également le faire à partir d'ici. D'accord, pour la couleur, nous devons choisir quelque chose légèrement plus clair que la couleur de la boîte principale Pour l'instant, allons-y avec cette couleur marron. Maintenant, sélectionnons cette couche et changeons le nom Inner Glow. C'est bon. Maintenant que c'est fait, nous devons faire en sorte que cette ellipse crée l'illusion d' une lueur intérieure qui semble provenir du faisceau situé dans le coin Amenons donc d'abord l'ellipse dans le coin supérieur gauche Nous devons maintenant utiliser la fonction Trackmat pour que l'ellipse ne soit visible que dans la zone principale de la boîte. Pour cela, nous devons faire glisser le fouet du tapis de piste de la couche d'ellipse vers la couche de boîte principale. Maintenant, l'ellipse n'est visible que dans la boîte principale. Il utilise cette couche comme masque. La dernière chose à faire maintenant est de réactiver la couche de boîte principale, car elle a été automatiquement désactivée une fois que nous l'avons définie comme alpha mat pour la couche d'ellipse Génial. Passons maintenant à l'étape suivante, qui consiste à faire ressembler cette ellipse à une lueur ou à un projecteur Pour cela, nous devons ajouter l'effet Fast Box Blur. Encore une fois, j'utilise le nouveau panneau d'application rapide, mais vous pouvez également trouver cet effet dans l'onglet Effets et préréglages OK, donc une fois que vous avez appliqué l'effet, ajustons le rayon de flou Réglons-le sur 80 pour le moment. Comme vous pouvez le constater, cela ressemble déjà à un projecteur provenant du faisceau. Plus tard, nous l'animerons avec le faisceau. Mais pour l'instant, pour terminer l'étape, plaçons la couche luminescente intérieure dessous de toutes les couches de traits afin que nous puissions les voir. Génial Ça a l'air génial. Avec cela, nous avons presque complètement fini de configurer l'effet de faisceau. Et avant de passer à l' amélioration de l'apparence avec des effets et des animations, nous pouvons maintenant ajouter le design SACUI que nous avons reçu du client ou que nous avons conçu nous-mêmes C'est ce que nous ferons dans la prochaine leçon. Alors, on se voit dans le prochain. 4. Ajouter la conception de l'UI et l'éclat intérieur: Bon retour. Nous allons maintenant commencer à concevoir notre scène, commençant par la conception de l'interface utilisateur SAS. Dans notre cas, allons dans le dossier Assets et faisons glisser le fichier Solara Dashboard Illustrator dans le projet Nous allons l'importer sous forme de composition car nous avons besoin toutes les couches de ce dessin soient séparées afin de pouvoir les animer individuellement. Pour les dimensions du métrage, nous choisirons la taille de la couche. Lorsque vous importez un fichier, deux options s'offrent à vous : taille du document ou taille de couche. La taille du document intègre chaque couche dans After Effects aux dimensions du document original dans lequel elle a été créée. Dans notre cas, il s'agit du document Illustrator complet, qui est très volumineux. Cela signifie que les limites de chaque couche seront très grandes, ce qui complique considérablement son animation. La taille des calques, quant à elle, introduit chaque calque dans After Effects avec les dimensions de l'élément qu'il contient uniquement. Ainsi, si votre design comporte un petit bouton, ses limites de couche seront petites et serrées, exactement de la taille de cet élément. Il est ainsi beaucoup plus facile et confortable de travailler avec Animate. Génial. Une fois terminé, importons également le logo depuis le dossier des actifs. Cette fois, nous n'avons pas besoin de séparer les couches Nous allons donc les importer sous forme de métrage avec des couches de fusion. L'intégralité du logo est ainsi intégrée dans After Effects sous la forme d'une seule couche. Génial. Commençons maintenant par placer le logo dans la composition. Le logo doit être placé quelque part dans le coin supérieur gauche. Trouvons donc l'échelle et la position correctes pour cette couche. C'est bon. Une fois cela fait, assurons-nous d'activer l'option de réduction des transformations. Si vous ne le connaissez pas, voici ce qu'il fait en termes simples. Normalement, dans After Effects, lorsque vous agrandissez un calque, celui-ci perd en qualité et commence à paraître flou ou pixelisé Lorsque vous activez les transformations de réduction, After Effects ignore ce processus et utilise à la place les données du fichier d'origine, ce qui garantit une qualité irréprochable. Maintenant, notre logo a été créé dans Illustrator, un programme vectoriel. Les graphiques vectoriels ne contiennent pas de pixels, ce qui signifie qu'ils peuvent être redimensionnés à n'importe quelle taille sans perte de qualité En activant les transformations de réduction. After Effects obtient directement ces données vectorielles, de sorte que la couche reste toujours nette et nette, quelle que soit sa taille. C'est bon. Cela fait, ajoutons maintenant les précompositions de conception du tableau de bord à notre scène afin de créer la mise en page dont nous avons besoin pour présenter la plate-forme SAS Ma suggestion : lorsque vous souhaitez créer une scène avec un design d'interface utilisateur et l'animation Border Beam, conservez toujours votre design d'interface utilisateur dans une précomposition Il sera ainsi beaucoup plus facile d'animer les panneaux intérieurs plus tard dans le processus OK, alors maintenant, dans mon cas, je ne veux pas présenter le tableau de bord complet tel quel. Je ne souhaite pas afficher le menu principal de gauche ou la zone supérieure. Je veux juste les panneaux à l'intérieur. Entrons donc les précompositions et ajustons certaines couches. Tout d'abord, je vais commencer par désactiver la couche d'arrière-plan car nous n'en avons pas besoin. Nous avons déjà la boîte principale et la composition principale. Très bien, revenons aux précompositions, sélectionnons maintenant toutes les couches dans la zone de gauche et désactivons-les. Faisons de même avec la zone supérieure. Génial. Une fois cela fait, avant de revenir à la composition principale, sélectionnons toutes les couches avec Control ou Command sur Mac et A, et réduisons-les toutes. Nous faisons cela parce que nous voulons que toutes les couches soient de la plus haute qualité lorsque nous redimensionnons ce design dans la composition principale. Et ici, dans la composition principale, nous devons également réduire les précompositions, afin After Effects puisse les afficher qu' After Effects puisse les afficher avec la meilleure qualité possible lorsque nous les agrandissons D'accord. Une fois cela fait, continuons à ajuster le logo et le design de l'interface utilisateur jusqu'à obtenir une belle mise en page. OK. À ce stade, je souhaite adapter les précompositions à la largeur de la boîte principale Pour cela, je vais d'abord m'assurer que le point d'ancrage est positionné dans le coin supérieur gauche des précompositions Sélectionnez donc d'abord l'outil de point d'ancrage, puis maintenez la touche Catrol ou Command enfoncée sur Mac et déplacez le point d'ancrage au bon endroit De cette façon, il s'accrochera rapidement au coin de la rue. Zoomons et ajustons-le une fois de plus. Génial. Et maintenant, ajustons l'échelle des précompositions jusqu'à ce que nous obtenions ce que nous voulons Je vais le régler sur 126 , puis m'assurer qu'il est aligné au centre de la composition. Ça a l'air super. L'étape suivante consiste à masquer les précompositions, car comme vous pouvez le constater, de nombreuses zones de conception vont au-delà des dimensions de la boîte principale Donc, d'abord, assurons-nous que les précompositions sont sélectionnées, puis sélectionnons l'outil du rectangle arrondi Dessinons maintenant un joli masque pour les précompositions. Ne relâchez pas encore le clic gauche. Je veux que tu utilises la molette de la souris pour ajuster les coins arrondis du masque. Si vous n'avez pas de molette de souris, vous pouvez également le faire en appuyant sur les flèches haut ou bas de votre clavier. Ce n'est qu'après avoir ajusté la rondeur que vous pouvez relâcher le clic pour appliquer le masque ? Génial. Et maintenant, je veux vous montrer une petite astuce qui améliorera un peu le design. Je n'aime pas la façon dont le masque recadre les couches situées dans la partie inférieure. Pour l'adoucir, nous pouvons ouvrir les propriétés du masque et augmenter les propriétés de la plume du masque Réglons-le sur 50 pour le moment. Jouons ensuite avec la propriété d'expansion du masque jusqu'à obtenir un joli soft. Écoutez, dans notre cas, nous pouvons le mettre à -35 Ça a l'air bien mieux maintenant. Mais supposons que vous ne vouliez pas que les zones intérieures supérieures soient affectées par le plumage du masque Pour cela, nous pouvons sélectionner l'un des points du masque, puis sélectionner tous les points situés le long la zone supérieure et les déplacer vers le haut. Faisons de même avec les zones latérales. OK, maintenant la configuration est pratiquement prête pour l'animation. Mais il y a une chose que je voudrais vous montrer qui améliorera l' apparence de l'animation finale, c'est de faire en sorte que le faisceau révèle le design de l'interface utilisateur. Nous pouvons le faire en utilisant la couche luminescente interne que nous avons créée. Laissez-moi vous montrer ce que je veux dire. Pour obtenir un effet révélateur, il suffit de rendre les précompositions du tableau de bord visibles uniquement dans les limites de la couche luminescente intérieure, et nous pouvons le faire à l'aide de la fonction Track Mat Nous devons faire en sorte que les précompositions utilisent l'alpha de la couche luminescente intérieure Faites donc glisser le fouet API Trach Mat de la précomposition vers la couche luminescente intérieure Et pour terminer, n' oublions pas de réactiver la lueur intérieure. Et maintenant, comme vous pouvez le constater, nous obtenons cet effet de révélation vraiment cool qui ressemble à un projecteur sur le design de l'interface utilisateur de la société SAS. Génial. Maintenant que c'est fait, nous avons une dernière chose pratique à faire pour terminer la configuration. Comme vous pouvez le voir, à l'heure actuelle, lorsque je déplace la zone principale, tous les autres éléments de la scène restent en place, mais nous avons besoin qu'ils se déplacent et suivent la boîte principale, puisque c'est la couche que nous allons animer dans une minute Avant de commencer l'animation, associons tous les éléments à la couche de boîte principale. Maintenant. Commençons par la couche lumineuse intérieure. Ne confondez pas le fouet du tapis de course avec le fouet du parent et de la fonction de liaison. C'est bon. Passons maintenant au logo et, enfin, à la préconfiguration du design du tableau de bord Génial. Sauvegardons le projet avant de passer à autre chose. Dans la leçon suivante, nous allons enfin commencer à animer le faisceau et passer en revue tous les défis que vous pourriez rencontrer en cours de route Ça va être très amusant, alors je te verrai là-bas. 5. Animer la poutre: Reviens. À ce stade, nous avons fini de configurer notre scène et nous sommes prêts à commencer l'animation. Mais avant d'entrer dans le vif du sujet, je tiens à mentionner quelque chose d'important. Au fur et à mesure que nous animons, nous allons rencontrer quelques problèmes, et je le fais exprès Au lieu de simplement vous dire ce qui peut mal tourner, je veux que vous rencontriez ces problèmes vous-même de la même manière que vous feriez lorsque vous travailliez sur votre propre projet. C'est la meilleure façon d'apprendre car à la fin de cette leçon, vous saurez non seulement comment résoudre ces problèmes, mais aussi comment les éviter complètement. Vous connaîtrez le bon ordre des étapes, ce qu'il faut faire en premier, ce qu'il faut faire ensuite, sorte que la prochaine fois que vous commencerez à animer une scène comme celle-ci, de sorte que la prochaine fois que vous commencerez à animer une scène comme celle-ci, vous pourrez le faire en douceur et en toute confiance sans rencontrer ces Commençons donc à animer et à relever ces défis ensemble. Disons que dans mon storyboard, j'ai décidé de présenter le tableau de bord sur le côté droit de la scène Redimensionnons donc maintenant la couche de boîte principale et positionnons-la correctement dans la scène. Nous pouvons utiliser la grille proportionnelle pour obtenir une composition bien équilibrée. Mettons-le quelque part par ici. Génial. Nous pouvons maintenant désactiver le réseau. Génial Commençons maintenant à créer l'animation de l'effet de faisceau que nous avons configuré. Nous pouvons commencer par animer d'abord la couche luminescente intérieure. Assurons-nous d'être au début de la chronologie. Et maintenant, commençons à créer l'animation de la lueur intérieure venant du bas. J'aime placer la couche luminescente intérieure exactement sur le côté gauche de la boîte principale, puis, tout en maintenant la touche Shift enfoncée, faire glisser vers le bas sur une trajectoire droite. Maintenant, appuyons sur P pour ouvrir la propriété position, créer une première image clé avec les valeurs actuelles puis passons, disons, aux trois secondes et faisons glisser la couche vers le haut jusqu'à ce que nous atteignions le coin supérieur gauche de la boîte principale. Génial. Maintenant, avançons de 3 secondes supplémentaires jusqu'à sixième et déplaçons cette couche hors du cadre par le côté droit. Génial Nous avons donc maintenant une belle animation de révélation. Pour rendre le dévoilement un peu plus visible, ajoutons également une animation à échelle à cette couche. Ainsi, au début de l'animation, l'échelle sera de 100 %. Ensuite, à la troisième étape, redimensionnons-le à 200 %, par exemple. C'est trop. Essayons 180. Passons ensuite à la sixième et ramenons l'échelle à 100. Génial Nous avons donc maintenant une belle animation Spotlight qui révèle le design de l'interface utilisateur. Et avant de poursuivre, je voudrais vous faire une petite suggestion lorsque vous commencerez à animer. Ne vous précipitez pas pour ajuster l'atténuation des images-clés et essayez de créer immédiatement un mouvement fluide abord, je vous suggère de terminer l'animation complète avec des images-clés linéaires ordinaires, et une fois que vous êtes satisfait de l'animation, passer à l' amélioration du mouvement à l' aide de l'éditeur de graphes de vitesse Très bien, passons à l'animation. À ce stade, je souhaite améliorer la trajectoire de mouvement initiale de la couche luminescente intérieure. Pour commencer, sélectionnons la couche. Maintenez ensuite l'outil Épingle enfoncé pour ouvrir le menu de l'outil Épingler et sélectionner l'outil de conversion de vertex Maintenant que la couche luminescente intérieure est sélectionnée, cliquons une fois sur ce point pour courber le chemin de position que nous avons créé. Nous pouvons maintenant revenir à l'outil Épingle puis à l'outil de sélection pour ajuster les poignées de cette trajectoire. J'essaie juste de créer un joli petit mouvement arrondi. Je ne veux pas qu'il bouge d'une manière brusque et droite. Génial. Cela a donc l'air sympa, et nous sommes prêts à passer à autre chose et animer l'effet de balayage sur la couche principale de la boîte. Mais avant cela, pour une meilleure organisation de notre chronologie, sélectionnons les couches de traits et marquons-les en orange ou dans toute autre couleur pour les différencier des autres couches. Nous pouvons désactiver ces couches pour le moment. Nous allons également sélectionner la couche luminescente intérieure et l'étiqueter également dans une couleur différente. Nous pouvons également désactiver cette couche pour le moment. Bon, nous pouvons maintenant commencer à animer l'effet de balayage. Pour voir ce que nous faisons encore mieux, appuyons sur les touches Ctrl ou Commande sur Mac et décalons la touche H pour masquer les limites des couches. De cette façon, nous pouvons voir l' effet de balayage beaucoup plus clairement. C'est bon. Nous allons maintenant animer la propriété direction d'abord, bien sûr, nous devons nous assurer que nous sommes au début de la chronologie. Et maintenant, commençons à animer la direction. Comme vous pouvez le constater, lorsque le balayage atteint la partie inférieure de la composition, nous pouvons le voir devenir visible sur le bord inférieur de la scène Cela est dû à la façon dont les calques de forme et les effets fonctionnent ensemble dans After Effects. Mais pour nous, la raison n'a pas vraiment d'importance. Ce qui compte, c'est de savoir comment l'éviter. Et après quelques recherches et essais et erreurs, j'ai découvert que la solution la meilleure et la plus rapide consiste à appliquer l'effet luminescent. Laissez-moi vous montrer ce que je veux dire. Cherchons l'effet de lueur et appliquons-le à cette couche. Comme vous pouvez le constater, nous nous débarrassons immédiatement de cette situation étrange que nous avions auparavant. Le seul inconvénient de cette solution est que l'effet de lueur crée une petite ombre foncée. C'est à peine perceptible. Mais il est important de mentionner que, comme nous créerons la plupart du temps une animation de faisceau de bordure pour scènes très sombres, ce n' est pas un gros problème. Le spectateur ne remarquera probablement pas cette petite ombre. Dans les dernières étapes du cours, je vais vous montrer comment vous en débarrasser complètement. Mais pour l'instant, je veux vous montrer ce qu' il faut faire si vous voulez minimiser l'ombre. Tout d'abord, vous pouvez réduire le rayon de lumière à zéro. Mais ensuite, je vous suggère de vérifier si le balayage n'est toujours pas visible en bas de la scène Comme vous pouvez le constater, on en voit encore un peu. Alors, jouez avec elle jusqu'à ce que vous trouviez le bon équilibre. Laissons-le à 30 pour le moment. Nous y reviendrons plus tard. Pour l'instant, concentrons-nous sur l' animation de l'effet de balayage. Notre objectif est de faire correspondre cette animation au mouvement lumineux intérieur. Alors que nous sommes au début de la chronologie, fixons la direction à -120 Le balayage se fera donc dans la partie inférieure du cadre. Maintenant, pour ce qui est de la deuxième image-clé, nous ne la créerons pas à la troisième seconde, comme nous l'avons fait avec la couche luminescente intérieure Et c'est parce que nous avions besoin la couche luminescente intérieure pour atteindre le coin de la boîte principale, c'est pourquoi nous avions besoin de ces images-clés du milieu Pour le balayage, nous n'avons pas besoin de le faire puisque le balayage suit le virage Passons donc aux six secondes et définissons la direction à une valeur où nous pouvons voir que le balayage s'effectue hors du cadre depuis le côté droit Dans notre cas, nous pouvons le fixer à 60. Et maintenant, avant de passer à autre chose, je voudrais mentionner une chose très importante. Si l'effet de balayage n'est pas centré sur votre couche, l'animation de balayage paraîtra un peu décalée et il sera difficile de l'adapter au mouvement de lueur interne Assurez-vous donc de ne pas avoir sauté la partie plus tôt dans le cours où nous avons centré l'effet de balayage. OK. Désactivons maintenant l'arrière-plan transparent dans le panneau d'aperçu et commençons à animer les traits. À commencer par le plus gros. Permettez-moi d'appuyer sur Catrol et de déplacer à nouveau H pour masquer les limites de la couche OK, ajustons maintenant la propriété de décalage jusqu'à ce que nous voyions que le trait sort du cadre en bas à gauche. Notre objectif est de faire correspondre l'animation du trait au mouvement lumineux intérieur. Pendant que je le fais, je remarque que le coup est un peu trop long, à mon avis Pour le raccourcir, il suffit de réduire la propriété finale. Réglons-le sur 15. OK, c'est mieux. Animons maintenant le décalage. Au début de l'animation, définissons-la sur -135 et créons les premières images-clés Passons maintenant au sixième et ajustons le décalage jusqu'à ce que le trait soit hors du cadre depuis le côté supérieur droit. Nous pouvons le régler à 320. Comme vous pouvez le constater, nous obtenons déjà un très bel effet de faisceau de bordure, et avec l'animation révélatrice, il est encore plus élégant. Génial. Et maintenant, pour terminer, animons le petit trait Le but n'est pas de le placer trop loin derrière le gros coup, car nous avons besoin qu'il corresponde au mouvement de la lueur intérieure et du gros coup. Nous verrons bientôt si nous avons fait du bon travail. Pour les dernières images-clés, nous pouvons régler le décalage à 315. Voyons maintenant à quoi tout ressemble. Comme vous pouvez le constater, le petit trait ne correspond pas au mouvement des autres, et peut-être que vous aimez vraiment ce look. Mais à mon avis, cela aura une bien meilleure apparence s'ils sont tous synchronisés. Voyons donc ce que nous devons faire pour résoudre ce problème. abord, vous pouvez bien sûr ajuster vos images-clés et essayer de deviner les meilleures valeurs pour le décalage Mais comme vous pouvez le constater, vous aurez besoin de beaucoup d'essais et d'erreurs pour bien faire les choses. Et c'est exactement ce que je voulais dire quand j'ai dit, avant de commencer à animer, que nous allions rencontrer des problèmes pendant la phase d'animation C'est le principal problème que vous pouvez rencontrer en utilisant cette technique. Je voulais que vous en fassiez l'expérience plutôt que d'en entendre parler. Le problème auquel nous sommes confrontés est dû au fait que nous avons suivi le mauvais flux de travail. Lorsque nous créons l' animation du faisceau, nous devons voir la position de départ de chaque élément et effet dans notre configuration afin de pouvoir associer tous les mouvements. Dans notre cas, nous avons donc commencé à animer les effets un peu trop tôt. Dans une minute, tu comprendras exactement ce que je veux dire. Passons donc en revue le bon flux de travail. abord, ramenons l'échelle de la boîte principale à 100 , puis alignons-la au centre de la composition. Maintenant, nous pouvons voir clairement tout le dessin et nous pouvons voir les positions de départ de tous les éléments qui créent le faisceau. Cela signifie que nous pouvons désormais ajuster les valeurs de toutes les images-clés que nous avons créées Assurez-vous donc d'être au début de l'animation, et commençons par ajuster la valeur du décalage du gros trait. Comme vous pouvez le constater, le point de départ de ce trait ne correspond pas au point de départ du balayage de la lueur intérieure Il est un peu en retard, il faut donc le déplacer un peu vers la gauche. Nous pouvons régler le décalage à 160. Génial. Maintenant, ajustons le petit trait. Nous pouvons régler le décalage à 170. Une fois terminé, passons à la fin de l'animation et ajustons les valeurs. Voyons quelle valeur convient mieux au décalage du gros trait. Je pense que nous pouvons le fixer à 350. Passons maintenant au petit coup. Nous pouvons régler le décalage ici à 360, ce qui s'affichera sous la forme d'une rotation complète. Voyons à quoi ça ressemble. Génial Comme vous pouvez le constater, lorsque tout est assorti, le faisceau est bien meilleur. Mais je pense que nous pouvons également ajuster le mouvement de la lueur intérieure pour mieux la synchroniser avec les traits. Je vais commencer par les dernières images-clés. Déplaçons-le un peu vers la droite. Cela ne semble toujours pas complètement synchronisé, et cela est dû aux images-clés en position centrale Supprimons les images-clés du milieu et voyons si nous pouvons toujours obtenir ce mouvement de courbe d'une autre manière C'est en fait assez simple. Il suffit d'utiliser à nouveau l'outil de conversion des sommets, mais cette fois sur le premier et le dernier point du chemin de position de cette couche Revenons maintenant à l'outil de sélection et ajustons les poignées pour obtenir un joli mouvement arrondi. Et maintenant, comme vous pouvez le constater, tous les éléments qui créent le faisceau sont parfaitement synchronisés entre eux, et c'est superbe Je voulais vous montrer ce processus de va-et-vient afin que vous puissiez découvrir ce qui affecte votre flux de travail et erreurs à éviter pour obtenir les meilleurs résultats. Ainsi, avant de redimensionner votre design, concentrez-vous d' abord sur la réduction du mouvement , puis passez au positionnement ou à la mise à l'échelle de votre design principal Cela dit, redimensionnons maintenant la boîte principale à 150 et repositionnons-la à l'endroit agréable où elle se trouvait. Génial Tout a l'air parfait. Mais je viens de remarquer que je n'avais pas besoin de supprimer l'image-clé d'échelle pour la couche luminescente intérieure Mettons-nous donc au milieu de l'animation et redimensionnons la couche ici à 150. Voyons à quoi ça ressemble. Ça a l'air sympa, mais j'ai remarqué que je pouvais voir l'effet de balayage apparaître sur les bords de la composition C'est probablement parce que j'ai accidentellement désactivé l'effet de lueur. Alors permettez-moi de le rallumer. Génial. Cela fait, nous sommes maintenant prêts à passer à l' étape suivante où nous allons commencer à améliorer l'apparence du faisceau à l'aide de quelques effets simples. Et nous allons faire tout cela dans la prochaine et dernière leçon. Alors restez concentré un peu plus longtemps. On se voit dans le prochain. 6. Peaufinage final et résolution des problèmes courants: Bienvenue à la leçon finale. Nous sommes maintenant prêts à passer à l'étape suivante où nous allons commencer à améliorer l'apparence du faisceau à l'aide de quelques effets simples. Bien, commençons par travailler sur le Big Stroke, sélectionnons-le et ajoutons l'effet de lueur. Génial. Maintenant, ajustons le rayon de lueur. Je pense que nous pouvons le fixer à 60. Ensuite, dupliquons l'effet et réglons le rayon de lumière sur une valeur légèrement supérieure. Allons-y avec 80. Maintenant, dupliquons-le une dernière fois et réglons le rayon de lueur sur 120. Génial. Nous pouvons donc maintenant revenir à la première lueur et jouer avec le rayon de lueur jusqu'à obtenir le look que nous voulons. C'est un bon moyen d' obtenir une belle lueur au cas où vous n'auriez pas branché le bouchon Deep Glow. C'est bon. La lueur est superbe, mais pour une raison ou une autre, je ne peux pas voir l'effet de balayage que nous avons créé pour la couche principale de la boîte Désactivons les deux couches traits et essayons de comprendre pourquoi. Passons d'abord au code temporel où le balayage doit être visible Essayons maintenant de désactiver et d'activer l'effet de lueur pour voir si c'est la cause du problème Je peux voir le balayage, mais c'est à peine perceptible. Je ne pense donc pas que l' effet de lueur soit le problème. Le vrai problème, c'est que la couche luminescente intérieure se trouve au-dessus de la couche principale du boîtier et empêche l' effet de balayage de transparaître Lorsque vous consacrez beaucoup de temps à un projet, il est facile de se perdre et passer à côté de la véritable cause du problème. La plupart du temps, cela s'avère être quelque chose simple, comme l'ordre de vos couches. Donc, chaque fois que quelque chose ne va pas, commencez toujours par vérifier la cause la plus simple possible. Maintenant que nous connaissons la cause du problème, nous devons trouver une solution. Nous ne pouvons pas simplement déplacer la couche luminescente intérieure sous la boîte principale , car elle serait alors cachée en dessous. La meilleure approche consiste à utiliser un mode de fusion sur la couche luminescente intérieure. Laissez-moi vous montrer ce que je veux dire. Si la colonne des modes de fusion ne s'affiche dans votre chronologie, cliquez ici Dans notre cas, les meilleures options à essayer sont Ajouter, Éclaircir ou filtrer Lorsque nous appliquons l'un de ces modes de fusion, les zones sombres de la couche lumineuse intérieure deviennent transparentes, car les publicités, écrans et les éclaircissements fonctionnent tous en ignorant les pixels sombres et en ne conservant que les pixels clairs Cela signifie que l'effet de balayage créé la couche principale de la boîte peut désormais être par la couche principale de la boîte peut désormais être visible alors que la couche luminescente intérieure a toujours l' apparence que nous voulions Cette courte vidéo de la chaîne YouTube Adobe Video explique tous les modes de fusion d'une manière très facile à comprendre Je vous suggère de le regarder pour enfin mieux comprendre tous les modes de fusion et surtout, quand utiliser chacun d' accord ? Revenons au projet. Dans notre cas, allons-y avec Lighten. Maintenant, nous pouvons également voir la couche luminescente intérieure et le balayage que nous avons créé pour la couche principale de la boîte Nous pouvons maintenant réactiver toutes les couches de traits. Avant de poursuivre, si la lueur est trop forte pour vous, vous pouvez placer le calque à gros traits avec les effets de lueur sous le calque de la boîte principale. De cette façon, vous obtiendrez un bel effet de lueur, mais celui-ci se trouvera derrière le boîtier principal, comme une petite source de lumière qui suit le faisceau. Dans mon cas, je préfère que ce soit au top, alors je vais le ramener à ce qu'il était. Génial. Et maintenant c'est l' étape que j'aime le plus. À ce stade, j'adore m' occuper de la configuration et peaufiner les effets. Par exemple, je peux peut-être ajuster l' effet de balayage et l' agrandir un peu ensuite, je peux peut-être ajuster le point de départ du gros trait et l'abaisser légèrement, afin que nous ne le voyions pas trop au début de l'animation Je pense que je peux aussi ajuster le point de départ du balayage et le baisser légèrement Je vous montre ces étapes afin que vous sachiez quels paramètres ajuster et avec lesquels vous pouvez jouer. OK, et maintenant passons à autre chose et changeons la couleur du faisceau car il semble un peu trop rouge, à mon avis. Pour changer la couleur du faisceau, vous devez trouver la couche d' où provient la couleur. La plupart. Dans la configuration, il s'agit de la couche Big Stroke. Sélectionnons-le donc et changeons la couleur du trait. Mais comme la couche présente quelques effets de lueur, le moindre changement de couleur affectera considérablement l'apparence. Donc, pour changer la couleur de la bonne manière, je vous suggère de l'ajuster individuellement sur chaque canal de couleur. Dans mon cas, j'essaie de le rendre plus orange que rouge. Génial. Une fois cela fait, nous avons fini de créer le faisceau, et nous pouvons maintenant ajouter un joli arrière-plan. Pour ce style de scène, il est préférable d'utiliser une scène sombre. Créons-en un ensemble. Créons d'abord un nouveau solide. Vous pouvez utiliser le raccourci Cutrll ou Command sur Mac et Y. Nous pouvons le nommer BG, puis nous assurer qu'il correspond à la taille de la composition Pour la couleur, rendons-la noire. Appliquons maintenant un simple effet de rampe de dégradé et créons un dégradé brun foncé. Mais d'abord, déplaçons le solide sous toutes les couches. C'est vrai. Maintenant, sélectionnons l'effet pour voir les points du dégradé. Nous ne pouvons pas les voir car nous avons masqué les limites des couches pour les rétablir. Utilisons le raccourci Ctrl et Shift H. Génial et Shift H. Et maintenant, changeons d'abord le type de dégradé en radial. Une fois terminé, choisissons une couleur pour cette zone. Nous pouvons goûter à cette couleur brune. Ensuite, pour le reste du dégradé, nous pouvons échantillonner cette couleur marron plus foncé. Génial. Et maintenant, déplaçons la zone la plus claire vers la droite et la zone la plus sombre vers le côté inférieur gauche. Maintenant, pour rendre la scène plus dynamique, animons le dégradé Passons d'abord au début de l'animation et créons des images-clés pour les points de départ et de fin du dégradé Passons maintenant à la fin de l'animation et ramenons le point de départ ici et le point de fin ici. Cela créera l'illusion que l'arrière-plan possède également une source de lumière affectée par le faisceau. Ça a l'air super. Mais je viens de remarquer que le logo n'est pas affecté par l'animation de révélation. Pour résoudre ce problème, il suffit de définir la couche luminescente intérieure comme mat alpha pour la couche de logo, ce qui signifie que la couche de logo ne sera visible dans les limites de la couche luminescente intérieure, exactement comme nous l'avons fait avec les précompositions du tableau de bord Génial. Désormais, la couche lumineuse intérieure révèle à la fois le logo et le design du tableau de bord. Voyons à quoi tout ressemble. Je trouve que ça a l'air génial. Nous pouvons maintenant donner à la scène un aspect un peu plus cinématographique en effectuant quelques petits ajustements de correction des couleurs Pour cela, créons d'abord un nouveau calque de réglage , puis appliquons un effet HLS de bruit Je préfère cet effet de bruit car il donne un peu plus de contrôle que le bruit normal. Fixons ici toutes les valeurs de propriété à 1 %. Permettez-moi de zoomer pour vous montrer la différence avec et sans le bruit. Comme vous pouvez le constater, cela améliore l'apparence des dégradés de la scène et élimine cet aspect trop numérique. C'est bon. Maintenant, nommons cette couche de réglage «   bruit » et, juste après, ajoutons une autre couche de réglage et appliquons un effet de courbes simple. Ajustons maintenant les courbes pour que la scène soit un peu plus nette et spectaculaire. Cela semble un peu mieux, à mon avis. N'oubliez pas de nommer cette couche « courbes » avant de passer à autre chose. C'est bon. Et maintenant, terminons le cours en réglant le petit problème parallèle que nous avons ici. Il a été créé à cause de l'effet de lueur. Nous avons ajouté une couche à la boîte principale. N'oubliez pas que nous l'avons ajoutée pour éviter que l'effet de balayage ne soit visible sur les bords de la composition Alors maintenant, nous allons apprendre à nous débarrasser définitivement de cette ombre. Tout d'abord, sélectionnez la couche principale de la boîte et dupliquez-la. Maintenant, changez le nom de cette nouvelle couche en « sweep ». Ensuite, sélectionnez la couche de boîte principale et désactivez les effets sur celle-ci. Pour la couche de balayage, nous laissons tous les effets activés, mais nous apportons un petit ajustement à l'effet de balayage Modifiez la réception de la lumière pour la couper. Ainsi, seul l'effet sera visible pour cette couche. La forme elle-même ne sera pas visible. Pour mieux voir les choses, laissez-moi utiliser le nouveau calque en solo afin que nous puissions voir uniquement ce que vous pouvez voir Nous ne voyons désormais que l'effet de balayage, nous ne laissant que les zones les plus claires visibles, ce qui fait disparaître l' ombre créée par l'effet de lueur Et c'est le moyen le plus simple de perfectionner notre configuration de poutrelles de bordure. Pour terminer, n'oublions pas de relier la nouvelle couche à la couche de boîte principale. Il se déplace donc comme une seule unité. Et comme nous voulons que la forme de la nouvelle couche suive et reste synchronisée avec celle de la couche de cadre principale, n' oublions pas de relier propriétés de forme de la couche de balayage aux propriétés de forme de la couche de cadre principale, exactement de la même manière que nous avons propriétés de la couche de contour à la boîte principale au début de la configuration Cela fait, nous avons maintenant complètement terminé la configuration de l'animation Border Beam. Et avant de terminer, je voudrais vous montrer comment vous pouvez l'utiliser pour d'autres compositions. Si vous en avez besoin dans d'autres scènes ou projets, la première chose à faire est de dupliquer la précomposition avec la configuration du faisceau depuis le panneau de projet Vous pouvez appeler cette composition «   Border Beam setup ». Maintenant, entrons dans cette composition et ajustons quelques petites choses pour la préparer à une utilisation ultérieure Tout d'abord, redimensionnons la boîte principale à 100 et alignons-la au centre de la composition. Et maintenant, si vous devez remplacer le design de l'interface utilisateur, supprimez simplement les couches de conception actuelles dans la couche d'arrière-plan. Vous pouvez maintenant faire glisser cette configuration dans votre scène et l'adapter à votre projet. N'oubliez pas que pour modifier les dimensions de la configuration, vous devez le faire en ajustant la taille de la couche de boîte principale. C'est bon. Dans mon cas, je n'ai pas besoin de cette configuration supplémentaire, je vais donc supprimer la nouvelle composition maintenant Clôturons également ces précompositions. Génial. Une fois cela fait, vous pouvez maintenant animer la position de la couche de boîte principale Habituellement, dans ce type de scène, il y a un léger mouvement de droite à gauche, alors n'hésitez pas à le faire, ou à faire toute autre animation douce que vous aimez. Peut-être qu'un mouvement de bas en haut pourrait également convenir à la scène. N'hésitez pas non plus à ajuster certaines propriétés. Si vous en avez envie, par exemple, je pense que ma zone de révélation devrait être un peu plus douce Je vais donc sélectionner la couche de luminescence intérieure et augmenter le rayon de flou Et avant de clore le projet, organisons-le. Créons d'abord un nouveau dossier dans le panneau du projet nommé assets et y glissons tous les actifs que nous avons utilisés dans le projet. Une fois terminé, créons un autre dossier nommé precomps et faisons-y glisser toutes les précompositions que nous avons créées pendant le cours , à l' exception Dans notre cas, il ne s'agit que des précompositions du tableau de bord. Génial. Et avec cela, nous avons terminé le cours. Et oui, je sais qu' il existe un moyen de tout connecter à l'aide d'expressions, au lieu de déplacer et d' animer manuellement chaque élément de cette configuration Mais honnêtement, je préfère laisser les choses telles quelles parce que j'adore avoir la possibilité d' animer chaque élément séparément au cas où je souhaiterais retarder l'animation de certains éléments et créer une scène plus intéressante où l'animation du faisceau n' est pas parfaitement synchronisée Et voici une autre technique rapide que j'adore utiliser lorsque je veux que la scène soit plus vivante, et qui consiste à ajouter une autre source de lumière à l'arrière-plan. Laissez-moi vous montrer comment faire. Tu peux me suivre si tu veux. Assurez-vous d'abord qu'aucun calque n'est sélectionné, puis sélectionnez l'outil Stylo. Créez maintenant un simple triangle à angle droit. Une fois terminé, assurez-vous que le trait est désactivé et que le remplissage est activé. Pour le remplissage, vous pouvez choisir une couleur moyennement foncée parmi les zones lumineuses du faisceau Une fois cela fait, nommons forme du flou du calque, puis appliquons l'effet de flou rapide. Pour l'instant, fixons le rayon de flou à 120. Génial. Ensuite, pour le rendre un peu plus beau, vous pouvez sélectionner à nouveau l'outil Épingler et créer un point dans cette zone. Ensuite, à l'aide de l'outil Vertex, courbez le point pour obtenir un joli aspect arrondi Génial. Et maintenant, faisons pivoter la couche de 180 degrés et placez-la dans le coin supérieur gauche. Quelque part par ici, je pense que nous pouvons changer la couleur pour une couleur plus claire. Cela devrait fonctionner. Maintenant, pour ce qui est du flou, réglons-le sur 150 pour l' adoucir un peu plus Cela crée une illusion comme s'il y avait une source de lumière quelque part dans la zone gauche de la scène. Génial. Et maintenant, créons-en un autre qui servira de source de lumière provenant du faisceau. Pour cela, dupliquons le calque et faisons-le revenir à zéro degré. OK. Et maintenant, plaçons-le quelque part par ici dans la zone inférieure où le faisceau commence à provenir. Alors assombrissons un peu la couleur. Une fois cela fait, ajoutons maintenant l'effet de déplacement de turbulence à cette couche et ajustons certaines propriétés de base Pour le montant, nous pouvons le fixer à 100. Ensuite, pour ce qui est de la complexité, vous pouvez la définir sur 1,5 pour le moment. Maintenant, faisons bouger cette lumière abstraite. Pour cela, créons une expression simple pour l'évolution. Notez l'heure sous l'astérisque 100. Génial. Une fois cela fait, vous pouvez vérifier l'effet et jouer avec les propriétés pour lui donner l'apparence que vous souhaitez. Et une fois que vous serez satisfait du look, plaçons ces deux couches au-dessus la couche d'arrière-plan et animons-les très rapidement pour rendre la scène plus vivante. Pour celui du bas, nous pouvons le déplacer de gauche à droite pour donner l'impression que la lumière provient du faisceau, puis qu'elle disparaît lentement lorsque le faisceau quitte déjà cette zone Ça a l'air sympa. Enfin, nous pouvons maintenant animer la couche supérieure de gauche à droite, ainsi que pour donner l'impression que le faisceau illumine un peu la scène avec sa Il s'agit d'une touche simple que vous pouvez ajouter à vos projets, aussi bien pour les scènes sombres que pour les scènes lumineuses. Et, bien entendu, vous pouvez ajuster les effets de l'animation. Mais ce qui est important pour moi, c'est que vous compreniez l'idée principale selon laquelle, en quelques étapes simples, vous pouvez améliorer votre scène sans effets lourds ni plugins supplémentaires Cela dit, pour vos devoirs, je veux que vous changiez le design de l'interface utilisateur, changiez légèrement les couleurs du faisceau et de l'arrière-plan, et que vous ajustiez peut-être les dimensions de votre boîtier principal si nécessaire. Si vous le publiez sur les réseaux sociaux, n'oubliez pas de me taguer. Merci beaucoup d'avoir regardé, je vous verrai dans le prochain.