L'animation d'un logo est le processus consistant à introduire du mouvement ou à modifier les éléments visuels d'un logo pour le rendre plus dynamique et attrayant. Il peut être appliqué à différentes parties d'un logo, telles que du texte, des images, des couleurs et des formes, et peut avoir différents degrés de complexité, allant de simples animations telles que du texte clignotant ou des couleurs décolorées, à des animations complexes impliquant des objets en mouvement ou interactifs. effets.
L'animation de logo est de plus en plus courante. Entre les smartphones et le développement général de la technologie Internet, les logos sont désormais beaucoup plus courants dans les espaces numériques, ce qui ouvre la porte à des effets visuels tels que l'animation qui ne sont pas possibles avec des produits physiques. Bien entendu, la popularité croissante de l’animation de logo signifie que de plus en plus de marques en auront besoin pour rester compétitives. Ainsi, apprendre à animer un logo peut être une compétence précieuse qui fera passer votre logo au niveau supérieur.
Dans le même temps, les logiciels d’animation sont également devenus plus omniprésents, rationalisés et intuitifs pour prendre en charge cette base d’utilisateurs croissante. Ainsi, aussi technique et complexe que puisse paraître une animation de logo, même les débutants peuvent désormais créer des animations simples mais efficaces.
Animation de logo dans After Effects -
Étape 1. Préparez votre fichier de logo.
Nous allons en fait commencer notre didacticiel sur la façon d'animer un logo dans Adobe Illustrator (ou un logiciel de création de logo similaire). Ceci est nécessaire pour garantir que notre dossier logo mis en place pour l'animation.
Bien que le logiciel d'animation lui-même soit raster, les fichiers du logo original doivent être au format vectoriel. Cela vous permet de les modifier sans dommage pour la qualité de l'image (par exemple, augmenter l'échelle d'un logo raster entraîne une pixellisation), et cela sera utile plus tard lorsque vous travaillerez avec des calques de forme.
Assurez-vous que votre logo est séparé en calques à l'aide du panneau Calques.
Le logo doit également être multicouche plutôt que regroupé en un seul objet. Cela facilite la création d'animations plus complexes en animant des parties individuelles du logo. Vous pouvez créer de nouveaux calques en utilisant le " Ajouter un nouveau calque" en bas du panneau Calques, puis copiez et collez des parties de votre logo dedans.
Enfin, l’animation étant de nature numérique, nous travaillons également avec les couleurs RVB. Si votre fichier Illustrator est défini sur CMJN, vous pouvez modifier cela en sélectionnant votre logo et en accédant à Édition > Modifier les couleurs > Convertir en RVB.
Lorsque vous êtes prêt, exportez votre logo sous forme de fichier vectoriel entièrement superposé. Étant donné que les types de fichiers After Effects font partie de la famille de logiciels Adobe, je vais enregistrer le logo que j'ai créé en tant que fichier AI (Adobe Illustrator), mais il existe plusieurs types de fichiers vectoriels parmi lesquels choisir si vous utilisez d'autres logiciels.
Étape 2 : Importez votre logo dans After Effects. Animations de logos
Ouvrez After Effects. L'interface peut paraître compliquée à première vue, alors décomposons les bases :
- Barre d'outils : ici vous pouvez accéder au principal outils graphiquestels que l'outil Plume, l'outil Texte, etc.
- Panneau de projet : C'est ici que vous gérez et organisez les fichiers multimédias pour l'ensemble du projet.
- Fenêtre de composition : Il s'agit d'une fenêtre d'aperçu vidéo dans laquelle vous pouvez prévisualiser l'animation de la composition actuelle (souvent appelée composition) sur laquelle vous travaillez. Les compositions sont essentiellement des scènes, chacune avec sa propre chronologie d'animation distincte. Nous discuterons des compositions plus en détail dans la section suivante.
- Chronologie : C'est ici que vous allez créer votre animation. Il se compose à la fois d'une chronologie littérale sur la droite (où vous configurerez les événements d'animation à exécuter sur la chronologie) et d'une zone de mise en page sur la gauche (où vous superposerez et modifierez les attributs de vos ressources multimédias).
- panneau de commande : Ici, vous pouvez accéder à diverses fonctionnalités de support telles que les informations sur les médias, les options de paragraphe et d'alignement, ainsi que les bibliothèques d'animation et d'effets visuels prédéfinies intégrées à After Effects.
Si vous n'êtes pas sûr d'un outil ou d'un bouton, passez votre souris dessus pour obtenir une description.
Pour importer un fichier de logo, faites-le simplement glisser dans le panneau Projet ou sélectionnez Déposer" > « Importer" > « Déposer" . Dans la boîte de dialogue suivante, sélectionnez Importer le média en tant que métrage et calques fusionnés .
Étape 3 : Configurez votre composition. Animations de logos.
Une composition (comp) est un conteneur qui vous permet de composer, d'éditer et d'appliquer une animation à des fichiers multimédias. Une production plus importante, comme un film, contiendra plusieurs pistes organisées dans un panneau de projet. Vous pouvez donc considérer les pistes comme une seule scène dans ce film, et chaque piste aura sa propre chronologie distincte. Dans notre cas, une animation de logo qui dure moins de cinq secondes nécessite très peu de compositions.
Pour personnaliser votre composition, faites glisser les fichiers multimédias vers le côté gauche du panneau de chronologie.
Commençons par un contexte simple. Faites un clic droit sur le panneau de mise en page et sélectionnez " Créer" > « Solide" . Comme mon logo est blanc, j'ai choisi uni couleur noire, mais vous pouvez choisir n'importe quelle couleur. Dans la fenêtre suivante, nommez le solide (dans mon cas "BG"), cliquez sur le bouton " Faire la taille ordinateur" et sélectionnez " D'ACCORD" . Faites maintenant glisser votre fichier de logo du panneau Projet vers le panneau Chronologie et vous devriez voir votre logo prévisualisé dans la fenêtre de composition. Sinon, assurez-vous de réorganiser les calques en faisant glisser l'arrière-plan uni sous le fichier du logo.
Cliquez avec le bouton droit sur le fichier du logo dans le panneau de présentation et sélectionnez Créer" > « Convertir en une composition multicouche" . Cela transformera votre fichier de logo en une composition différente (vous verrez que l'icône a changé). Un double-clic sur le fichier du logo ouvrira maintenant un nouvel onglet et vous amènera à cette nouvelle composition contenant tous les calques individuels que vous avez configurés dans Illustrator. Vous pouvez maintenant voir comment fonctionnent les compositions : elles sont essentiellement comme des sous-dossiers.
Animation de logos
Si vous le souhaitez, vous pouvez convertir chacun de ces calques en compositions distinctes en cliquant avec le bouton droit et en sélectionnant Composition préliminaire" . Cela donnera à ce calque sa propre chronologie d'animation, imbriquée dans la composition précédente. Et si vous souhaitez animer l’intégralité du logo d’un coup, vous devez utiliser une timeline associée à la composition principale.
Cela étant dit, comprenons comment ces chronologies fonctionnent pour l'animation.
Étape 4 : Animer le logo à l'aide d'images clés
After Effects (et la plupart des logiciels d'animation) fonctionne à l'aide d'images clés. Les images clés sont essentiellement des marqueurs que vous pouvez définir sur la chronologie pour déterminer quand les états de début et de fin de votre animation doivent se produire.
Par exemple, commençons par une animation très simple : un fondu entrant. Un objet est associé à différents attributs, et les attributs qui changent sur une période de temps donnée sont essentiellement de l'animation. Pour voir ces attributs, cliquez sur l'icône Développer à côté du logo, suivi de propriété "Convertir" .
Créez des images clés en cliquant sur l'icône du chronomètre à côté de Propriétés dans le panneau Chronologie.
Pour une animation de fondu, vous souhaitez travailler avec l'attribut qui mesure la visibilité d'un objet : l'opacité. L'opacité est fixée à 100% car par défaut le logo est entièrement visible.
Cliquez sur l'icône du chronomètre à côté de l'option Opacité et vous verrez un losange à l'endroit où le marqueur de tête de lecture est défini (la ligne bleue pâle traversant la chronologie). Il s'agit d'une image clé, essentiellement un instantané de la valeur actuelle d'un attribut spécifié. Déplacez l'image clé en cliquant dessus et en la faisant glisser jusqu'à la marque des 2 secondes sur la timeline. Faites glisser le curseur jusqu'à la marque 0 seconde, puis créez une autre image clé et définissez l'opacité sur 0 %. Appuyez sur la barre d'espace pour afficher l'animation dans la fenêtre de composition.
After Effects
Vous verrez que vous avez créé une animation de fondu entrant fluide en modifiant l'opacité de 0 % à 100 % en 2 secondes avec seulement deux images clés. C’est ainsi que toutes les animations sont réalisées dans After Effects. Vous pouvez créer une image clé de début et une image clé de fin à différents intervalles le long de la chronologie, et After Effects calcule automatiquement les transitions d'images nécessaires pour passer du point A au point B (traditionnellement appelé entre images dans le secteur de l'animation).
Une animation simple et fluide est créée à l'aide de deux images clés pour la propriété Opacité.
Vous pouvez voir qu'il existe un certain nombre d'attributs avec lesquels vous pouvez travailler dans Transformer la propriété, que nous expliquerons brièvement ici. N'hésitez pas à expérimenter avec des images clés et à modifier chacune d'entre elles pour avoir une idée de leurs capacités d'animation :
- Position : Cet attribut décrit la position du logo dans l'espace X, Y sur l'écran de mise en page et permet d'animer un mouvement linéaire.
- Échelle : Cet attribut décrit la taille du logo (en pourcentage de la taille totale du fichier original) et vous permet de créer des animations de zoom avant ou de réduction.
- Rotation : Cet attribut décrit l'orientation en degrés et permet de créer des animations de rotation.
Les conseils d'un professionnel :
Lorsqu'il s'agit d'animer un logo, il est logique de travailler à rebours (comme nous l'avons fait avec le fondu entrant) puisque l'animation doit se terminer sur le logo fini et complet. Cela signifie que vous devez créer des images clés avant de modifier quoi que ce soit afin d'avoir des instantanés des valeurs d'attribut dans leur état par défaut. Vous pouvez ensuite déplacer ces images clés vers le point final souhaité sur la chronologie (aussi longtemps que vous souhaitez que l'animation dure) et créer de nouvelles images clés pour les modifications au début de la chronologie.
Étape 5. Animez le logo à l'aide de calques de forme.
Passons maintenant à des techniques d'animation plus intéressantes utilisant des calques de forme. Les calques de forme sont des objets qui contiennent des informations sur le chemin, telles que des points d'ancrage et des lignes de connexion (similaires à celles des programmes vectoriels), et leur manipulation ouvre la porte à toute une gamme de possibilités d'animation au-delà. Propriétés de transformation .
Comment choisir la bonne couleur pour votre logo ?
Nous allons d’abord convertir le logo en calque de forme. Dans le panneau Composition en couches (les calques créés à l'étape 3), sélectionnez tous vos calques, faites un clic droit et sélectionnez " Créer" > « Créer des formes à partir d'un calque vectoriel" . Vous verrez que chaque calque est dupliqué avec une étoile à côté - il s'agit d'un calque de forme. Niché sous le calque de forme, vous trouverez Propriété de contenu en plus de Transformer la propriété . À la droite de Propriétés du contenu vous verrez également un bouton " Ajouter" , ce qui vous permettra de sélectionner encore plus d'attributs à animer.
Les calques de forme contiennent un bouton Ajouter (à droite de la propriété Contenu) qui vous permet d'ajouter toutes sortes de propriétés animées, telles que des chemins de détourage.
Mise à l'échelle d'un objet dans Adobe Illustrator
Couper les chemins
Pour mon logo, j'ai utilisé une animation assez courante et utile utilisant la propriété Trim Paths. Pour ce faire j'ai ajouté des "Chemins de recadrage" à l'aide du bouton " Ajouter" aux calques de forme pour chaque lettre, définissez l'image clé de l'attribut Fin sur 0 % au début de la chronologie et sur 100 % après environ 1 seconde. Comme vous pouvez le constater, le contour des lettres semble être dessiné par une main invisible en temps réel.
L'utilisation de la propriété Trim Paths vous permet d'animer des lignes afin qu'elles se dessinent en temps réel.
De plus, je voulais ajouter une animation d'accent à l'arrière-plan. Comme je travaille en noir et blanc, j'ai choisi un effet tunnel en boucle rappelant Twilight Zone. Pour ce faire, j'ai utilisé l'outil Polygone du panneau Outils pour dessiner une forme au centre de ma composition, créant ainsi un nouveau calque de forme.
Ensuite, j'ai ajouté une propriété Répéteur, centré la position et augmenté le nombre de copies. Cela duplique la forme, créant un tunnel apparemment sans fin. L'ajustement de l'échelle augmente l'espace entre chaque copie et la modification de la rotation oriente les copies dans différentes directions pour un intérêt visuel.
Enfin, pour pimenter le tout, j'ai défini un décalage de 0 au début de la chronologie, puis je l'ai défini sur une valeur négative sur la chronologie.
En utilisant un calque de forme polygonale et la propriété Repeater, j'ai pu créer un arrière-plan animé.
Vous avez probablement deviné qu'il existe de nombreuses options pour les calques de forme. C'est vrai : il existe des cours complets en ligne sur le sujet sur Internet, et il faut prendre le temps d'expérimenter, de pratiquer et d'apprendre.
Je ne peux pas non plus vous dire quel style d'animation conviendra à votre logo ou quels outils spécifiques animations dont vous aurez besoin pour obtenir ce style. Cependant, je peux vous donner des conseils pour le découvrir par vous-même. Inspirez-vous d'autres logos animés, tels que ceux de vos concurrents, des marques que vous admirez et/ou de sites comme Pinterest ou Dribbble - tout comme vous l'avez fait lorsque vous avez créé le logo à l'origine.
Vous constaterez qu'une fois que vous aurez commencé à les analyser en utilisant vos nouvelles connaissances sur la façon d'animer un logo, beaucoup d'entre eux sont basés sur des principes simples. manipulations avec des formes et des transformations (même celles qui sont clairement superposées avec des effets stylisés avancés). Une fois que vous en avez trouvé quelques-unes qui vous plaisent, vous pouvez travailler à rebours dans After Effects pour essayer de procéder à l'ingénierie inverse de ces animations pour vous entraîner.
Étape 6 : Réglez l’heure.
Parlons du temps, qui décrit le rythme des images d'animation tout au long de l'animation. Vous pouvez voir une représentation visuelle du temps en accédant à l'éditeur graphique. Pour ce faire, cliquez sur l'icône de graphique (étiquetée Graph Editor lorsque vous la survolez) en haut du panneau de chronologie et cela changera la chronologie en graphique linéaire.
Si vous cliquez sur l'un des attributs d'image clé, vous verrez une ligne droite d'une image clé à la suivante. Pour le moment, comme nous ne faisions que créer des images clés pour les points de début et de fin, nous avons laissé After Effects se charger du timing. Sans direction, After Effects déplace chaque image de l'animation de manière uniforme, ce qui donne une ligne parfaitement droite.
L'éditeur de graphiques affiche la synchronisation des images clés comme indiqué dans le graphique linéaire.
Cependant, c’est le changement intentionnel du temps qui donne à l’animation un sentiment de réalisme. Par exemple, dans une animation de balle rebondissante, la balle se déplace plus lentement à la hauteur du rebond et plus rapidement lorsqu'elle s'approche du sol en raison de l'élan et de la gravité. En d’autres termes, il ne se déplace pas à la même vitesse tout au long de l’animation, et s’il le faisait, il se démarquerait comme un robot.
Les outils Bézier, situés en bas de l'éditeur de graphique, permettent d'ajuster la courbure de la ligne du graphique.
Convertir les images clés en Bézier automatique
L'éditeur de graphiques vous permet d'ajuster le timing de votre propre animation en utilisant ce que l'on appelle les poignées de Bézier pour transformer une ligne graphique en courbe. Dans le coin inférieur droit de l'éditeur de graphiques, vous verrez des icônes de points carrés attachées aux lignes : ce sont des outils de Bézier.
Cliquez sur l'une des images clés et survolez les outils Bézier jusqu'à ce que vous trouviez celle intitulée " Convertir les images clés en Bézier automatique" . Lorsque vous cliquez dessus, vous verrez un marqueur jaune apparaître sur le graphique. Faire glisser cette poignée entraînera une courbure de la ligne, ce qui modifiera le timing de votre animation. Là où la courbe est plus prononcée, les images seront lues plus rapidement, et là où la courbe est plus douce, les images seront lues plus lentement.
Une courbe plus nette correspond à une synchronisation plus rapide et une courbe plus douce correspond à une synchronisation plus lente.
Pour vraiment comprendre les nuances de l'ajustement de votre propre timing, il faut une expérience en animation. C'est pourquoi l'ajustement manuel des courbes de Bézier est un sujet plus avancé. Dans ce guide du débutant, je recommande d'utiliser l'outil Bézier Facilité facile (qui applique une courbe automatique à l'image clé que vous sélectionnez) pour tous les intervalles de temps d'animation. Vous pouvez postuler Facilité facile à une image clé en dehors de l’éditeur de diagramme en sélectionnant l’image clé et en cliquant avec le bouton droit.
Étape 7 : Exportez votre logo.
Lorsque vous êtes prêt à exporter votre logo animé terminé, sélectionnez " Déposer" > « Exporter" > « Ajouter Adobe Media Encoder à la file d'attente" . Exportations After Effects par défaut fichier au format mp4, qui convient à la vidéo. Puisque nous souhaitons créer un fichier image partageable de notre logo, nous allons l'exporter sous forme de GIF animé. Dans la fenêtre Media Encoder, cliquez sur la flèche à côté de la ligne de texte bleue en surbrillance sous le mot « Format » et sélectionnez « GIF animé" . Vous pouvez également définir le dossier de destination de votre fichier terminé en cliquant sur le texte bleu sous les mots « Fichier de sortie ».
Pour exporter un fichier, accédez à Fichier > Exporter > Ajouter à la file d'attente Adobe Media Encoder et sélectionnez Gif animé dans la liste déroulante de la colonne Format.
Double-cliquez sur le texte bleu en surbrillance sous le préréglage pour ouvrir la fenêtre Options d'exportation. Il y a quelques options que vous voudrez examiner pour réduire la taille de votre fichier : Qualité (je l'ai définie sur 20), Fréquence d'images (je l'ai définie sur 10, bien que des fréquences d'images (fps) plus élevées soient recommandées pour la vidéo) et Durée, qui est la barre bleue sous l'aperçu (j'ai réduit la mienne à 4 secondes). Sélectionner Ok pour fermer cette fenêtre.
Lorsque vous avez terminé, sélectionnez l'icône verte Lecture dans le coin supérieur droit de Media Encoder et votre fichier sera affiché dans le dossier de destination choisi. Ça y est : fini l'animation du logo !
Donnez vie à votre marque avec l’animation de logo.
-
L’animation de logo est bien plus qu’une simple tendance populaire que les marques sont obligées de suivre. Il y a aussi une magie indéniable dans l’animation d’un logo, et c’est un excellent moyen de créer un moment de plaisir visuel pour tous ceux qui interagissent avec votre marque. Et heureusement, les logiciels d’animation ont évolué de telle sorte que presque tout le monde, quelles que soient leurs compétences, peut ajouter un peu de cette magie à son propre logo.
Cela dit, même si ce didacticiel est destiné à vous familiariser avec les bases de l'animation de logo, il faut beaucoup d'essais et d'erreurs, de pratique et d'expérimentation pour aller au-delà de l'animation de base. Si vous souhaitez une animation de logo vraiment spéciale, un animateur de logo professionnel vaut l'investissement.
Laisser un commentaire