Aller au contenu
Version de test La formation s'écrit au fur et à mesure : tes retours comptent.
Autivia Formation

Étape 19 · Cas concret : le motion design avec l'IA

Animer ton logo en quelques secondes, sans logiciel

  • 45 à 60 min
  • 0 € (compte gratuit Canva ou Adobe Express)
  • Leçon 1 sur 5
  • Relue le 27 octobre 2026
Suivre cette leçon avec le compagnon dans Claude Code
/formation-ia:suivre m19-l01

1. À la fin de cette leçon, tu sauras

  • Choisir avec l’IA un style de mouvement qui ressemble à ton projet.
  • Préparer ton logo pour l’animer morceau par morceau.
  • Animer ton logo dans un outil en ligne gratuit, sans installer de logiciel.
  • Exporter une version vidéo et une version GIF, prêtes pour le web et les réseaux.

2. Pourquoi ça t’intéresse

Camille tient un petit atelier de céramique, « Atelier Argile ». Son logo, un bol stylisé et le nom de l’atelier, reste figé sur ses vidéos. En quarante minutes, elle fait apparaître le bol en douceur, puis le nom qui glisse dessous. Elle obtient une courte vidéo qu’elle place à la fin de chaque publication, et un GIF pour sa signature d’e-mail. Ce module suit le même chemin pour ton projet : à chaque leçon, tu ajoutes une pièce, jusqu’à une vidéo explicative publiée sur tes réseaux. Ton logo animé est la première pièce : il servira dans toutes les suivantes.

3. Avant de commencer

Il te fautTon logo en image (idéalement en PNG à fond transparent, ou en SVG), un compte gratuit Canva ou Adobe Express, un assistant conversationnel, ton carnet de bord
Coût0 € ; certaines animations ou fonctions peuvent être réservées aux offres payantes, vérifie la page des prix de l’outil
Durée45 à 60 minutes

Pas encore de logo ? Utilise le nom de ton projet écrit dans ta police préférée, avec une forme simple à côté : c’est suffisant pour cette leçon.

4. Comprendre en 3 minutes

Le motion design, c’est du graphisme qui bouge : des formes, des textes et des logos animés, plutôt que des images filmées. Tu le vois partout : la fin des publicités, les titres des vidéos, les petites icônes qui s’animent sur un site.

Image mentale : une entrée en scène au théâtre. Ton logo est l’acteur. Tu choisis par où il arrive, à quelle vitesse, et dans quel ordre les morceaux apparaissent. Un acteur qui entre calmement ne donne pas la même impression qu’un acteur qui bondit.

Dans un outil comme Canva, tu as deux niveaux d’animation :

NiveauCe qui bougeQuand l’utiliser
Animation de la pageTous les éléments de la page, avec un même stylePour aller vite
Animation d’un élémentUn seul élément (le symbole, ou le nom)Pour une mise en scène : le symbole d’abord, le nom ensuite

Selon la page d’aide de Canva, on peut aussi créer sa propre trajectoire en déplaçant l’élément à la souris. Les noms des boutons évoluent : on décrit ici l’intention, cherche le libellé le plus proche dans ton outil.

L’IA intervient avant l’outil : elle t’aide à choisir le caractère du mouvement (doux, joyeux, sérieux, dynamique), en accord avec ton projet. C’est l’étape « Discuter » de la méthode : on décide, puis on produit.

5. Faire ensemble

Exemple : le logo de l’Atelier Argile.

Étape 1 · Choisir le style du mouvement avec l’IA

Dans ton assistant conversationnel :

Je veux animer le logo de [ton projet : nom et activité]. Le logo contient : [décris-le : symbole, texte, couleurs]. Mon public : [qui me suit]. Propose-moi trois styles d'animation très courts, chacun décrit en une phrase : comment chaque élément entre, dans quel ordre, quelle impression ça donne. Pose-moi d'abord une question sur le ton de mon projet.

Réponds à sa question, puis choisis un seul style. Note-le dans ton carnet, par exemple : « le bol apparaît en fondu, puis le nom glisse de bas en haut ».

  1. Ouvre Canva (ou Adobe Express) dans ton navigateur et crée un design carré.
  2. Importe ton logo depuis la zone de téléversement, puis place-le au centre.
  3. Si ton logo est composé de plusieurs éléments groupés, sélectionne le groupe et cherche l’option pour le dissocier : tu dois pouvoir cliquer séparément sur le symbole et sur le nom.
  4. Si ton logo est une seule image, c’est normal : il s’animera d’un bloc. Pour animer le nom à part, ajoute-le en zone de texte et retire-le de l’image.

Ce que tu dois voir : ton logo centré sur un fond uni (ta couleur principale ou blanc), avec des éléments sélectionnables un par un.

Étape 3 · Animer, élément par élément

  1. Clique sur le symbole, puis sur le bouton pour animer l’élément, dans la barre au-dessus de l’éditeur.
  2. Choisis l’animation la plus proche du style noté à l’étape 1. Survole les propositions : un aperçu se joue.
  3. Fais de même pour le nom, avec une animation compatible.
  4. Règle l’ordre : le symbole d’abord, le nom ensuite. Selon l’outil, cela passe par un réglage de délai ou par l’ordre des éléments.
  5. Garde une durée courte : quelques secondes au total suffisent pour une signature.

Étape 4 · Regarder comme un inconnu

  1. Lance l’aperçu trois fois de suite.
  2. Demande-toi : reconnaît-on le logo dès la fin du mouvement ? Le mouvement correspond-il au caractère choisi ?
  3. Si un détail gêne, change une seule animation à la fois, puis relance l’aperçu.

Étape 5 · Exporter deux versions

  1. Ouvre le menu de partage ou de téléchargement.
  2. Choisis le format vidéo MP4 : c’est la version pour tes montages et tes réseaux.
  3. Recommence et choisis GIF : c’est la version légère et muette pour ton site ou ta signature.
  4. Range les deux fichiers dans ton dossier de travail, dans un sous-dossier « motion-design ». Nomme-les clairement : logo-anime.mp4, logo-anime.gif.

Si ça ne marche pas :

  • L’option pour dissocier n’apparaît pas : ton logo est une seule image. Anime-le d’un bloc, ou recrée le nom en texte.
  • Le fond blanc entoure le logo : ton fichier n’avait pas de fond transparent. Choisis un fond de page de la même couleur que celui du logo.
  • Le GIF est flou ou saccadé : c’est le format qui veut ça. Utilise le MP4 partout où c’est possible.
  • Une animation porte une marque de l’offre payante : choisis-en une autre, ou vérifie les conditions sur la page des prix.

Piège fréquent : empiler les effets parce qu’ils sont tous jolis. Le résultat ressemble à une démonstration de logiciel, pas à ta marque. Un seul mouvement, court, que tu pourrais décrire en une phrase : c’est ce qu’on retient.

6. Faire toi-même

Anime le logo de ton propre projet (ta petite entreprise, ton association ou ton projet personnel) en suivant les cinq étapes. Puis fais une deuxième version : la même animation sur fond de ta couleur principale si la première était sur fond blanc, ou l’inverse. Montre les deux à une personne de ton entourage sans rien expliquer, et demande-lui laquelle lui semble « te ressembler ».

Résultat attendu : un fichier logo-anime.mp4 et un fichier logo-anime.gif dans ton dossier de travail, et la phrase qui décrit ton style de mouvement notée dans ton carnet de bord.

7. Vérifier

  • J’ai choisi un seul style de mouvement, décrit en une phrase dans mon carnet.
  • Le symbole et le nom apparaissent dans l’ordre voulu.
  • L’animation est courte et le logo reste lisible à la fin.
  • J’ai exporté une version MP4 et une version GIF.
  • Les fichiers sont nommés clairement et rangés dans mon dossier « motion-design ».
  • Une personne extérieure a reconnu mon projet en regardant l’animation.

8. Ce que tu gardes

Dans ton carnet de bord : la phrase qui décrit ton style de mouvement (elle servira dans toutes les leçons du module), la demande de l’étape 1 transformée en modèle à trous, et les noms des deux animations choisies dans l’outil, pour les retrouver la prochaine fois.

9. Pour aller plus loin

  • Anime aussi une version horizontale de ton logo, pour la fin de tes vidéos en 16:9 (leçon 5).
  • La leçon suivante place ce logo animé à la fin d’une vidéo courte, avec des titres et des sous-titres.

Vérifie ta compréhension

3 questions, sans note. L'explication s'affiche après ta réponse.

1Pourquoi dissocier les éléments de ton logo avant de l'animer ?
2Quel format choisis-tu pour un logo animé qui sera intégré à la fin d'une vidéo avec du son ?
3Ton logo animé dure longtemps et part dans tous les sens. Quelle règle appliques-tu ?

Pour vérifier par toi-même : canva.com, canva.com, adobe.com, claude.ai

Fin de la leçon