Kortversjonen
- En animert gradientbakgrunn er en fargeovergang som beveger seg over tid, som regel ved å drive i posisjon, endre form, skifte nyanse eller la lyset puste.
- Rolige animerte gradienter beveger én eller to egenskaper sakte og bruker flere sekunder eller mer på en full syklus. Å bevege alt på en gang ser travelt ut.
- Farger som ligger nær hverandre på fargesirkelen animeres rent, mens motsatte farger kan passere gjennom grått når de blandes.
- Tekst over en animert gradient må være lesbar i hvert øyeblikk av loopen, også i de lyseste og mørkeste bildene.
- For sosiale medier og video eksporterer du animerte gradienter som sømløse looper i MP4, med et stillbilde til steder som ikke spiller av video.
På denne siden
En animert gradientbakgrunn er en fargeovergang som beveger seg: den driver over bildet, endrer form, skifter nyanse eller lyser opp og dempes, som regel i en loop bak ord eller et produkt. De beste ser ut som lys som beveger seg gjennom et materiale. De svake ser ut som en skjermsparer. Det som skiller dem, er ikke programvaren, men noen få valg om hva som beveger seg, hvor fort og i hvilke farger.
Denne guiden handler om designsiden, for video, innlegg i sosiale medier og skjermer. Bygger du en i kode til en nettside, se animerte gradienter i CSS og shader-gradienter.
Hva som kan bevege seg i en animert gradient
Hver animerte gradient er en kombinasjon av fem typer endring. De fleste gode bruker én, av og til to. Å bruke alle fem samtidig er den raskeste veien til en rastløs bakgrunn.
| Hva som beveger seg | Hva du ser | Følelse |
|---|---|---|
| Posisjon | Hele flaten glir eller driver | Rolig, romslig, filmatisk |
| Form | Fargefelt svulmer, folder seg eller flyter inn i hverandre | Organisk, flytende |
| Nyanse | Fargene heller én vei og tilbake, eller vandrer rundt sirkelen | Sesongpreget, lekent, energisk når det går fort |
| Lys | Lysstyrken puster inn og ut | Stille, luksuriøs |
| Korn og partikler | Fin tekstur skimrer eller driver over fargen | Taktil, filmatisk, atmosfærisk |
Hvor fort en animert gradient bør bevege seg
Tempoet avgjør det meste av stemningen. Langsom bevegelse virker eksklusiv og selvsikker, rask bevegelse virker presserende. For en bakgrunn bak ord bør en full endringssyklus som regel ta mange sekunder, ikke ett eller to. Kan du tydelig følge bevegelsen mens du leser overskriften, går det sannsynligvis for fort.
Bevegelsen bør også ease i stedet for å tikke av gårde i én fart. Endringer som starter og slutter mykt ser naturlige ut, konstant fart ser mekanisk ut. Easing forklarer hvorfor, med eksempler.
Farger som animeres godt
Animasjon viser deg hver eneste mellomfarge i en gradient, én etter én. En stillestående gradient kan skjule et kjedelig midtpunkt i et tynt bånd, mens en som beveger seg, blir hengende ved det. De tryggeste palettene er analoge: naboer på fargesirkelen, som indigo, fiolett og rosa, eller turkis, grønn og lime. Mellomfargene deres holder seg livlige.
Trenger du motsatte farger, kan du lede dem gjennom en overgangsfarge som i midtre eksempel, eller lese hvorfor gradienter blir grå i midten. Behold én farge som underlag som aldri endrer seg mye, som regel den mørkeste. Den forankrer bevegelsen og gir ordene et stabilt sted å ligge.
Slik holder du tekst lesbar over en bevegelig gradient
Tekst på en stillestående gradient trenger bare å være lesbar mot én bakgrunn. Over en animert gradient må den være lesbar mot hvert bilde i loopen. Den klassiske feilen er en overskrift som er helt tydelig i starten og forsvinner i to sekunder når et lyst fargefelt driver bak den.
Unngå
- Å sjekke kontrasten bare på første bilde
- Lyse fargefelt som driver gjennom ordene
- Å bevege teksten i tillegg til bakgrunnen
- Store nyanseskifter bak tekst i brødtekststørrelse
Gjør
- Skru deg gjennom loopen og sjekk de lyseste og mørkeste øyeblikkene
- Hold det roligste området av flaten bak ordene
- La ordene stå stille og fargen bevege seg
- Spar sterke fargeskifter til bakgrunner med korte overskrifter
Noen verktøy hjelper til her. I Gradiently vet Marken bak et design hvor ordene er, og det roligste området med best kontrast blir liggende bak dem mens den beveger seg. For de generelle prinsippene, se slik legger du tekst på en gradient.
Slik designer du en animert gradient, steg for steg
- 1
Design stillbildet
Velg underlaget, tre til fem farger og oppsettet av ordene. Det bør fungere som et stillbilde før det beveger seg.
- 2
Velg én ledende bevegelse
Drift, flyt, et nyanseskifte eller pustende lys. Tilpass den til merkevaren: rolige merkevarer driver, livlige kan flyte eller virvle.
- 3
Sett et langsomt tempo
Begynn tregere enn det føles naturlig, og øk farten bare hvis bevegelsen er vanskelig å legge merke til.
- 4
Få den til å loope
Det siste bildet må lede tilbake til det første. Sømløse looper tar for seg hvordan.
- 5
Sjekk hvert øyeblikk
Skru deg gjennom loopen og pause i de lyseste og mørkeste punktene for å sjekke ordene.
- 6
Eksporter for stedet den skal spilles
MP4 til sosiale medier og nettsider, GIF bare til e-post, og et PNG-stillbilde til alt annet. GIF mot MP4 forklarer valget.
En stående story er det naturlige hjemmet for en animert gradient: korte ord som står stille, med fargen i bevegelse bak.
Hvor animerte gradientbakgrunner fungerer best
- Stories og reels, der video er forventet. Hold ordene innenfor de sikre sonene. Se bakgrunner til Reels og TikTok.
- Feedinnlegg til kunngjøringer og tilbud, der bevegelse får innlegget til å skille seg ut.
- Hero-seksjoner på nettsider, som en kort video uten lyd eller en levende bakgrunn, med et stillbilde som reserve. Videobakgrunner på nettsider tar for seg detaljene.
- Scene- og butikkskjermer, der lange, langsomme looper spilles i timevis.
- Videointroer og -outroer, som en stille flate bak en tittel.
Bruker du Gradiently, kan hvert design eksporteres som en loop på 5 til 30 sekunder: velg en bevegelse som Drift, Flow, Breathe eller Swirl, et tempo, hvordan fargen oppfører seg og om partikler skal drive over den. Loopen lages slik at slutten møter starten.
Spørsmål folk stiller
Hva er en animert gradientbakgrunn?
En fargeovergang som beveger seg over tid: driver, flyter, skifter nyanse eller lar lyset puste, som regel som en loop bak ord, produkter eller video.
Hvor fort bør en animert gradient bevege seg?
Sakte, for de fleste bakgrunner. En full endringssyklus bør ta mange sekunder, og du bør ikke kunne følge bevegelsen behagelig mens du leser overskriften.
Hvilke farger er best for en animert gradient?
Nabonyanser, som indigo, fiolett og rosa, animeres mest rent. Motsatte farger trenger en overgangsfarge imellom, ellers passerer de gjennom grått.
Hvordan holder jeg tekst lesbar på en animert gradient?
Sjekk ordene i de lyseste og mørkeste øyeblikkene av loopen, hold det roligste området av flaten bak dem og la teksten stå stille.
Hvilket format bør jeg eksportere en animert gradient i?
MP4 til sosiale plattformer og nettsider. Bruk GIF bare der video ikke spilles av, som i e-post, og ha et PNG-stillbilde som reserve.
Skrevet av Gradiently
Teamet bak Gradiently, et designverktøy bygget rundt Marks: levende gradienter som gjør at alt du designer ser ut som ditt.
Se profilen vår
