De korte versie
- Een geanimeerde kleurverloopachtergrond is een kleurovergang die in de tijd beweegt, meestal door van positie te verschuiven, van vorm te veranderen, van tint te wisselen of licht te laten ademen.
- Rustige geanimeerde kleurverlopen bewegen één of twee eigenschappen langzaam, met enkele seconden of meer voor een volledige cyclus; alles tegelijk laten bewegen oogt druk.
- Kleuren die op het kleurenwiel dicht bij elkaar liggen animeren soepel, terwijl tegenovergestelde kleuren tijdens het mengen door grijs kunnen gaan.
- Tekst over een geanimeerd kleurverloop moet op elk moment van de loop leesbaar zijn, ook in de helderste en donkerste beelden.
- Exporteer geanimeerde kleurverlopen voor social en video als naadloze loops in MP4, met een stilstaand beeld voor plekken die geen video afspelen.
Op deze pagina
Een geanimeerde kleurverloopachtergrond is een overgang van kleuren die beweegt: hij drijft door het beeld, verandert van vorm, wisselt van tint of wordt helderder en dimmer, meestal in een loop achter woorden of een product. De beste lijken op licht dat door een materiaal beweegt. De zwakke lijken op een screensaver. Wat ze scheidt is niet software maar een paar keuzes over wat beweegt, hoe snel en in welke kleuren.
Deze gids gaat over de ontwerpkant, voor video, socialposts en schermen. Bouw je er een in code voor een website, zie dan geanimeerde kleurverlopen in CSS en shader-kleurverlopen.
Wat kan er bewegen in een geanimeerd kleurverloop
Elk geanimeerd kleurverloop is een combinatie van vijf soorten verandering. De meeste goede gebruiken er één, soms twee. Alle vijf tegelijk gebruiken is de snelste manier om een achtergrond onrustig te maken.
| Wat beweegt | Wat je ziet | Voelt |
|---|---|---|
| Positie | Het hele vlak glijdt of drijft | Rustig, ruim, filmisch |
| Vorm | Plassen kleur zwellen, plooien of vloeien in elkaar over | Organisch, vloeibaar |
| Tint | Kleuren leunen de ene kant op en terug, of reizen rond het wiel | Seizoensgebonden, speels, energiek als het snel gaat |
| Licht | Helderheid ademt in en uit | Stil, luxueus |
| Korrel en deeltjes | Fijne textuur schittert of drijft over de kleur | Tastbaar, filmisch, sfeervol |
Hoe snel een geanimeerd kleurverloop moet bewegen
Snelheid bepaalt het grootste deel van de sfeer. Langzame beweging leest als duur en zelfverzekerd; snelle beweging leest als dringend. Voor een achtergrond achter woorden hoort een volledige cyclus van verandering meestal vele seconden te duren, niet één of twee. Als je de beweging duidelijk kunt volgen terwijl je de kop leest, is het waarschijnlijk te snel.
Beweging moet ook geleidelijk aan- en uitlopen in plaats van op één snelheid door te tikken. Veranderingen die zacht beginnen en eindigen zien er natuurlijk uit; constante snelheid ziet er mechanisch uit. Easing legt uit waarom, met voorbeelden.
Kleuren die goed animeren
Animatie laat je elke tussenkleur van een kleurverloop zien, de een na de ander. Een stilstaand kleurverloop kan een doffe middenkleur verstoppen in een smalle band; een bewegend blijft erbij hangen. De veiligste paletten zijn analoog: buren op het kleurenwiel, zoals indigo, violet en roze, of petrol, groen en limoen. Hun tussenkleuren blijven levendig.
Heb je tegenovergestelde kleuren nodig, leid ze dan via een overbruggende kleur, zoals in het middelste voorbeeld, of lees waarom kleurverlopen in het midden grijs worden. Houd één kleur als ondergrond die nauwelijks verandert, meestal de donkerste. Die verankert de beweging en geeft de woorden een stabiele plek.
Tekst leesbaar houden over een bewegend kleurverloop
Tekst op een stilstaand kleurverloop hoeft maar tegen één achtergrond te lezen. Over een geanimeerd kleurverloop moet hij tegen elk beeld van de loop lezen. De klassieke fout is een kop die aan het begin perfect helder is en twee seconden verdwijnt als er een heldere plas kleur achter drijft.
Vermijd
- Het contrast alleen op het eerste beeld controleren
- Heldere plassen kleur die door de woorden drijven
- De tekst net als de achtergrond laten bewegen
- Grote tintcycli achter tekst op leesformaat
Doe
- Loop door de loop heen en controleer de helderste en donkerste momenten
- Houd het rustigste deel van het vlak achter de woorden
- Houd de woorden stil en laat de kleur bewegen
- Bewaar sterke kleurwisselingen voor achtergronden met korte koppen
Sommige tools helpen hierbij. In Gradiently weet de Mark achter een ontwerp waar de woorden staan, en blijft zijn rustigste gebied met het beste contrast achter ze terwijl hij beweegt. Voor de algemene principes, zie zo zet je tekst op een kleurverloop.
Zo ontwerp je een geanimeerd kleurverloop, stap voor stap
- 1
Ontwerp het stilstaande beeld
Kies de ondergrond, drie tot vijf kleuren en de opmaak van de woorden. Het moet als stilstaand beeld werken voordat het beweegt.
- 2
Kies één hoofdbeweging
Drift, stroming, een tintverschuiving of ademend licht. Stem het af op het merk: rustige merken drijven, levendige merken kunnen stromen of wervelen.
- 3
Stel een laag tempo in
Begin langzamer dan natuurlijk voelt en versnel alleen als de beweging moeilijk op te merken is.
- 4
Maak er een loop van
Het laatste beeld moet teruglopen in het eerste. Naadloze loops legt uit hoe.
- 5
Controleer elk moment
Loop door de loop heen en pauzeer op de helderste en donkerste punten om de woorden te controleren.
- 6
Exporteer voor de plek waar het wordt afgespeeld
MP4 voor social en websites, een GIF alleen voor e-mail en een stilstaande PNG voor al het andere. GIF versus MP4 legt de keuze uit.
Een verticale story is het natuurlijke thuis van een geanimeerd kleurverloop: korte woorden die stilstaan, kleur die erachter beweegt.
Waar geanimeerde kleurverloopachtergronden het best werken
- Stories en reels, waar video wordt verwacht. Houd woorden binnen de veilige zones; zie achtergronden voor Reels en TikTok.
- Feedposts voor aankondigingen en aanbiedingen, waar beweging de post onderscheidt.
- Website-heroes, als korte stille video of als live achtergrond, met een stilstaande terugval. Videoachtergronden op websites behandelt de details.
- Podium- en winkelschermen, waar lange, langzame loops uren spelen.
- Video-intro’s en -outro’s, als rustig vlak achter een titel.
Als je Gradiently gebruikt, kan elk ontwerp worden geëxporteerd als loop van 5 tot 30 seconden: kies een beweging zoals Drift, Stroom, Adem of Draaikolk, een tempo, hoe de kleur zich gedraagt en of er deeltjes overheen drijven. De loop wordt zo gemaakt dat het einde aansluit op het begin.
Vragen die mensen stellen
Wat is een geanimeerde kleurverloopachtergrond?
Het is een kleurovergang die in de tijd beweegt, door te drijven, te stromen, van tint te wisselen of licht te laten ademen, meestal als loop achter woorden, producten of video.
Hoe snel moet een geanimeerd kleurverloop bewegen?
Voor de meeste achtergronden langzaam. Een volledige cyclus van verandering hoort vele seconden te duren, en je moet de beweging niet comfortabel kunnen volgen terwijl je de kop leest.
Welke kleuren zijn het best voor een geanimeerd kleurverloop?
Naburige tinten, zoals indigo, violet en roze, animeren het soepelst. Tegenovergestelde kleuren hebben een overbruggende kleur ertussen nodig, anders gaan ze door grijs.
Hoe houd ik tekst leesbaar op een geanimeerd kleurverloop?
Controleer de woorden op de helderste en donkerste momenten van de loop, houd het rustigste deel van het vlak erachter en houd de tekst stil.
In welk formaat exporteer ik een geanimeerd kleurverloop?
MP4 voor socialplatforms en websites. Gebruik GIF alleen waar video niet afspeelt, zoals in e-mail, en houd een stilstaande PNG als terugval.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
