Comment créer des diapositives animées pour vos vidéos

1. Bienvenue dans ce cours: Tout le monde, je m' appelle Adi Purdila, et si vous réalisez des vidéos et que vous voulez les rendre plus professionnelles, ce cours est fait pour Je vais vous montrer comment créer des diapositives animées comme celle-ci, que vous pouvez utiliser directement dans vos vidéos. Nous allons le créer à partir de zéro dans Lodi Lab, outil d'animation basé sur un navigateur très facile à utiliser Nous allons commencer par apprendre comment fonctionne l'outil, puis créer une diapositive d'introduction à la leçon entièrement animée avec des animations de texte, des formes d'arrière-plan mobiles et un timing approprié pour tous les éléments Une fois la diapositive terminée, je vais également vous montrer comment l'exporter et la déposer dans un véritable éditeur vidéo afin que vous puissiez voir exactement comment elle s'intégrerait dans votre flux de travail. Nous venons juste de nous rencontrer, je m'appelle Adi. Je suis designer UIUX et professeur de design. Je crée des didacticiels et des cours vidéo depuis 2010, et honnêtement, depuis longtemps, je voulais ajouter plus d'animation à mes propres vidéos, mais les outils me semblaient toujours trop complexes. Quand j'ai découvert Lottielab, cela a changé, et c'est exactement pourquoi j'ai voulu créer Maintenant, voici quelques raisons pour lesquelles ce cours pourrait être pour vous. Tout d'abord, vous n'avez besoin d'aucune expérience en animation. Je vais tout vous expliquer étape par étape, et si vous n'avez jamais touché un outil d'animation auparavant, c'est très bien. Nous partons de zéro. Deuxièmement, ce que vous apprenez ici va au-delà de la création de diapositives. Une fois que vous avez compris le fonctionnement chronologies d'animation et que vous savez comment concevoir le mouvement, vous pouvez appliquer cela à n'importe quel projet d'animation, pas seulement aux diapositives vidéo Et troisièmement, à la fin de ce cours, vous aurez une véritable diapositive animée terminée que vous pourrez utiliser immédiatement dans vos vidéos. Ce cours s'adresse aux créateurs de contenu, aux enseignants et à tous ceux qui réalisent des vidéos. Aucune expérience en animation n'est requise. Cependant, je recommande d'avoir quelques connaissances de base sur Figma car nous les utiliserons pour intégrer le design dans Lottielab Très bien, j'ai hâte. J'espère que vous l'êtes aussi, alors allons-y. Dans la prochaine leçon, je vais vous donner plus de détails sur le projet de classe. 2. Le projet de cours: Dans cette leçon, je veux parler du projet de classe et du fichier de démarrage que j'ai créé. Le projet de classe est simple. Vous devez créer votre propre diapositive animée l'aide de Lottielab Il n'est pas nécessaire que cela corresponde à ce que nous avons construit en classe, alors n'hésitez pas à changer les couleurs, les textes, formes, comme vous le souhaitez. Faites-en le vôtre. Et bien sûr, c'est parfaitement normal de créer la même chose que moi. C'est ton choix. Maintenant, pour vous aider à démarrer, j'ai préparé un fichier Figma avec tous les éléments de conception que nous utiliserons dans le cours, et vous pouvez trouver le lien de téléchargement dans la section projets et ressources Le fichier inclut toutes les formes, les couches de texte et la mise en page générale avec laquelle nous allons travailler. Tout est déjà organisé, vous pouvez donc vous concentrer sur la partie animation plutôt que de créer le design à partir de zéro. Une fois que vous aurez terminé votre animation, j'adorerais que vous la publiiez dans la section du projet. Vous pouvez télécharger une capture d'écran, un enregistrement d'écran ou même un lien. Publier votre projet n' est pas obligatoire, mais je pense sincèrement que cela en vaut la peine. Cela vous permet de suivre vos propres progrès. Cela vous donne matière à réflexion et aide également vos camarades à voir différentes approches et à s'inspirer. Donc, lorsque vous aurez terminé, partagez-le. Très bien, entrons dans le cours. 3. Démarrer avec Lottielab: Dans cette leçon, nous allons commencer à utiliser Lottielab. Je vais vous montrer où vous inscrire, vous guiderai dans l'interface, et nous finirons par créer une animation simple pour voir comment tout fonctionne. Mais avant d'entrer dans le vif du sujet, permettez-moi de répondre à une question que vous serez nombreux à me poser, je pense. Pourquoi utiliser Lottielab plutôt qu'Adobe After Effects , qui est la norme du secteur en matière de motion design Eh bien, la raison est simple. Lottielab est basé sur un navigateur. Il est beaucoup plus facile à apprendre et il est conçu exactement pour ce type d'animation. After Effects est très performant, mais c'est aussi très compliqué. Il est plus cher et nécessite beaucoup de puissance de calcul pour fonctionner correctement. Maintenant, permettez-moi de commencer par vous donner quelques alternatives à Lottielab Jitter est l'un d'entre eux, et c'est d'ailleurs ce que j'utilisais avant Lottielab Et puis il y a aussi Rive qui fait vraiment très bien du motion design. Rive, pour autant que je sache, c'est un peu plus complexe parce que vous pouvez créer un tas de choses avec lui, comme des jeux, des interfaces vraiment sympas et toutes sortes de ressources animées. Eh bien, Jitter est plus simple et c'est un moyen très simple créer du motion design pour le Web Si je n' utilise plus Jitter c'est parce que c'est devenu très cher. Ils ont eu des services ou des prix très abordables à un moment donné, mais ils ont récemment modifié leur structure tarifaire. Cela m'a donc incité à chercher ailleurs. Et j'ai fini par opter pour Lottielab. Maintenant, Lottielab peut être utilisé pour créer beaucoup de choses. Ce ne sont pas que des diapositives vidéo, n'est-ce pas ? Lottielab est idéal pour toutes sortes d'animations légères, comme, vous savez , les micro-interactions avec l' interface utilisateur, les animations de logo, les écrans d'accueil des applications, même les bannières marketing, les animations, les publications sur les réseaux sociaux, etc. Vous pouvez créer beaucoup de choses avec Lottielab. Permettez-moi donc de vous faire un rapide tour d'horizon de l'application. Tout d'abord, vous pouvez vous rendre sur ladilab.com, où vous pouvez créer un compte Vous devez vous inscrire ou vous connecter, et vous pouvez vous inscrire avec votre compte Google ou par e-mail Je vais utiliser mon compte Google pour cela. Une fois connecté, vous êtes redirigé vers votre tableau de bord où vous pouvez voir vos fichiers récents. Vous aurez également accès à certains modèles. Et voici un petit aperçu du type d' animations que vous pouvez créer avec Lottielab. Les animations ici ne sont pas très fluides car j' enregistre également cette vidéo, cet écran, donc mon processeur est un peu Mais oui, vous pouvez créer toutes sortes d'animations. Elles sont plutôt cool. Vous pouvez retourner à la maison et organiser votre travail en projets ou simplement créer des fichiers autonomes Cliquons donc sur Nouveau fichier dans le coin supérieur droit et créons un nouveau fichier d'animation. C'est ici que nous allons créer toutes nos animations. Et il y a quatre sections principales dont nous devons parler. Nous avons ce panneau sur la gauche, qui donne accès à divers outils, aux couches, aux différentes formes et icônes. Nous pouvons ajouter l'outil de texte et également la possibilité d'ajouter des images. Ensuite, au milieu, nous avons le canevas où nous ajoutons des plans de travail. plans de travail sont similaires aux pages de votre projet, et chaque animation est contenue dans un plan Sur le côté droit, nous avons un panneau de propriétés, et c'est également l'endroit où nous pouvons exporter des fichiers. Et puis, tout en bas, sur toute la largeur, se trouve notre chronologie d'animation, et je vais vous montrer comment cela fonctionne en un rien de temps. À tout moment, vous pouvez contrôler la taille du plan de travail en modifiant sa largeur et sa hauteur à partir de ces cases Et vous pouvez également modifier la durée, la durée finale de l'animation en modifiant cette valeur. Ici aussi, nous pouvons modifier l' arrière-plan de notre plan de travail. Passons au blanc pour le moment. Maintenant, créons une animation très simple afin de comprendre le fonctionnement de l'outil. Animons un élément de texte, non ? Et comme dans cette classe, nous créons une diapositive animée, c'est le cas d' utilisation le plus courant de cet outil. Je vais donc appuyer sur T pour faire apparaître l'outil de texte, cliquer, puis taper mon texte. Je commence à utiliser Lottielab, et je vais juste le placer au centre de mon plan de travail Maintenant que le texte est sélectionné, le panneau des propriétés me permet de modifier la famille de polices, le poids, la taille, la hauteur de ligne, espacement des lettres, l'alignement et la couleur Je peux donc personnaliser le texte et d'autres éléments très facilement. Et en haut, il y a un bouton qui dit « ajouter une animation ». Lorsque nous cliquons dessus, nous avons accès à certains préréglages. Et lorsque je survole un certain préréglage, je peux voir l'animation en temps réel sur mon plan Voici un fondu, voici la hauteur d'affichage. Voici une diapositive et quelques autres. Nous avons également des transformations de couches, n'est-ce pas ? agit d'animations ou de préréglages que nous pouvons appliquer à n'importe quel type de couche, pas seulement au texte Et nous en avons quelques autres ici. Je peux maintenir le curseur de votre souris dessus pour les prévisualiser. Personnellement, je choisirai le flou et le slide. Pour cette démo. Je vais donc cliquer dessus, et j'ai quelques options supplémentaires. Je peux choisir la direction dans laquelle le texte entre. Donc, si je clique ici, les lettres commenceront animer depuis le coin supérieur gauche Mais je vais juste m'en tenir à la valeur par défaut. Je peux modifier la durée de l'animation et je peux modifier l'assouplissement. Allons-y avec Smooth parce que je pense que cela fonctionne un peu mieux. Et si je fais défiler l'écran vers le bas, je peux choisir d'appliquer cette animation à d'appliquer cette animation chaque personnage, ou je peux animer le mot, ou je peux animer la ligne si j'ai un texte multiligne Choisissons le mot. De plus, je vais choisir ici le lissage pour lisser plutôt que linéaire. OK, cool. Désormais, une fois que vous avez appliqué une animation à un élément, la chronologie de l'animation est modifiée. Nous avons maintenant une entrée pour l'élément de texte que nous avons utilisé, puis l'animation que nous lui avons appliquée. Et si nous cliquons sur cet élément ici, oui, nous pouvons modifier les propriétés de l'animation comme je vous l'ai montré précédemment. Maintenant, si je sélectionne mon plan de travail, je peux modifier la durée de l'ensemble de l'animation qui s'y déroule. Donc, pour cette démo, réglons ce délai à 4 secondes. Maintenant, si nous faisons un zoom arrière et que nous regardons la chronologie de l'animation, nous pouvons voir que le curseur passe de 0 à 4 secondes, ce qui correspond exactement à la durée de l' animation que nous avions définie précédemment Et je peux facilement saisir le curseur et le déplacer où je veux. Et je peux également cliquer sur cette zone pour déplacer le curseur. Et si je veux lancer l'animation, suffit d'appuyer sur la barre d'espace, et elle se jouera en boucle. Comme ça. Jusqu'à présent, nous avons animé ce texte, n'est-ce pas ? Mais que se passerait-il si nous devions l'animer ? Cela signifie donc que nous avons fait apparaître le texte. Nous voulons maintenant le faire disparaître bout d'un certain temps. Nous pouvons le faire en sélectionnant l'élément et en ajoutant une autre animation. Maintenant, cette animation sera ajoutée à l' endroit où le curseur est actuellement positionné. OK ? Donc, si je le place au tout début, que je sélectionne l'élément, j'ajoute une animation, et disons que je veux ajouter la même animation, oui, cela ajoutera la deuxième diapositive de flou au même élément, recommençant à zéro Mais maintenant, j'ai deux animations qui se font concurrence sur le même élément. Donc, si je clique sur Play, je peux voir l'animation de début, mais pas l' animation de fin, pour ainsi dire. Faisons donc deux ou trois choses ici. Tout d'abord, sélectionnons la deuxième animation que nous avons ajoutée. Et dans le panneau Propriétés, nous allons sélectionner, et nous pouvons en voir un aperçu ici. L'assouplissement, je veux que ça se passe bien. Et je veux aussi animer par mot. Et aussi, j' aimerais que cette animation ait lieu plus tard. Donc, ce que je peux faire, c'est simplement cliquer et faire glisser la chronologie dans une position différente. OK ? Supposons donc que cette première animation dure jusqu'à 1,5 seconde, et que je puisse facilement la redimensionner comme ceci Ensuite, je peux attendre une seconde, et je peux faire démarrer la deuxième animation à environ 2,5 et se poursuivre jusqu'aux quatre secondes , soit la durée totale de mon animation. Donc maintenant, si je clique sur Play, le texte entre et sort. Très, très facile. Nous ajoutons donc essentiellement deux animations au même élément. L'un d'eux anime le texte. En d'autres termes, cela le fait apparaître de 0 à 1 0,5 seconde. Ensuite, nous attendons environ une seconde, puis la deuxième animation démarre, ce qui fait disparaître le texte pendant à peu près la même période , 1,5 seconde. Et si vous voulez être plus précis avec ces horaires, vous pouvez simplement sélectionner l'élément parent ici et vous pouvez régler la durée sur 1,5, puis vous pouvez le régler jusqu'à la fin, et vous pouvez également le définir sur 1,5 Et maintenant, ces deux-là sont exactement les mêmes. Cool. Notre animation est donc maintenant terminée. Exportons-le, et je voudrais passer rapidement en revue ce point. Pour cela, vous devez aller dans le coin supérieur droit, appuyer sur Exporter, ce qui vous donnera un aperçu de votre animation et vous permettra de choisir un type de fichier. Voici les types de fichiers que vous pouvez choisir. Pour cette leçon, étant donné que nous créons une diapositive animée pour une vidéo, nous allons choisir le format vidéo. Ensuite, nous pouvons choisir la taille de la vidéo, à droite, la résolution. Combien de fois avons-nous voulu faire une boucle. Cela ne nous intéresse pas vraiment, puis nous pouvons choisir la fréquence d'images à partir de 30 ou 60 images par seconde. Et puis arrière-plan, utilisons-nous l'arrière-plan du plan de travail ou le rendons-nous transparent Ensuite, vous cliquez sur Exporter. Cela vous amènera à un autre écran, où vous pourrez voir un aperçu avec vos paramètres, puis vous sélectionnerez Télécharger. Et une fois qu'il est téléchargé, comme vous pouvez le voir, il est exporté au format MP 4 et vous pouvez voir le résultat ici. Maintenant, juste une petite mention, si vous utilisez la version gratuite de Lottielab, vous constaterez que certaines des options proposées ici ne vous seront pas accessibles J'ai la version pro, je peux donc exporter à n'importe quelle résolution à partir de cette liste. Et si vous êtes curieux, la version pro coûte 12$ par mois si vous payez annuellement et 18$ par mois si vous payez Mais en gros, vous débloquez tout. Vous pouvez avoir autant de fichiers que vous le souhaitez. Vous pouvez exporter sans filigrane et vous pouvez exporter avec la meilleure qualité vidéo possible Et vous avez également des avantages supplémentaires. Très bien, il ne s'agissait donc que d'un bref aperçu de l'outil et de son fonctionnement. Ensuite, commençons à travailler sur une diapositive animée beaucoup plus complexe, d' accord, quelque chose que vous utiliseriez réellement dans l'un de vos projets vidéo. Je vous verrai donc dans la prochaine leçon. 4. Animons : travail de préparation: Dans cette leçon, nous commençons à créer la diapositive animée que je vous ai montrée au début du cours. Nous allons le configurer sur votre dossier. Nous trouverons la bonne taille et les bonnes couleurs, et nous intégrerons tous les éléments de diapositive de Figma Alors allons-y. Il s'agit du fichier Figma que vous pouvez télécharger gratuitement en suivant le lien dans la section des projets Il s'agit d'un design très simple qui peut être utilisé comme diapositive d'introduction à une leçon exemple pour un cours Skillshare ou un cours YouTube , peu importe ce que c' ou un cours YouTube , peu importe ce que Ce texte peut être le titre du cours. Voici le numéro de la leçon, et voici le titre de la leçon. En dehors de cela, nous avons également quelques éléments décoratifs que j'aimerais également animer dans Lottielab La toute première chose à faire est donc d'importer ce fichier dans Lottielab Maintenant, nous pouvons recréer chaque élément individuellement, ou nous pouvons utiliser un plugin qui copiera simplement tout et nous pourrons le coller dans Lottielab Mais tout d'abord, nous devons faire correspondre l'arrière-plan et la taille de la diapositive. OK ? Comme vous pouvez le voir, j'ai ici une diapositive de quatre K, 38 40 x 21 60, parce que je veux l' exporter à quatre K. De plus, puisque je suis ici, je vais copier cette couleur de remplissage. Et je vais retourner dans Lottielab. Ici, j'ai un nouveau fichier, et permettez-moi de l'agrandir un peu. Déplacez-en un pour que le zoom s'adapte. Et pour le plan de travail, je vais régler sa taille sur les quatre mêmes dimensions de boîtier Donc 38 40 par 21 60. Nous allons définir la durée. Pour l'instant, fixons-le à 10 secondes, bien que nous puissions toujours changer cela plus tard et nous réglerons taille de l'arrière-plan sur la couleur que nous avons copiée précédemment, FDF trois E neuf Appuyons donc sur Shift 1 pour voir à nouveau le plan de travail, et je vais revenir à Figma, et j'appuierai sur Ctrl ou Commande K si vous êtes sur un MAC pour faire apparaître le menu rapide Et je vais chercher Lodi Lab. Animation de Figma to Lady. Et laissez-moi simplement zoomer pour que vous puissiez mieux le voir. Il s'agit d'un plugin. Vous pouvez cliquer dessus, puis le plugin vous indiquera de sélectionner les modèles à copier ou à exporter. Je vais donc cliquer sur l'un des éléments de Figma, puis appuyer sur la commande A. Cela va tout sélectionner Vous pouvez également le voir dans le panneau des couches ici. Maintenant, le plugin m'indique toutes les couches sélectionnées. Je peux simplement cliquer sur Copier, puis je peux retourner sur Lottielab, sélectionner mon plan de travail et appuyer sur Ctrl ou Commande V. Cela va tout coller en place Notez que cette action a également intégré tous les noms de groupes et de couches de Figma Maintenant, il ne les a pas collés exactement dans la bonne position, nous devons donc modifier un peu le positionnement Tout d'abord, sélectionnons ces trois éléments en faisant glisser une boîte entre eux. Et je vais cliquer avec le bouton droit de la souris et sélectionner la sélection du groupe. Ensuite, une fois ceux-ci sélectionnés, je vais aller dans le coin supérieur droit et je vais les aligner horizontalement et verticalement, juste pour pouvoir les positionner exactement au milieu de ma page. Ensuite, je peux à nouveau cliquer avec le bouton droit sur cet élément sur le groupe pour supprimer ce groupe. Ensuite, mettons manuellement ces éléments en place, et je vais sélectionner ou commencer par ces cercles ici. Et d'après ce que je peux dire, devrait être quelque chose comme ça, peut-être, et tout cela se chevauchera ici. Et ceux-ci utilisent en fait un mode de mélange différent. Ainsi, lorsqu'ils se croisent, ils présentent une couleur différente Je peux également le faire dans Lottielab allant dans le panneau des propriétés et en sélectionnant C'est le mode de fusion que j'ai choisi dans Figma. Et comme vous pouvez le voir maintenant, lorsque ces éléments se chevauchent, oui, l' intersection sera fondamentalement colorée différemment. Quoi d'autre ? Cet élément est là. Oui, on peut le déplacer un peu vers le haut, quelque chose comme ça. Le triangle ici, on peut le déplacer à peu près dans cette position. Et puis le plus grand triangle ici et le motif à carreaux, nous les déplacerons probablement vers quelque chose comme ça Encore une fois, il n'est pas nécessaire que ce soit absolument parfait au pixel près, car nous pouvons toujours modifier ce positionnement. Bien, maintenant que tous les éléments sont intégrés, il est temps de commencer à animer, et nous le ferons dans la prochaine leçon où nous aborderons ces éléments décoratifs . Je t'y verrai. 5. Animons : créez les animations de formes: Dans cette leçon, nous allons commencer à animer. Mais avant de faire quoi que ce soit, je veux que tu penses comme un réalisateur. Vous voyez, un bon réalisateur connaît toute l'histoire avant le début du tournage. C'est pareil ici. Avant d'animer quoi que ce soit, réfléchissez à la manière dont chaque élément doit se déplacer et dans quel ordre Cela rend les choses beaucoup plus faciles. Je vais donc vous montrer comment je ferais cette animation. Voici donc le plan. J'aimerais d'abord animer les deux cercles, peut-être, par exemple, une animation de croissance ou une diapositive Ensuite, j'animais ce motif à carreaux et le triangle Ensuite, j'animerais ces points et ce triangle, non ? Ce sera donc la séquence d'introduction des événements. Ce n'est qu'après cela que j' animerais le texte lui-même. Voici donc le plan. Voyons comment ça se passe. Commençons par le cercle vert, sélectionnons-le, puis ajoutons une animation, et nous sélectionnerons grandir. Nous allons le faire grandir. L'opacité initiale le maintiendra à zéro car c' est la valeur initiale, n'est-ce pas ? Et l'échelle initiale est de 0,5, ce qui donne à l'animation l' apparence suivante. Hein ? Il passe donc de la moitié de sa taille à sa taille complète. Mais je veux que ce facteur initial soit un peu plus petit. Nous allons donc changer l'échelle initiale à 0,8. Je veux donc qu'il s'anime de 80 % à 100 % de sa taille J'aimerais que cette animation dure 1,2 seconde, et je vais modifier l'atténuation pour qu'elle soit fluide. Alors maintenant, notre animation ressemble à ceci. Faisons de même pour l'autre cercle. Alors sélectionnez-le, appuyez sur, grandissez, augmentez à l'échelle initiale, remplacez-le par 0,8. Et d'ailleurs, vous pouvez maintenir la touche Shift enfoncée et utiliser les flèches haut et bas. Vous pouvez modifier cette échelle. Durée, changez-la en 1,2, assouplissement, encore une fois, se déroulera sans heurts. Et aussi, j'aimerais déplacer cette deuxième animation de cercle au début. Ces deux éléments s'animent donc en même temps de cette façon. Ensuite, sélectionnons le conteneur de lignes horizontales et le conteneur de lignes verticales, et créons un groupe avec ceux-ci. Ainsi, dans le panneau Calques, nous pouvons cliquer avec le bouton droit sur la sélection du groupe. Je le fais parce que je veux appliquer cette animation aux deux éléments en même temps. Et je vais en fait le renommer en double-cliquant pour n'en faire que des lignes Oh. Maintenant, pour cela, je vais utiliser une autre animation. Je vais choisir un fondu. Alors, fondez à nouveau, 1,2 seconde. Et encore une fois, je vais déplacer la tête de jeu jusqu'au tout début Ces éléments s' animent donc en même temps. Ensuite, animons ce grand triangle. Pour cela, je vais choisir une animation de diapositives. Je veux que ça vienne du bas, non ? Alors glissez. Je vais choisir la direction à suivre ici. Donc, en partant du bas. Et voilà à quoi ça ressemble. La diapositive B détermine la distance parcourue, n'est-ce pas ? Il est donc actuellement fixé à 46 86, ce qui est un très gros chiffre, et l'animation ressemble à ceci. Permettez-moi de faire un zoom arrière. Hein ? Je voyage juste trop. Au lieu de cela, sélectionnons l'animation elle-même et changeons sa valeur en 200, n'est-ce pas ? Je veux donc juste une animation très subtile. Je voulais monter un tout petit peu vers le haut et avoir effet d'assouplissement fluide pour arrêter l'animation. En termes de durée, 1,2 seconde, et je vais changer cela en mode fluide. Et encore une fois, nous allons déplacer cette animation jusqu'au tout début. Tous ces éléments s'animent donc désormais en même temps, et c'est ce que nous avons fait jusqu'à présent OK, donc ça a l'air plutôt bien. Ensuite, nous avons deux autres éléments dont nous avons besoin pour animer le conteneur en pointillés et ce triangle Faisons quelque chose de différent. Faisons-les s'animer après les autres éléments d' arrière-plan Donc, dans notre cas, l'animation commencerait ici, et faisons glisser cet élément de gauche à droite, et faisons pivoter le triangle de droite à gauche. Donc, lorsque nous examinons la situation dans son ensemble, ces deux éléments suffiront essentiellement cela. Je ne sais pas si tu l'as vu. Ils vont essentiellement se glisser de part et d'autre. Donc, avec notre curseur placé dans la bonne position, sélectionnons les points, ajoutons une diapositive. Et définissons les propriétés. La direction est correcte, glissant de gauche à droite, et en passant par là, je vais utiliser la même valeur de 200 que celle que j'ai utilisée ici sur le triangle parce que je veux que cette animation soit cohérente. Je vais avoir la même durée de 1,2 seconde et le même assouplissement fluide. Maintenant, en même temps que cette animation commence, introduisons également le triangle, n'est-ce pas ? Pour cela, utilisons également une diapositive. Glissez vers l'intérieur, mais la direction doit être de droite à gauche. Même valeur de 200, durée 1,2, même assouplissement du lissage. C'est bon. Revenons maintenant en arrière et voyons à quoi ressemble l'animation. Pas mal. Nous animons donc d'abord ces éléments initiaux. Une fois l'animation terminée, nous commençons à animer les points et le petit triangle Et c'est ce que nous avons obtenu jusqu'à présent. Cool. L'étape suivante consiste à animer les éléments du texte, et cela sera abordé dans la leçon suivante 6. Animons : créez les animations de texte: Dans cette leçon, nous animons les éléments du texte. Ce sont les parties les plus importantes de la diapositive, nous voulons donc nous assurer qu'elles ont l'apparence et toucher parfaits. Faisons-le. C'est là que nous nous sommes arrêtés. Et je voudrais commencer mon animation de texte en faisant d' abord apparaître cet élément central, d'accord ? Sélectionnons-le donc. Et utilisons le même effet de flou et de diapositive je vous ai montré précédemment, car je pense que cela fonctionnerait très bien Réglons la direction vers le bas ici. Permettez-moi de zoomer. Passez en revue, je vais utiliser la même valeur de 200 pixels. La durée sera de 1,2, et je vais utiliser le même assouplissement de smooth. De plus, l'animation s'appliquera à chaque personnage. C'est donc ce que nous avons jusqu'à présent. Donc c'est cool. Mais quand exactement déclenchons-nous cette animation ? Est-ce après cette arrivée ? Par exemple, est-ce que cette animation fonctionnerait ? Je pense que si nous procédons ainsi, nous devons attendre longtemps avant que le texte lui-même apparaisse. Faisons donc animer le texte initial, le 03, en même temps que les points du petit triangle Et pour cela, je peux simplement sélectionner l'élément de texte à partir d'ici et déplacer pour qu'il corresponde aux éléments que je souhaite. Ainsi, le texte commencera animer en même temps que les points du petit triangle J'aime bien ça. Maintenant, qu' en est-il du reste du texte ? Eh bien, j'aimerais que l'animation commence une fois que le grand nombre aura terminé son animation Encore une fois, je vais profiter de la position de ces éléments de texte, car le texte le plus petit est positionné en haut et le texte le plus grand est positionné en bas J'aimerais qu'ils soient insérés. Le texte du haut glissera par le haut et le texte du bas par le bas. OK ? Et faisons en sorte que cette animation se produise en même temps. Nous avons donc ce type de diapositive en vigueur simultanément. Sélectionnez l'élément de texte supérieur, et je vais sélectionner une diapositive de couche. En sélectionnant l'option supérieure ici, glissez par 200, durée 1,2 assouplissement en douceur. Cela ressemble donc actuellement à ceci. Bien, positionnons notre tête de jeu. Sur cette marque, ici, nous choisirons le deuxième texte, et nous y appliquerons également une diapositive de couche. Cette fois, il va entrer par le bas, glisser de 200, durée 1,2, et même assouplissement de fluidité. Maintenant, l'animation ressemble à ceci. Et permettez-moi de l'agrandir un peu. C'est ça. Voici donc la séquence des événements survenus jusqu'à présent. Dans les 1,2 premières secondes, nous animons le cercle, le triangle, les lignes Dans le tronçon suivant, nous animons le texte central les points et le petit triangle Enfin, nous animons les deux autres éléments de texte, l'un venant du bas, par le haut, et l'autre par le bas Jusqu'à présent, cette animation dure environ 3,7 secondes, et c'est à vous de décider combien de temps vous souhaitez créer l'une de ces diapositives animées. Personnellement, je préfère les allonger un peu pour pouvoir les découper plus tard lors du montage, non ? Donc, pour cet exemple, faisons en sorte que cette séquence complète dure environ 10 secondes ou en fait environ 8 secondes. Je vais donc sélectionner le plan de travail et modifier sa durée à 8 secondes comme ça OK. Maintenant, que faisons-nous exactement pendant les quatre secondes restantes ? Eh bien, c'est là que nous pouvons ajouter une animation plus lente, presque comme une animation résiduelle. Nous pouvons faire en sorte que les éléments d'arrière-plan se déplacent plus lentement simplement pour conserver cette sensation de mouvement. C'est ce que nous ferons dans la prochaine leçon. 7. Animons : créez les animations résiduelles: Dans cette leçon, nous ajoutons des animations plus lentes aux formes d'arrière-plan pour les choses continuent de bouger jusqu'à la fin. Ensuite, j'exporterai la diapositive terminée et je vous montrerai comment l' utiliser dans le Vinci Resolve, notamment comment passer de cette une véritable séquence vidéo. Allons-y. Commençons maintenant par ce cercle. Et je vais arrêter la tête de jeu ici à 1.2 lorsque ce cercle aura terminé son animation Maintenant, pour créer une animation plus longue, nous allons utiliser ce que l' on appelle des images-clés personnalisées Et lorsque vous sélectionnez l'élément, vous pouvez activer cette option dans le panneau de droite. Maintenant que les éléments sont sélectionnés, je peux passer le curseur sur la chronologie et remarquer que j'ai des signes positifs Et quand je clique sur ce signe plus, je vais zoomer ici. Je peux choisir le type d'image-clé que je veux. Pour ce cercle, je veux changer de position, non ? Je voulais aller d'ici à ici. Donc position verticale. Je vais donc choisir ma position. Maintenant, cela crée un élément Rumbus juste ici, et c'est l' indication visuelle d'une image-clé Ensuite, je vais déplacer ma tête de lecture jusqu'à la fin au bout de huit secondes, et je vais créer une autre image-clé Mais cette fois, la position et je peux la modifier depuis cette case, je veux qu'elle soit 200 pixels de moins, donc je peux dire -200 Et quand je le fais, observez le cercle, il se déplacera vers le haut. Alors maintenant, si je joue l'animation dès le début, voici ce que nous avons. Remarquez comment le cercle se déplace lentement jusqu'à la position que je lui ai donnée. C'est ce que fait une animation par images-clés. Il anime un élément situé entre l' image-clé un et l'image-clé Dans mon cas, la première image-clé était la position où le cercle a atterri, pour ainsi dire, après avoir terminé son animation initiale Et l'image-clé 2 était à la même position, mais 200 pixels plus haut sur l'axe Y. Maintenant que nous avons déplacé le cercle vers le haut, créons un effet contraire et déplaçons l'autre cercle vers le bas. cette option sélectionnée, je vais à nouveau déplacer ma tête de lecture ici et créer une image-clé pour Je commence donc par cette position, mais je voulais terminer une position en Y située 200 pixels plus bas. Je vais donc dire plus de 200. Maintenant, l'animation ressemble à ceci. Vous voyez, maintenant les deux cercles se déplacent lentement sur l'axe vertical. Et c'est exactement l' effet que je souhaite obtenir. Maintenant, les deux autres éléments que je souhaite animer en arrière-plan sont le grand triangle et le petit triangle Pour le grand triangle, je veux le faire glisser vers le bas Je vais donc régler ma tête de lecture ici à 1:20, sélectionner le triangle, puis cliquer sur le signe plus ici et sélectionner également Et encore une fois, je vais déplacer ma tête de jeu ici Assurez-vous de suivre la même ligne pour mon animation de position. Cliquez, puis je vais ajouter 200 pixels à la position. Alors maintenant, le triangle se déplace lentement vers le bas. Et pour le petit triangle, voyons voir, le petit triangle termine l'animation ici. Je vais donc positionner ma tête de lecture à 2,4, ou je peux la placer à 2,5 juste pour être alignée avec les autres, et je peux sélectionner le petit triangle. Cliquez sur Plus. Et cette fois, animons la rotation. Déplaçons à nouveau le curseur vers la fin, ajoutons une autre image clé, et cette fois, la valeur de rotation sera de 180. Et puis si nous jouons depuis le début, cela ressemblera à ceci. Et c'est tout. C'est ainsi que vous pouvez créer une diapositive animée dans Lottielab Maintenant, exportons-le , puis je vais vous montrer comment l'utiliser dans un vrai logiciel de montage vidéo. Nous allons cliquer sur le bouton Exporter. Sélectionnez une vidéo. s'agit d'une diapositive en 4K, et je veux l'utiliser dans une vidéo en 4K Je vais donc sélectionner quatre K. Je vais sélectionner 60 images par seconde. Et si vous ne savez pas ce que signifie le FPS , c'est la fréquence d'images par seconde. Essentiellement, plus la fréquence d'images est élevée, plus l'animation est fluide. Contexte, je vais rester normal, puis je vais cliquer sur Exporter. Cela va donc prendre quelques secondes pendant le rendu de la vidéo. Et il est recommandé de conserver cet onglet et de vous concentrer pour accélérer le rendu. OK, c'est fait. Nous pouvons en voir un aperçu ici, et il continue de fonctionner en boucle automatique. Alors téléchargez-le. Et regardons-le. Il s'agit d'un fichier MP 4, et vous pouvez vraiment le voir. Il s'agit d'un fichier MP 4 de 4,3 mégaoctets. Ouvrons-le donc. Et maintenant, il joue dans un lecteur vidéo. Permettez-moi de le faire en plein écran et d'y jeter un œil. Très belle animation fluide, qui durera 7 secondes ou 8 secondes au total. C'est bon. Sortons de là. Passons maintenant à la résolution Vinci et montrons comment l'utiliser comme diapositive d' introduction à une vidéo OK, nous sommes donc dans la résolution Venture, où j'ai chargé un MP 4. Oups, c'est une jolie miniature d' une vraie vidéo en direct que j'ai créée pour cette Et puis nous avons la diapositive animée en quatre K. Maintenant, je vais cliquer avec le bouton droit pour créer une nouvelle chronologie. Je vais appuyer sur Créer, puis je vais importer la diapositive, puis je vais importer ma vraie vidéo. Je vais donc simplement désactiver cette piste audio parce que cela ne nous intéresse pas vraiment Je ne suis vraiment intéressé que par le résultat final. Alors permettez-moi de simplement zoomer un peu ici. Et laissez-moi revenir au début, et je passerai en revue les effets. Je vais ajouter une transition vidéo ici, plonger pour dissoudre les couleurs, et je vais l' ajouter au tout début. Ensuite, je vais peut-être réduire cette diapositive à environ je ne sais pas, peut-être 6 secondes, quelque chose comme ça. Tout ce qui correspond à mon projet actuel. Permettez-moi de supprimer cet écart, cela ajoutera également un effet de dissolution du flou, et le résultat sera quelque chose comme ça C'est un peu lent parce que j' enregistre également pendant que je le fais Et cette vidéo en cours de lecture fait quatre K 60, donc c'est assez gourmand en processeur, mais voici à quoi elle ressemble, en gros. Nous passons donc d'une diapositive d'introduction animée à une partie de tête parlante comme celle-ci Et c'est ainsi que vous pouvez créer une diapositive animée pour vos vidéos dans Lottielab Je vous verrai dans la prochaine leçon pour la conclusion et les prochaines étapes. 8. Conclusion et prochaines étapes: Et ça, c'est fini. Vous avez atteint la fin du cours, et je voulais juste vous dire bravo. Vous êtes passé d'un fichier vierge à une diapositive entièrement animée que vous pouvez réellement utiliser dans vos vidéos. C'est plutôt cool. Dans ce cours, vous avez configuré Lottielab, appris le fonctionnement de l'outil, créé toutes les animations de forme, animé les éléments de texte et exporté une diapositive prête à l'emploi terminée Je pense que c'est un ensemble solide de compétences que vous pouvez désormais appliquer à n'importe quel projet d'animation. Maintenant, voici quelques mesures que je vous encourage à prendre ensuite. Tout d'abord, prenez la diapositive que nous avons créée et personnalisez-la. Vous avez un accès gratuit au fichier Figma, alors changez les couleurs, changez les polices et mettez à jour le texte avec les vôtres. Le modèle que j'ai fourni n' est qu'un point de départ. L'objectif est que vous obteniez quelque chose qui correspond à votre style. Et si mon modèle ne vous convient pas, hésitez pas à créer le vôtre à partir de zéro. Ensuite, si vous le souhaitez, hésitez pas à partager vos animations dans la section des projets de classe. Il n'est pas nécessaire que ce soit parfait. Vous pouvez envoyer une capture d'écran, un enregistrement d'écran ou même le lien Lottielab vers Je pense que le fait de partager vos progrès vous aide, et cela aide également les autres étudiants à voir ce qui est possible. J'adorerais aussi voir ce que tu as créé. Et si vous aimez ce cours, cela signifierait beaucoup pour moi si vous pouviez laisser un commentaire rapide. Il peut s'agir d'une phrase ou deux sur votre expérience. Ces évaluations aident les autres étudiants à trouver le cours, et elles m'aident également à comprendre ce qui fonctionne et ce que je dois améliorer. Donc, si cela vous a été utile, pensez à laisser un avis. Je lis, et j' apprécie beaucoup chacune d'entre elles. Maintenant, sur Skillshare, j'enseigne également Figma, le framer Donc, si ces sujets vous intéressent, rendez-vous sur mon profil et consultez mes autres cours. Il y en a pour tous les niveaux, que vous souhaitiez vous perfectionner chez Figma, en savoir plus sur le design ou explorer d'autres outils Je gère également une chaîne YouTube où je publie des articles sur Figma, le framer et le design Web en général, mais j'y publie généralement des vidéos plus courtes Donc, si ça t'intéresse, tu peux trouver le lien sur mon profil. D'accord, c'est tout pour moi. Merci beaucoup d' avoir suivi ce cours. Maintenant, allez créer des animations et utilisez-les dans vos vidéos, et je vous verrai dans la prochaine. Au revoir pour le moment.