Kort fortalt
- En animeret gradientbaggrund er en farveovergang, der bevæger sig over tid, som regel ved at glide i position, skifte form, ændre nuance eller lade lyset åbne og lukke sig som et åndedrag.
- Rolige animerede gradienter bevæger en eller to egenskaber langsomt og bruger flere sekunder eller mere på en hel cyklus; bevæger alt sig på én gang, virker det uroligt.
- Farver, der ligger tæt på hinanden på farvehjulet, animerer rent, mens modsatte farver kan passere gennem gråt, når de blandes.
- Tekst over en animeret gradient skal kunne læses på ethvert tidspunkt i løkken, også på de lyseste og mørkeste billeder.
- Til sociale medier og video skal du eksportere animerede gradienter som sømløse løkker i MP4, med et stillbillede til steder, der ikke afspiller video.
På denne side
En animeret gradientbaggrund er en farveovergang, der bevæger sig: den glider hen over billedet, skifter form, ændrer nuance eller bliver lysere og mørkere, som regel i en løkke bag ord eller et produkt. De bedste ligner lys, der bevæger sig gennem et materiale. De svage ligner en pauseskærm. Forskellen ligger ikke i softwaren, men i nogle få valg om, hvad der bevæger sig, hvor hurtigt og i hvilke farver.
Denne guide handler om designsiden, til video, opslag på sociale medier og skærme. Bygger du en i kode til et website, så se animerede gradienter i CSS og shader-gradienter.
Hvad kan bevæge sig i en animeret gradient
Enhver animeret gradient er en kombination af fem slags forandring. De fleste gode bruger én, somme tider to. At bruge alle fem på én gang er den hurtigste vej til en rastløs baggrund.
| Hvad bevæger sig | Hvad du ser | Føles |
|---|---|---|
| Position | Hele feltet glider eller driver | Roligt, rummeligt, filmisk |
| Form | Farvebassiner svulmer, folder sig eller flyder ind i hinanden | Organisk, flydende |
| Nuance | Farverne læner sig den ene vej og tilbage, eller vandrer rundt på hjulet | Sæsonpræget, legende, energisk når det går hurtigt |
| Lys | Lysstyrken åndes ind og ud | Stille, luksuriøst |
| Korn og partikler | Fin tekstur skimrer eller driver over farven | Taktilt, filmisk, stemningsfuldt |
Hvor hurtigt en animeret gradient skal bevæge sig
Tempoet afgør det meste af stemningen. Langsom bevægelse virker eksklusiv og selvsikker; hurtig bevægelse virker presserende. Til en baggrund bag ord bør en hel cyklus af forandring som regel tage mange sekunder, ikke et eller to. Hvis du tydeligt kan følge bevægelsen, mens du læser overskriften, er den sandsynligvis for hurtig.
Bevægelsen bør også glide ind og ud i stedet for at tikke afsted i ét tempo. Forandringer, der starter og slutter blidt, ser naturlige ud; konstant fart ser mekanisk ud. Easing forklarer hvorfor, med eksempler.
Farver, der animerer godt
Animation viser dig hver eneste mellemfarve i en gradient, den ene efter den anden. En stillestående gradient kan skjule et mat midtpunkt i et tyndt bånd; en bevægelig dvæler ved det. De sikreste paletter er analoge: naboer på farvehjulet, som indigo, violet og pink, eller turkis, grøn og lime. Deres mellemfarver forbliver levende.
Skal du bruge modsatte farver, så led dem gennem en brofarve, som i det midterste eksempel, eller læs hvorfor gradienter bliver grå i midten. Behold én farve som bund, der aldrig ændrer sig meget, som regel den mørkeste. Den forankrer bevægelsen og giver ordene et stabilt sted at sidde.
Sådan holder du tekst læselig over en bevægelig gradient
Tekst på en stillestående gradient skal kun kunne læses mod én baggrund. Over en animeret gradient skal den kunne læses mod hvert billede i løkken. Den klassiske fejl er en overskrift, der er helt tydelig i starten og forsvinder i to sekunder, når en lys farvepøl driver ind bag den.
Undgå
- Kun at tjekke kontrasten på det første billede
- Lyse farvebassiner, der driver gennem ordene
- At bevæge teksten sammen med baggrunden
- Store nuanceskift bag tekst i brødtekststørrelse
Gør
- Skrub gennem løkken, og tjek de lyseste og mørkeste øjeblikke
- Hold den roligste del af feltet bag ordene
- Lad ordene stå stille, og lad farven bevæge sig
- Gem de kraftige farveskift til baggrunde med korte overskrifter
Nogle værktøjer hjælper her. I Gradiently ved Mark bag et design, hvor ordene er, og dens roligste område med bedst kontrast bliver bag dem, mens den bevæger sig. De generelle principper finder du i sådan lægger du tekst på en gradient.
Sådan designer du en animeret gradient, trin for trin
- 1
Design stillbilledet
Vælg bunden, tre til fem farver og opbygningen af ordene. Det skal fungere som stillbillede, før det bevæger sig.
- 2
Vælg én ledende bevægelse
Drift, flow, et nuanceskift eller åndende lys. Tilpas den til brandet: rolige brands driver, livlige brands kan flyde eller hvirvle.
- 3
Sæt et langsomt tempo
Start langsommere, end det føles naturligt, og sæt kun farten op, hvis bevægelsen er svær at lægge mærke til.
- 4
Få den til at løbe rundt
Det sidste billede skal føre tilbage til det første. Sømløse løkker viser hvordan.
- 5
Tjek hvert øjeblik
Skrub gennem løkken, og hold pause ved de lyseste og mørkeste punkter for at tjekke ordene.
- 6
Eksportér til det sted, den skal afspilles
MP4 til sociale medier og websites, en GIF kun til e-mail og et PNG-stillbillede til alt andet. GIF eller MP4 forklarer valget.
En lodret story er det naturlige hjem for en animeret gradient: korte ord holdt stille, farve i bevægelse bagved.
Hvor animerede gradientbaggrunde virker bedst
- Stories og reels, hvor video er forventet. Hold ordene inden for de sikre zoner; se baggrunde til Reels og TikTok.
- Opslag i feedet med meddelelser og tilbud, hvor bevægelse får opslaget til at skille sig ud.
- Websitets hero, som en kort lydløs video eller en levende baggrund, med et stillbillede som reserve. Videobaggrunde på websites går i detaljer.
- Scene- og butiksskærme, hvor lange, langsomme løkker kører i timevis.
- Videoens intro og outro, som et roligt felt bag en titel.
Bruger du Gradiently, kan hvert design eksporteres som en løkke på 5 til 30 sekunder: vælg en bevægelse som Drift, Flow, Åndedræt eller Hvirvel, et tempo, hvordan farven opfører sig, og om partikler skal drive hen over den. Løkken laves, så dens slutning møder dens begyndelse.
Spørgsmål, folk stiller
Hvad er en animeret gradientbaggrund?
Det er en farveovergang, der bevæger sig over tid, driver, flyder, skifter nuance eller åndes, som regel som en løkke bag ord, produkter eller video.
Hvor hurtigt skal en animeret gradient bevæge sig?
Langsomt, til de fleste baggrunde. En hel cyklus af forandring bør tage mange sekunder, og du bør ikke kunne følge bevægelsen behageligt, mens du læser overskriften.
Hvilke farver er bedst til en animeret gradient?
Nabonuancer, som indigo, violet og pink, animerer mest rent. Modsatte farver har brug for en brofarve imellem sig, ellers passerer de gennem gråt.
Hvordan holder jeg tekst læselig på en animeret gradient?
Tjek ordene i løkkens lyseste og mørkeste øjeblikke, hold feltets roligste del bag dem, og lad teksten stå stille.
Hvilket format skal jeg eksportere en animeret gradient i?
MP4 til sociale platforme og websites. Brug kun GIF, hvor video ikke afspilles, som i e-mail, og behold et PNG-stillbillede som reserve.
Skrevet af Gradiently
Holdet bag Gradiently, et designværktøj bygget om Marks: levende gradienter, der får alt, du designer, til at ligne dig.
Se vores profil
