Comment ajouter des animations graphiques à une vidéo
Comment ajouter des animations graphiques à une vidéo pour mieux expliquer : 8 éléments graphiques utiles, règles de timing, un plan de montage de 60 secondes et 3 méthodes pour les créer.
Roozbeh Firoozmand13 min de lecture
La plupart des vidéos produit n'ont pas besoin de plus de mouvement. Elles ont besoin que le regard du spectateur se porte au bon endroit, au bon moment. Lorsque vous ajoutez des animations graphiques à une vidéo, chacune doit remplir l'une de ces deux fonctions : indiquer où regarder ou expliquer la signification d'un élément. Tout le reste n'est que décoration, et dans un enregistrement d'écran, la décoration entre en concurrence avec l'interface que vous présentez.
Ci-dessous : les 8 éléments graphiques qui valent le détour, les règles de timing pour chacun, un plan de montage avant/après pour une démonstration de 60 secondes, et 3 méthodes pour les créer.
Le test que chaque élément graphique doit réussir
Regardez le clip avec et sans l'élément graphique. Le spectateur trouve-t-il le bon bouton ou le bon chiffre plus rapidement avec ? Si la réponse honnête est "c'est plus joli", supprimez-le. 2 vérifications supplémentaires permettent d'éliminer la plupart des éléments superflus :
- Une seule animation à la fois. Décalez les apparitions d'au moins une demi-seconde, sinon le spectateur ne pourra rien lire.
- L'élément graphique arrive avec la narration. Si la voix off dit "cliquez sur Exporter" et que la mise en surbrillance apparaît 2 secondes plus tard, le spectateur est déjà perdu. Faites-la apparaître sur le mot, ou quelques images avant.
8 éléments graphiques qui ont leur place dans un enregistrement d'écran
| Élément graphique | Fonction | Règle empirique |
|---|---|---|
| Étiquette (texte) | Nomme l'élément à l'écran | 2 à 6 mots, affiché au moins 2x le temps de lecture |
| Zoom + surbrillance | Montre où se trouve l'action | Zoomer avant le clic, maintenir 1 à 2 secondes après |
| Compteur d'étapes | Indique au spectateur où il en est | Même coin, même style, à chaque étape |
| Tiers inférieur | Nomme une personne ou une section | Tiers inférieur, sans masquer l'interface |
| Écran de titre | Sépare les chapitres | 2 à 3 secondes, 1 ligne de texte |
| Flèche animée | Pointe vers ce qu'un zoom ne peut isoler | Apparaît, puis reste immobile |
| Compteur de données | Donne du poids à un chiffre | Compte en 1 seconde environ, puis maintient la valeur finale |
| Transition | Marque un changement de scène ou de sujet | 1 style par vidéo, moins d'une demi-seconde |
Étiquettes
Une étiquette doit nommer la commande ou indiquer le résultat : "Paramètres de facturation" ou "Facture envoyée". Limitez-vous à 6 mots. Les directives de sous-titrage de la BBC recommandent un minimum d'environ 0,3 seconde par mot pour les sous-titres. Dans un enregistrement d'écran, votre spectateur analyse aussi l'interface, alors doublez ce temps : une étiquette de 4 mots nécessite environ 2,5 secondes, pas 1,2.
Zoom + surbrillance
L'élément graphique le plus utile dans un enregistrement d'écran, et le plus utilisé à tort. Zoomez 0,5 seconde avant le clic, maintenez pendant que le résultat apparaît, puis dézoomez pour que le spectateur se repère. Une surbrillance (un cadre doux ou un assombrissement de l'arrière-plan) remplit la même fonction sans déplacer le cadre, ce qui convient aux tableaux de bord denses où le zoom masque le contexte. Utilisez l'un ou l'autre par action.
Compteurs d'étapes
"Étape 3 sur 5" dans un coin fixe indique au spectateur ce qu'il reste à faire. Gardez l'emplacement et le style fixes et ne changez que le numéro. En dessous de 3 étapes, passez-vous-en.
Tiers inférieurs
Dans une vidéo produit, les tiers inférieurs nomment le présentateur dans une bulle vidéo ou étiquettent une section ("Vue administrateur"). Surveillez le placement : le bas de la plupart des applications web contient des barres d'enregistrement et des widgets de chat.
Écrans de titre
Utilisez-les entre les chapitres, pas à chaque étape. Une vidéo de 60 secondes en nécessite 1, au début. Un écran de titre qui demande du temps de lecture est un paragraphe qui se prend pour un élément graphique.
Flèches animées
Une flèche est préférable à un zoom lorsque deux éléments à l'écran sont liés, comme "ce bouton modifie cet aperçu". Laissez-la se dessiner en 0,3 seconde environ, puis arrêtez-la. Une flèche qui rebondit attire l'attention tant qu'elle bouge.
Compteurs de données
Compter jusqu'à "1 240 tickets" donne du poids à une statistique dans une démo ou un clip de lancement. Cela n'a que rarement sa place dans un tutoriel. Animez rapidement et maintenez le chiffre final, sinon le mouvement est tout ce dont le spectateur se souviendra.
Transitions
Utilisez 1 style par vidéo, uniquement lorsque la scène ou le sujet change. Entre deux étapes sur le même écran, une coupe franche est généralement préférable. Évitez les effets de flash : le critère de succès WCAG sur 3 flashs ou moins existe car le contenu clignotant peut déclencher des crises d'épilepsie et des migraines.
Règles pour garder des superpositions animées cohérentes
Les superpositions animées ont l'air professionnelles lorsqu'elles forment un système :
1. Un seul style de mouvement. Même accélération, même direction d'entrée, même durée pour chaque étiquette. Si les étiquettes glissent depuis la gauche à l'étape 1, elles doivent faire de même à l'étape 5. 2. Modèles de marque, créés une fois. Les polices, couleurs, animations de logo et mises en page d'écrans de titre doivent être dans un modèle enregistré, et non recréés pour chaque vidéo. Tous les outils ci-dessous le permettent sous une forme ou une autre. 3. Une zone de sécurité. Gardez le texte éloigné des bords du cadre et des commandes de l'interface que vous montrez. Marquez la zone de sécurité dans votre modèle. 4. Les éléments graphiques suivent le script. Écrivez d'abord la narration, puis marquez le mot sur lequel chaque élément graphique s'appuie. Pas de mot, pas d'élément graphique.
Avant et après : plan de montage pour une démonstration de 60 secondes
Une démonstration de 60 secondes sur "envoyer votre première facture" dans une application de facturation SaaS classique. "Avant" est l'enregistrement brut avec voix off.
| Temps | Avant (enregistrement brut) | Après (avec animations graphiques) |
|---|---|---|
| 0:00–0:03 | Tableau de bord, curseur qui dérive | Écran de titre : "Envoyez votre première facture" avec logo, 3 secondes |
| 0:03–0:10 | Le narrateur explique l'objectif sur le tableau de bord | Compteur d'étapes ("Étape 1 sur 4") ; surbrillance sur l'onglet Factures quand le narrateur le nomme |
| 0:10–0:18 | Clic sur Factures, chargement de la page | Zoom sur le bouton Nouvelle facture 0,5 seconde avant le clic ; étiquette "Nouvelle facture" |
| 0:18–0:32 | Saisie du client, articles, montant | Étape 2 sur 4 ; dézoom pour montrer le formulaire complet ; flou sur l'e-mail réel du client |
| 0:32–0:40 | Défilement jusqu'à la date d'échéance | Étape 3 sur 4 ; flèche du champ date d'échéance vers l'aperçu des conditions de paiement |
| 0:40–0:50 | Clic sur Envoyer, notification de confirmation | Étape 4 sur 4 ; zoom sur la notification ; étiquette "Facture envoyée", maintenue 2,5 secondes |
| 0:50–0:57 | Le narrateur mentionne les rappels | Transition glissée vers l'écran Rappels ; surbrillance sur le bouton bascule |
| 0:57–1:00 | La vidéo se termine sur le tableau de bord | Écran de fin avec le titre de la vidéo suivante, même modèle que l'ouverture |
Cela représente 16 événements graphiques en 60 secondes. Cela fonctionne car les entrées sont décalées et chacune s'appuie sur un mot du script. Le flou sert à la confidentialité, et c'est le seul élément graphique que vous ne devez jamais ignorer sur des données client réelles.
3 méthodes pour ajouter des animations graphiques à une vidéo
1. Un éditeur traditionnel : Premiere, After Effects ou DaVinci Resolve
Adobe Premiere avec After Effects. Les modèles d'animations graphiques (fichiers .mogrt) sont créés dans After Effects et réutilisés dans Premiere. Selon la page d'aide d'Adobe, vous faites glisser un modèle depuis le panneau Objets graphiques essentiels sur une piste vidéo, puis vous le modifiez dans l'onglet Modifier du panneau Propriétés. Les modèles basés sur des données remplissent les graphiques à barres et linéaires à partir de données de tableur, ce qui est la méthode la plus propre pour obtenir des compteurs de données et des graphiques précis.
DaVinci Resolve. La page Fusion est un outil de composition basé sur des nœuds intégré à Resolve, proposant plus de 200 outils. Vous pouvez créer des tiers inférieurs, des arrière-plans animés et des transitions dans Fusion, les enregistrer sous forme de macros et n'exposer que les commandes nécessaires à un monteur. Ils apparaissent ensuite dans la bibliothèque d'effets de la page Montage pour tout projet. Resolve est téléchargeable gratuitement ; Resolve Studio est proposé à 295 $.
Idéal pour : les équipes disposant d'un motion designer qui crée des modèles une fois, et des monteurs qui les réutilisent. Inconvénient : les zooms et les légendes sur un enregistrement d'écran sont à définir manuellement par images clés, à chaque fois.
2. Un éditeur basé sur des modèles : Canva ou CapCut
Canva vous permet d'animer des pages, des éléments et du texte via le bouton Animer, avec des préréglages Lent, Moyen ou Rapide ou des durées d'introduction et de conclusion précises. « Afficher le minutage des éléments » vous permet de définir quand chaque élément apparaît, et « Créer une animation » vous permet de faire glisser un élément le long d'un chemin de mouvement. Les Kits de marque stockent les logos, couleurs et polices afin que les modèles restent fidèles à la marque.
CapCut dispose d'une bibliothèque de modèles de texte et d'animations de texte, et sur ordinateur, vous pouvez définir des images clés pour la position, l'échelle, la rotation et l'opacité. C'est ainsi que vous construiriez un zoom manuel ou une légende coulissante.
Idéal pour : les marketeurs qui utilisent déjà ces outils et ont besoin de texte animé sur de courtes séquences. Inconvénient : aucun des deux n'est conçu pour les enregistrements d'écran, donc les zooms qui suivent les clics, le nettoyage du curseur et les flous de confidentialité sont un travail manuel.
3. Clevera : des superpositions sur une timeline, ou un brief en quelques mots
Clevera part de l'enregistrement. Pour les vidéos explicatives narrées par IA et les démonstrations de produits, il lisse le curseur, met en évidence les interactions clés et applique un zoom intelligent tout en écrivant et en synchronisant la voix off. La majeure partie du travail de zoom et de surbrillance de la liste de plans ci-dessus est effectuée avant même que vous n'ouvriez l'éditeur.
Dans l'éditeur de timeline, vous ajoutez ou ajustez ensuite le reste : texte, image, flou et surbrillances, écrans de titre, écrans d'introduction, révélations de logo, zooms et transitions telles que zoom croisé, escalier, stores, fondu, balayage doux et glissement. Les écrans de titre, les révélations de logo et le style vidéo s'enregistrent en tant que modèles prédéfinis ou personnalisés, afin que la deuxième vidéo ressemble à la première. Si vous souhaitez uniquement que votre propre enregistrement soit stylisé avec des zooms, des superpositions et des écrans de titre, l'option stylisée (prête à partager) n'utilise aucun crédit IA, elle est donc illimitée sur tous les plans, y compris Gratuit (sur le plan Gratuit, vous partagez par lien ou intégration ; les téléchargements MP4 sont inclus avec Starter et Pro).
Pour des graphismes en dehors de cette liste, utilisez Décrivez ce que vous voulez dans le générateur de motion graphics par IA. Vous rédigez un brief libre, tel que « ajoutez un compteur animé de 0 à 1 240 à 0:45 et une flèche du champ de date d'échéance à l'aperçu des conditions », et Clevera crée des graphismes animés par-dessus la vidéo existante. La liste des superpositions de l'éditeur n'inclut pas de flèche ou de compteur dédié, c'est donc la solution pour ces éléments.
Les modifications apportées au texte, aux surbrillances et aux flous sur une vidéo Clevera publiée mettent à jour chaque lien hébergé et intégration, de sorte qu'une étiquette de bouton renommée est corrigée une seule fois. Une nouvelle interface nécessite toujours de nouvelles images.
Idéal pour : les équipes produit, support et marketing qui réalisent des démonstrations chaque semaine sans monteur. Inconvénient : l'enregistreur IA capture uniquement les sites web et les applications web, donc les images de logiciels de bureau proviennent de l'application de bureau ou d'un téléchargement. Et consultez la section suivante pour les tâches qu'il ne devrait pas effectuer.
Ce que Clevera a ajouté seul, et ce qu'il n'a pas fait
En octobre 2026, nous avons utilisé l'enregistreur IA de Clevera pour capturer une courte tâche dans une application de démonstration, 0:58 d'images brutes, et l'avons transformée en vidéo explicative. Environ 50 secondes et 9 crédits plus tard, la timeline contenait déjà un écran d'introduction, une révélation de logo et des zooms automatiques à 1,5x et 1,8x, réduits à 0:40. C'est le travail sur l'écran de titre et les lignes de zoom de la liste de plans qui est effectué. Les légendes, un compteur d'étapes et les flèches n'y étaient pas ; c'est à vous de les ajouter.
Nous avons ensuite exécuté « Styliser pour le partage » sur le même enregistrement avec notre modèle d'équipe au lieu du modèle par défaut intégré. Cela a pris environ 25 secondes et 0 crédit. La sortie a duré 1:07, plus longue que la source en raison de l'écran d'introduction, avec 2 zooms automatiques à 1,8x et l'éditeur ouvert sur le panneau Style pour l'arrière-plan, le remplissage, les coins et le curseur. La page enregistrée elle-même semblait délavée et peu contrastée ; le panneau Style encadre les images, il ne les corrige pas.
La version 1:07 stylisée pour le partage du même enregistrement, non modifiée, 0 crédit.
Pour la méthode du brief, un brief personnalisé a créé une infographie animée de 1:00 avec une barre de remplissage en environ 7 à 8 minutes pour 86 crédits. Les chiffres étaient corrects, mais il a ignoré les 15 secondes écrites dans le brief (la durée est définie dans le menu Format) et la ligne source est apparue trop petite pour un téléphone. Ce clip a été créé à partir de zéro. Nous n'avons pas encore testé les graphismes superposés sur un enregistrement existant.
L'infographie animée de 1:00 renvoyée par Clevera à partir du brief, non modifiée.
Quand un motion designer vaut l'investissement
Les éditeurs IA et les modèles couvrent les graphismes de ce guide. Ils ne remplacent pas un motion designer pour :
- Une vidéo de lancement ou un film de marque où chaque image est dirigée artistiquement et où le mouvement lui-même est le message.
- Des graphismes suivis sur des images en mouvement, comme une étiquette qui suit un téléphone dans une prise de vue à la main.
- La 3D, l'animation de personnages ou l'illustration personnalisée en mouvement.
- Votre système de modèles. Une semaine de travail d'un designer pour créer vos tiers inférieurs, écrans de titre et révélation de logo dans After Effects ou Fusion est rentabilisée sur chaque vidéo que votre équipe réalise ensuite, dans n'importe quel outil acceptant les modèles.
La répartition habituelle : un designer pour le système et le lancement phare, un outil IA ou un éditeur de modèles pour les démonstrations hebdomadaires.
Commencez par le zoom
Si vous devez ajouter une seule chose à votre prochain enregistrement d'écran, faites en sorte que ce soit un zoom qui se termine une demi-seconde avant le clic. Cela corrige la plainte la plus courante concernant les vidéos de produits, « Je ne pouvais pas voir sur quoi vous cliquiez », et chaque autre graphisme de ce guide repose sur cette habitude de diriger l'œil du spectateur là où la narration pointe.
