Les logos animés sont de plus en plus courants de nos jours. Entre les smartphones et les avancées technologiques de manière générale (dont internet), les logos se retrouvent le plus souvent dans des espaces numériques, ouvrant ainsi la porte à des effets visuels tels que l’animation. Bien sûr, la popularité croissante des logos animés signifie que de plus en plus de marques en auront besoin pour rester compétitives. Ainsi, apprendre à animer un logo peut être une excellente compétence à acquérir.

Illustration d'un personnage en train de bouger autour du logo d'Adobe After Effects pour montrer comment animer un logo
De nos jours, même les débutants peuvent animer un logo, et nous allons vous expliquer comment. Design réalisé par OrangeCrush

Par ailleurs, les logiciels d’animation sont également devenus plus courants et plus intuitifs, de façon à prendre en charge une base d’utilisateurs croissante. Ainsi, même si animer un logo peut vous sembler bien trop technique et intimidant, sachez que même les débutants ont désormais la capacité de créer des animations simples, mais efficaces.

Dans cet article, nous allons vous expliquer tous les principes de bases dont vous aurez besoin pour animer un logo. Je prendrai comme exemple un logo que j’ai créé pour mon blog personnel : Story Mode. Bien que dans cet article, nous utiliserons Adobe After Effects, la plupart des logiciels d’animation contiennent des fonctionnalités similaires et les principes de base s’appliqueront à n’importe quel programme, même si les noms et les options des menus peuvent différer.

Comment animer un logo avec After Effects en 7 étapes

  1. Préparer le fichier du logo
  2. Importer le logo dans After Effects
  3. Créer la composition
  4. Animer les images clés
  5. Animer les calques de forme
  6. Ajuster la synchronisation de l’animation
  7. Exporter le logo animé

Étape 1 : préparer le fichier du logo

Nous allons en réalité commencer ce tutoriel d’animation de logo dans Adobe Illustrator (ou le logiciel de création de logo équivalent que vous utilisez). L’objectif est de s’assurer que le fichier de notre logo est configuré correctement en vue d’être animé.

Bien que le logiciel d’animation lui-même soit basé sur des images matricielles, les fichiers sources du logo doivent être au format vectoriel. Cela leur permet d’être modifiés sans sacrifier la qualité de l’image (la mise à l’échelle d’un logo raster entraîne une pixellisation), ce qui sera utile plus tard lorsque l’on travaillera avec les calques de forme.

Capture d'écran d'Adobe Illustrator contenant un logo
Assurez-vous que votre logo soit composé de plusieurs calques

Votre logo doit également être composé de plusieurs calques plutôt que regroupé en un seul objet. Cela permet de créer des animations plus complexes en animant des parties distinctes du logo. Vous pouvez créer de nouveaux calques à l’aide du bouton Ajouter un nouveau calque en bas du panneau Calques, puis y copier-coller les éléments de votre logo.

Enfin, les animations étant de nature numérique, nous travaillons également avec les couleurs RVB. Si votre fichier Illustrator est en CMJN, modifiez-le en sélectionnant votre logo, puis en cliquant sur Modifier > Modifier les couleurs> Convertir en RVB.

Une fois que vous êtes prêt, exportez votre logo sous forme de fichier vectoriel en couches. Étant donné que les fichiers After Effects sont eux aussi des fichiers Adobe, enregistrez le logo que vous avez créé au format AI (Adobe Illustrator). Mais sachez qu’il existe un certain nombre de types de fichiers vectoriels parmi lesquels choisir si vous utilisez un autre logiciel.

Étape 2 : importer le logo dans After Effects

Ouvrez After Effects. Vu que l’interface peut sembler compliquée à première vue, voici les principaux éléments à connaître :

Capture d'écran de l'interface d'Adobe After Effects avec ses différentes sections
L’interface d’After Effects
  1. Panneau d’outils : c’est ici que l’on accède aux outils de création graphique de base tels que l’outil Plume ou l’outil Texte, par exemple
  2. Panneau Projet : c’est ici que l’on gère et organise les fichiers multimédias pour l’ensemble de son projet
  3. Fenêtre de composition : il s’agit de la fenêtre d’aperçu vidéo dans laquelle vous pouvez afficher l’animation de la composition actuelle sur laquelle vous travaillez. Les compositions sont essentiellement des scènes qui ont chacune leur propre chronologie d’animation. Nous aborderons les compositions plus en détail dans la section suivante
  4. Chronologie : c’est ici que vous construirez votre animation. Il s’agit à la fois de la chronologie à proprement parler à droite (où vous allez configurer les événements d’animation à déclencher sur une ligne de temps) et de la zone de composition à gauche (où vous allez superposer et modifier les attributs de vos ressources multimédias)
  5. Panneau de configuration : c’est ici que vous pouvez accéder à diverses fonctions d’assistance telles que les informations multimédia, les options de paragraphe et d’alignement, ainsi que les bibliothèques prédéfinies d’animation et d’effets visuels intégrés à After Effects

Si vous n’êtes pas sûr de savoir à quoi correspond un outil ou un bouton, survolez-le avec votre souris afin d’accéder à sa description.

Pour importer votre fichier logo, faites-le glisser et déposez-le dans le panneau Projet ou allez dans Fichier > Importer > Fichier. Dans la boîte de dialogue qui s’ouvre, choisissez d’importer le média en tant que Métrage et Calques fusionnés.

Étape 3 : créer la composition

Une composition est un conteneur permettant de superposer, d’éditer, et d’appliquer des animations à des fichiers multimédia. Une production plus importante, comme un film, contiendra plusieurs compositions organisées dans le panneau du projet. Les compositions correspondent donc à une seule scène, et chacune d’elles aura sa propre chronologie. Dans notre cas, étant donné que l’animation d’un logo dure moins de cinq secondes, nous aurons besoin de très peu de compositions.

Capture d'écran du logiciel After Effects, utile pour animer un logo
Pour créer une composition, faites glisser et déposez vos fichiers multimédia dans la partie gauche du panneau de la chronologie

Commençons par un arrière-plan simple. Cliquez avec le bouton droit dans le panneau de composition et choisissez Nouveau > Solide. Étant donné que mon logo est blanc, j’ai choisi du noir, mais vous pouvez bien entendu choisir la couleur que vous voulez. Dans la fenêtre suivante, nommez la couleur (« BG » dans mon cas) et cliquez sur Make Comp Size et sélectionnez OK. Faites maintenant glisser votre fichier logo du panneau du projet au panneau de la chronologie, et un aperçu de votre logo devrait s’afficher dans la fenêtre de composition. Sinon, assurez-vous de bien organiser vos calques en faisant glisser l’arrière-plan sous le fichier logo.

Cliquez avec le bouton droit de votre souris sur le fichier logo dans le panneau de composition et choisissez Créer > Convertir en composition de calques. Cela transformera votre fichier logo en une autre composition (vous verrez que l’icône a changé). Maintenant, si vous double-cliquez sur le fichier logo, un nouvel onglet s’ouvrira et vous emmènera dans cette nouvelle composition, avec tous les calques séparés que vous aviez configurés dans Illustrator. Vous pouvez désormais voir comment fonctionnent les compositions : elles ressemblent à des dossiers imbriqués.

Vous pouvez également convertir chacun de ces calques en une composition à part entière en cliquant sur le bouton droit de la souris et en sélectionnant Pré-composition. Ainsi, le calque sélectionné aura une chronologie d’animation distincte imbriquée dans la composition précédente. Et si vous voulez animer la totalité du logo en une seule fois, il vous suffira d’utiliser la chronologie associée à la composition principale.

Voyons maintenant comment ces chronologies fonctionnent et créent une animation.

Étape 4 : animer les images clés

Le fonctionnement d’After Effects (et de la plupart des logiciels d’animation) repose sur les images clés. Les images clés sont des marqueurs que l’on définit tout au long de la chronologie afin d’identifier les états de début et de fin de votre animation.

Pour commencer, prenons une animation très simple comme exemple : un fondu d’entrée. Il existe différents attributs attachés à un objet, et les attributs modifiés sur une période de temps définie constituent essentiellement une animation. Pour voir ces attributs, cliquez sur l’icône de développement à côté de la composition de logo, puis sur la propriété Transformer.

Capture d'écran du panneau de chronologie d'Adobe After Effects
Créer des images clés en cliquant sur l’icône du chronomètre à côté des propriétés dans le panneau de la chronologie

Pour créer une animation en fondu, le mieux est de jouer sur l’opacité, c’est-à-dire l’attribut qui influence la visibilité d’un objet. L’opacité est définie sur 100 % car, par défaut, le logo est entièrement visible.

Cliquez sur l’icône du chronomètre à côté d’Opacité pour faire apparaître un losange partout où votre marqueur de tête de lecture (la ligne bleue qui traverse la chronologie) a été défini. Il s’agit d’une image clé, c’est-à-dire un instantané de la valeur actuelle de l’attribut spécifié. Déplacez l’image clé en cliquant dessus, puis en la faisant glisser jusqu’à la marque des 2 secondes sur la ligne de temps. Faites glisser la tête de lecture jusqu’à la marque 0 seconde, puis créez une autre image clé, et définissez l’opacité à 0 %. Appuyez ensuite sur la barre d’espace pour prévisualiser l’animation dans la fenêtre de composition.

Vous verrez que vous venez de créer une animation en fondu progressif en modifiant l’opacité de 0 % à 100 % en 2 secondes avec seulement deux images clés. C’est comme ça que sont réalisées toutes les animations dans After Effects : vous créez une image clé de départ 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 aller du point A au point B (que l’on appelle souvent des tweenings ou des interpolations, dans le jargon de l’animation).

GIF montrant comment animer un logo avec un fondu d'entrée dans After Effects
Une simple animation en fondu d’entrée est créée à l’aide de deux images clés avec la propriété Opacité

Vous pouvez voir qu’il existe un certain nombre d’attributs que vous pouvez utiliser avec la propriété Transformer, et que nous expliquerons brièvement ici. N’hésitez pas à expérimenter avec les images clés et à modifier chacune d’elles pour vous rendre compte des possibilités :

  • Position : cet attribut décrit la position du logo dans l’espace X, Y sur l’écran de composition et permet d’animer un mouvement linéaire
  • Échelle : cet attribut décrit la taille du logo (en pourcentage par rapport à la taille totale du fichier source) et permet de créer des animations qui s’agrandissent ou se réduisent
  • Rotation : cet attribut décrit l’orientation en degrés et permet de créer des animations qui tournent

Conseil de pro : en animation de logo, il est logique de travailler à reculons (comme nous l’avons fait avec le fondu d’entrée) puisque l’animation est censée se terminer sur le logo fini et complet. Cela signifie que vous devrez 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. Déplacez ensuite ces images clés vers le point final souhaité sur la chronologie (quelle que soit la durée de l’animation), et créez de nouvelles images clés au début de la chronologie.

Étape 5 : animer les calques de forme

Passons maintenant à des techniques d’animation plus intéressantes avec les calques de forme. Les calques de forme sont des objets qui contiennent des informations de chemin, telles que des points d’ancrage et des lignes de connexion (similaires aux vecteurs). Les calques de forme offrent une multitude de possibilités d’animation, bien au-delà de la propriété Transformer.

Capture d'écran de l'interface d'Adobe After Effects
Les calques de forme sont représentés par une étoile. On peut convertir n’importe quel graphique vectoriel en calque de forme en cliquant sur le bouton à droite de sa souris, puis en sélectionnant Créer > Créer des formes à partir d’un calque vectoriel

Nous allons d’abord convertir le logo en un calque de forme. Dans le panneau de composition en calques (créés à partir de l’étape 3), sélectionnez tous vos calques, cliquez avec le bouton droit de la souris, et choisissez Créer > Créer des formes à partir d’un calque vectoriel. Chaque calque est dupliqué et représenté avec une étoile. Il s’agit alors d’un calque de forme. La propriété Contenu et la propriété Transformer se trouvent sous le calque de forme. À droite de la propriété Contenu, vous verrez également le bouton Ajouter qui permet de sélectionner davantage d’attributs à animer.

Aperçu de l'interface d'Adobe After Effects
Les calques de forme contiennent le bouton Ajouter (à droite de la propriété Contenu), qui permet d’ajouter toutes sortes de propriétés que l’on peut animer, comme Trim Paths

Pour mon logo, j’ai opté pour une animation assez courante et pratique, en utilisant la propriété Trim Paths. Pour ce faire, ajoutez Trim Paths avec le 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 100 % environ 1 seconde plus tard. Comme vous pouvez le voir, cela fait apparaître le contour des lettres dessiné par une main invisible, en temps réel.

Aperçu de l'animation Trim Paths dans Adobe After Effects
La propriété Trim Paths permet d’animer des lignes pour qu’elles se dessinent toutes seules en temps réel

Je voulais aussi intégrer une animation d’arrière-plan. Puisque je travaille en noir et blanc, j’ai choisi un effet tunnel en boucle qui rappelle le crépuscule. Ainsi, j’ai utilisé l’outil polygone de la barre d’outils pour dessiner une forme au centre de ma composition, créant ainsi un nouveau calque de forme.

J’ai ensuite ajouté une propriété Répétition, j’ai centré la position, et j’ai augmenté le nombre de copies. Cela a pour effet de dupliquer la forme et de créer un tunnel qui a l’air infini. En ajustant l’échelle, on augmente l’espace entre chaque copie, et modifier la rotation oriente les copies dans différentes directions, créant ainsi de l’intérêt visuel.

Pour finir, j’ai créé une image clé Offset de 0 au début de la chronologie, que j’ai définie sur une valeur négative plus tard dans la chronologie.

Aperçu du logiciel Adobe After Effect pour animer un logo
J’ai créé un arrière-plan qui peut être animé en utilisant un calque de forme de polygone et la propriété Répétition

On pourrait croire qu’il existe de nombreuses options pour les calques de forme et c’est vrai : il existe des cours entiers en ligne dédiés à ce sujet. N’hésitez pas à expérimenter, à pratiquer, et à apprendre autant que possible.

Vous serez également seul face à vous-même pour déterminer quel style d’animation conviendra le mieux à votre logo, ou de quels outils d’animation spécifiques vous aurez besoin pour recréer ce style-là. Je peux cependant vous donner des conseils et vous aider à trouver les bonnes informations. Allez cherche l’inspiration dans d’autres logos animés : ceux de vos concurrents, mais aussi ceux des marques que vous admirez, ainsi que sur les sites comme Pinterest ou Dribbble, tout comme vous l’avez sûrement déjà fait en premier lieu pour créer votre logo.

Vous verrez qu’une fois que vous analysez ces logos avec les connaissances que vous venez d’acquérir sur les différentes façons d’animer un logo, vous vous rendrez compte que de nombreux designs sont basés sur de simples manipulations de formes et de transformations (même lorsqu’on a clairement utilisé des effets avancés). Une fois que vous en avez trouvé quelques exemples qui vous plaisent, retournez dans After Effects et essayez de procéder à rebours pour vous entraîner à recréer ces animations.

Étape 6 : ajuster la synchronisation

Examinons de plus près la synchronisation. C’est elle qui détermine le rythme de défilement des images tout au long d’une animation. Vous pouvez voir une représentation visuelle de la synchronisation grâce à l’Éditeur de graphiques. Pour cela, cliquez sur l’icône Graphique (intitulée Éditeur de graphiques si vous la survolez) à côté du haut du panneau de la chronologie, ce qui aura pour effet de changer la chronologie en un graphique linéaire.

Si vous cliquez sur l’un de vos attributs d’image clé, vous verrez une ligne droite d’une image clé à l’autre. Pour le moment, comme nous ne créons que des images clés de point de départ et de fin, nous avons laissé au logiciel le soin de calculer la durée de chaque image. Par défaut, After Effects rythme chaque image d’animation de manière uniforme, ce qui est représenté par une ligne parfaitement droite.

Capture d'écran de l'Éditeur de graphiques dans Adobe After Effects
L’Éditeur de graphiques montre la synchronisation des images comme tracées sur un graphique linéaire

Mais c’est en faisant varier stratégiquement la durée des images que l’on parvient à donner un certain réalisme aux animations. Par exemple, si vous voulez animer une balle qui rebondit au sol, vous noterez qu’elle se déplace plus lentement en remontant qu’en descendant, à cause d’un effet d’élan et de la gravité. Autrement dit, la balle ne se déplace pas à la même vitesse tout au long de l’animation, et si votre animation ne prend pas cela en compte, votre balle aura des airs de robot.

Capture d'écran des outils Bézier dans Adobe After Effects
Les outils Bézier, situés en bas de l’Éditeur de graphiques, permettent d’ajuster la courbure de la ligne du graphique

L’éditeur de graphique permet d’ajuster la synchronisation de votre animation en utilisant ce que l’on appelle des poignées Bézier pour transformer le segment du graphique en une courbe. En bas à droite de l’Éditeur de graphiques, vous verrez un certain nombre d’icônes de petits points carrés reliés par des lignes. Il s’agit des outils Bézier.

Cliquez sur l’une de vos images clés et survolez les outils Bézier jusqu’à ce que vous trouviez celui intitulé Convertir les images clés en Bézier auto. Lorsque vous cliquez sur cette fonction, une poignée jaune apparaîtra dans le graphique. Faites glisser cette poignée pour entraîner la courbe du segment, et modifier la synchronisation de votre animation. Les images seront lues plus rapidement là où la courbe est plus prononcée, et plus lentement là où elle est plus douce.

Capture d'écran des outils Bézier dans Adobe After Effects
Plus la courbe est accentuée, plus la synchronisation est rapide, et vice versa

Pour vraiment comprendre les nuances du minutage et l’importance de le personnaliser, rien ne vaut l’expérience. C’est pourquoi ajuster manuellement les courbes Bézier est une technique plus avancée. Étant donné que ce tutoriel est destiné aux débutants, je recommande d’utiliser l’outil Easy Ease Bézier (qui applique une courbe automatique à votre image clé sélectionnée) pour le minutage de votre animation. Vous pouvez appliquer Easy Ease à une image clé en dehors de l’Éditeur de graphiques en sélectionnant une image clé et en cliquant avec le bouton droit de la souris.

Étape 7 : exporter votre logo animé

Une fois que vous êtes prêt à exporter votre logo, allez dans Fichier > Exporter > Ajouter à la file d’attente Adobe Media Encoder. After Effects exportera votre fichier en tant que fichier mp4 par défaut, ce qui convient parfaitement à la vidéo. Puisque nous voulons créer un fichier partageable de notre animation de logo, nous allons l’exporter sous forme de GIF animé. Dans la fenêtre de Media Encodeur, cliquez sur la flèche près de la ligne de texte bleue en surbrillance sous le mot Format, et choisissez GIF animé. Vous pouvez également sélectionner le dossier de destination de votre fichier en cliquant sur le texte bleu.

Capture d'écran d'Adobe Media Encoder
Pour exporter votre fichier, allez dans Fichier > Exporter > Ajouter à la file d’attente Adobe Media Encoder et sélectionnez GIF animé dans le menu déroulant sous la colonne Format

Double-cliquez sur le texte bleu en surbrillance sous Préréglages pour faire apparaître la fenêtre des paramètres d’exportation. Il y a quelques options à connaître qui vous permettront de réduire la taille du fichier : Qualité (je mets la mienne à 20), Fréquence d’images (j’ai mis la mienne à 10, bien qu’une fréquence d’images plus élevée (fps) soit recommandée pour la vidéo), et la durée, qui est la barre bleue sous l’aperçu (j’ai rogné la mienne à 4 secondes). Cliquez sur OK pour fermer la fenêtre.

Le GIF de mon logo animé terminé
Mon logo animé une fois terminé

Une fois que vous avez terminé, sélectionnez l’icône de lecture en vert dans le coin supérieur droit de Media Encoder, et votre fichier sera enregistré dans votre dossier. Et voilà comment animer un logo en 7 étapes.

Donnez vie à votre marque en animant votre logo

L’animation de logo n’est pas qu’une simple tendance populaire en ce moment. En plus d’avoir un petit côté magique, c’est un excellent moyen de créer quelque chose d’agréable à regarder pour tous ceux qui interagissent avec votre marque. Et heureusement, les logiciels d’animation ont évolué de sorte que presque n’importe qui, indépendamment de ses compétences, peut infuser un peu de cette magie dans son propre design.

Cela dit, si ce tutoriel a été conçu pour vous aider à vous familiariser avec les bases de l’animation d’un logo, il vous faudra une bonne dose de pratique et d’expérimentation avant d’obtenir une animation qui ne se contente pas d’utiliser les principes de bases. Pour obtenir un logo animé vraiment unique et original, rien ne vaut le travail d’un professionnel.

Vous voulez créer le logo animé parfait pour votre entreprise ?
Faites appel à nos talentueux designers pour le réaliser.