L’essentiel en bref
- Un arrière-plan dégradé animé est un fondu de couleurs qui bouge dans le temps, en général par dérive de position, changement de forme, glissement de teinte ou lumière qui respire.
- Les dégradés animés calmes ne font bouger qu’une ou deux propriétés, lentement, avec plusieurs secondes ou plus pour un cycle complet ; tout bouger à la fois paraît agité.
- Les couleurs voisines sur le cercle chromatique s’animent proprement, alors que des couleurs opposées peuvent passer par le gris en se fondant.
- Un texte sur un dégradé animé doit rester lisible à chaque instant de la boucle, y compris aux images les plus claires et les plus sombres.
- Pour les réseaux et la vidéo, exportez les dégradés animés en boucles parfaites au format MP4, avec une image fixe pour les endroits qui ne lisent pas la vidéo.
Sur cette page
Un arrière-plan dégradé animé est un fondu de couleurs qui bouge : il dérive dans le cadre, change de forme, glisse de teinte ou s’éclaire et s’assombrit, en général en boucle derrière des mots ou un produit. Les meilleurs ressemblent à de la lumière qui traverse une matière. Les plus faibles ressemblent à un économiseur d’écran. Ce qui les sépare n’est pas le logiciel, mais quelques choix sur ce qui bouge, à quelle vitesse et dans quelles couleurs.
Ce guide traite du côté design, pour la vidéo, les posts et les écrans. Si vous en construisez un en code pour un site web, voyez les dégradés animés en CSS et les dégradés shader.
Ce qui peut bouger dans un dégradé animé
Tout dégradé animé est une combinaison de cinq types de changement. La plupart des bons en utilisent un, parfois deux. Tout employer à la fois est le moyen le plus rapide de rendre un fond agité.
| Ce qui bouge | Ce que l’on voit | Effet |
|---|---|---|
| La position | Tout le champ glisse ou dérive | Calme, spacieux, cinématographique |
| La forme | Des nappes de couleur gonflent, se plient ou se fondent l’une dans l’autre | Organique, liquide |
| La teinte | Les couleurs penchent d’un côté puis reviennent, ou font le tour du cercle | Saisonnier, ludique, énergique quand c’est rapide |
| La lumière | La luminosité respire | Discret, luxueux |
| Le grain et les particules | Une texture fine scintille ou dérive sur la couleur | Tactile, cinématographique, atmosphérique |
À quelle vitesse un dégradé animé doit bouger
La vitesse décide de l’essentiel de l’ambiance. Un mouvement lent paraît haut de gamme et assuré ; un mouvement rapide paraît urgent. Pour un fond derrière des mots, un cycle complet de changement doit en général durer plusieurs secondes, pas une ou deux. Si vous suivez nettement le mouvement en lisant le titre, il est probablement trop rapide.
Le mouvement doit aussi s’adoucir plutôt que d’avancer à vitesse constante. Des changements qui démarrent et finissent en douceur paraissent naturels ; une vitesse constante paraît mécanique. L’accélération et décélération explique pourquoi, avec des exemples.
Les couleurs qui s’animent bien
L’animation vous montre chaque couleur intermédiaire d’un dégradé, l’une après l’autre. Un dégradé fixe peut cacher un point médian terne dans une bande étroite ; un dégradé animé s’y attarde. Les palettes les plus sûres sont analogues : des voisines sur le cercle chromatique, comme indigo, violet et rose, ou turquoise, vert et lime. Leurs couleurs intermédiaires restent vives.
Si vous avez besoin de couleurs opposées, faites-les passer par une couleur de liaison, comme dans l’exemple du milieu, ou lisez pourquoi les dégradés grisent au milieu. Gardez une couleur comme fond qui ne change presque pas, en général la plus sombre. Elle ancre le mouvement et donne aux mots une place stable.
Garder le texte lisible sur un dégradé en mouvement
Un texte sur un dégradé fixe n’a qu’à se lire sur un seul arrière-plan. Sur un dégradé animé, il doit se lire sur chaque image de la boucle. L’échec classique est un titre parfaitement clair au début qui disparaît pendant deux secondes quand une nappe de couleur vive dérive derrière lui.
À éviter
- Vérifier le contraste sur la première image seulement
- Des nappes de couleur vive qui dérivent à travers les mots
- Déplacer le texte en même temps que l’arrière-plan
- De grands cycles de teinte derrière un texte de taille courante
À faire
- Parcourir la boucle et vérifier les moments les plus clairs et les plus sombres
- Garder la partie la plus calme du champ derrière les mots
- Garder les mots immobiles et laisser la couleur bouger
- Réserver les forts changements de couleur aux fonds avec des titres courts
Certains outils aident ici. Dans Gradiently, le Mark derrière un design sait où sont les mots, et sa zone la plus calme et la mieux contrastée reste derrière eux pendant qu’il bouge. Pour les principes généraux, voyez comment poser du texte sur un dégradé.
Comment concevoir un dégradé animé, étape par étape
- 1
Concevez l’image fixe
Choisissez le fond, trois à cinq couleurs et la disposition des mots. Elle doit fonctionner en image fixe avant de bouger.
- 2
Choisissez un mouvement principal
Dérive, flux, glissement de teinte ou lumière qui respire. Accordez-le à la marque : les marques calmes dérivent, les marques vives peuvent fluer ou tourbillonner.
- 3
Fixez un rythme lent
Partez plus lentement que ce qui paraît naturel et n’accélérez que si le mouvement est difficile à remarquer.
- 4
Faites-en une boucle
La dernière image doit ramener à la première. Les boucles parfaites expliquent comment.
- 5
Vérifiez chaque instant
Parcourez la boucle et faites une pause aux points les plus clairs et les plus sombres pour vérifier les mots.
- 6
Exportez pour l’endroit où il sera lu
MP4 pour les réseaux et les sites, GIF seulement pour l’e-mail, et une image PNG fixe pour tout le reste. GIF ou MP4 explique le choix.
Une story verticale est le foyer naturel d’un dégradé animé : quelques mots tenus immobiles, la couleur qui bouge derrière.
Où les arrière-plans dégradés animés fonctionnent le mieux
- Stories et Reels, où la vidéo est attendue. Gardez les mots dans les zones de sécurité ; voyez les arrière-plans pour Reels et TikTok.
- Posts du fil pour des annonces et des offres, où le mouvement distingue le post.
- Bandeaux de sites web, en courte vidéo muette ou en arrière-plan animé, avec une image fixe de secours. Les arrière-plans vidéo sur les sites web détaillent le sujet.
- Écrans de scène et de boutique, où de longues boucles lentes tournent pendant des heures.
- Intros et outros vidéo, comme champ discret derrière un titre.
Avec Gradiently, chaque design peut être exporté en boucle de 5 à 30 secondes : choisissez un mouvement comme Dérive, Flux, Respiration ou Tourbillon, un rythme, le comportement de la couleur et si des particules dérivent dessus. La boucle est faite pour que sa fin rejoigne son début.
Les questions qu’on nous pose
Qu’est-ce qu’un arrière-plan dégradé animé ?
Un fondu de couleurs qui bouge dans le temps, en dérivant, en fluant, en changeant de teinte ou en faisant respirer la lumière, en général en boucle derrière des mots, des produits ou de la vidéo.
À quelle vitesse un dégradé animé doit-il bouger ?
Lentement, pour la plupart des arrière-plans. Un cycle complet de changement doit durer plusieurs secondes, et vous ne devriez pas pouvoir suivre confortablement le mouvement en lisant le titre.
Quelles couleurs conviennent le mieux à un dégradé animé ?
Les teintes voisines, comme indigo, violet et rose, s’animent le plus proprement. Les couleurs opposées ont besoin d’une couleur de liaison, sinon elles passent par le gris.
Comment garder un texte lisible sur un dégradé animé ?
Vérifiez les mots aux moments les plus clairs et les plus sombres de la boucle, gardez la partie la plus calme du champ derrière eux et gardez le texte immobile.
Dans quel format exporter un dégradé animé ?
MP4 pour les réseaux sociaux et les sites web. N’utilisez le GIF que là où la vidéo ne se lit pas, comme l’e-mail, et gardez un PNG fixe en secours.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
