In breve
- Uno sfondo a gradiente animato è una sfumatura di colori che si muove nel tempo, di solito spostando la posizione, cambiando forma, variando la tonalità o facendo respirare la luce.
- I gradienti animati calmi muovono una o due proprietà lentamente, con un ciclo completo di diversi secondi o più; muovere tutto insieme dà un effetto confuso.
- I colori vicini sulla ruota dei colori si animano in modo pulito, mentre i colori opposti possono passare per il grigio mentre si fondono.
- Il testo su un gradiente animato deve essere leggibile in ogni momento del loop, compresi i fotogrammi più chiari e più scuri.
- Per social e video, esporta i gradienti animati come loop perfetti in MP4, con un’immagine fissa per i posti che non riproducono video.
In questa pagina
Uno sfondo a gradiente animato è una sfumatura di colori che si muove: scorre nell’inquadratura, cambia forma, varia la tonalità oppure si illumina e si attenua, di solito in loop dietro a delle parole o a un prodotto. I migliori sembrano luce che attraversa un materiale. I più deboli sembrano uno screensaver. Ciò che li separa non è il software ma poche scelte su cosa si muove, a che velocità e in quali colori.
Questa guida parla del lato di design, per video, post social e schermi. Se ne stai costruendo uno in codice per un sito, vedi gradienti animati in CSS e gradienti shader.
Cosa può muoversi in un gradiente animato
Ogni gradiente animato è una combinazione di cinque tipi di cambiamento. La maggior parte di quelli riusciti ne usa uno, a volte due. Usarli tutti e cinque insieme è il modo più rapido per rendere uno sfondo agitato.
| Cosa si muove | Cosa vedi | Sensazione |
|---|---|---|
| Posizione | L’intero campo scivola o va alla deriva | Calmo, spazioso, cinematografico |
| Forma | Macchie di colore si gonfiano, si piegano o si fondono l’una nell’altra | Organico, liquido |
| Tonalità | I colori si inclinano da una parte e tornano, o percorrono la ruota | Stagionale, giocoso, energico se veloce |
| Luce | La luminosità respira, sale e scende | Quieto, lussuoso |
| Grana e particelle | Una texture sottile luccica o scivola sopra il colore | Tattile, da pellicola, d’atmosfera |
Quanto veloce deve muoversi un gradiente animato
La velocità decide gran parte dell’atmosfera. Il movimento lento sembra costoso e sicuro; quello veloce sembra urgente. Per uno sfondo dietro alle parole, un ciclo completo di cambiamento di solito deve durare molti secondi, non uno o due. Se riesci a seguire chiaramente il movimento mentre leggi il titolo, probabilmente è troppo veloce.
Il movimento dovrebbe anche avere un’accelerazione morbida, invece di procedere a velocità costante. I cambiamenti che partono e finiscono con dolcezza sembrano naturali; la velocità costante sembra meccanica. L’easing spiega perché, con esempi.
I colori che si animano bene
L’animazione ti mostra uno dopo l’altro tutti i colori intermedi di un gradiente. Un gradiente fermo può nascondere un punto medio spento in una banda sottile; uno in movimento ci indugia. Le palette più sicure sono analoghe: vicini sulla ruota dei colori, come indaco, viola e rosa, oppure verde acqua, verde e lime. I loro colori intermedi restano vividi.
Se ti servono colori opposti, fai passare la sfumatura per un colore ponte, come nell’esempio centrale, oppure leggi perché i gradienti diventano grigi al centro. Tieni un colore come base che non cambia molto, di solito il più scuro. Ancora il movimento e dà alle parole un posto stabile dove stare.
Tenere leggibile il testo su un gradiente in movimento
Il testo su un gradiente fermo deve leggersi contro un solo sfondo. Su un gradiente animato deve leggersi contro ogni fotogramma del loop. Il fallimento classico è un titolo perfettamente chiaro all’inizio che sparisce per due secondi quando una macchia luminosa di colore gli passa dietro.
Da evitare
- Controllare il contrasto solo sul primo fotogramma
- Macchie luminose di colore che attraversano le parole
- Muovere il testo oltre allo sfondo
- Grandi cicli di tonalità dietro testo di corpo normale
Da fare
- Scorri il loop e controlla i momenti più chiari e più scuri
- Tieni la parte più calma del campo dietro alle parole
- Tieni ferme le parole e lascia muovere il colore
- Riserva i forti cambi di colore agli sfondi con titoli brevi
Alcuni strumenti aiutano in questo. In Gradiently il Mark dietro a un design sa dove sono le parole, e la sua regione più calma e a miglior contrasto resta dietro di esse mentre si muove. Per i principi generali, vedi come mettere il testo su un gradiente.
Come progettare un gradiente animato, passo per passo
- 1
Disegna il fotogramma fisso
Scegli la base, da tre a cinque colori e la disposizione delle parole. Deve funzionare come immagine ferma prima di muoversi.
- 2
Scegli un movimento principale
Deriva, flusso, un cambio di tonalità o una luce che respira. Abbinalo al brand: i brand calmi vanno alla deriva, quelli vivaci possono fluire o vorticare.
- 3
Imposta un ritmo lento
Parti più lento di quanto sembri naturale e accelera solo se il movimento è difficile da notare.
- 4
Fallo ripetere in loop
L’ultimo fotogramma deve ricondurre al primo. I loop perfetti spiega come.
- 5
Controlla ogni momento
Scorri il loop e fermati nei punti più chiari e più scuri per controllare le parole.
- 6
Esporta per il luogo in cui verrà riprodotto
MP4 per social e siti, una GIF solo per le email e un PNG fisso per tutto il resto. GIF o MP4 spiega la scelta.
Una storia verticale è la casa naturale di un gradiente animato: poche parole ferme, il colore che si muove dietro.
Dove funzionano meglio gli sfondi a gradiente animati
- Storie e reel, dove il video è previsto. Tieni le parole dentro le aree sicure; vedi sfondi per Reel e TikTok.
- Post del feed per annunci e offerte, dove il movimento fa distinguere il post.
- Hero di siti web, come breve video senza audio o come sfondo dal vivo, con un’immagine fissa di riserva. Sfondi video nei siti web ha i dettagli.
- Schermi da palco e da negozio, dove loop lunghi e lenti girano per ore.
- Intro e outro video, come campo quieto dietro a un titolo.
Se usi Gradiently, ogni design può essere esportato come loop da 5 a 30 secondi: scegli un movimento come Deriva, Flusso, Respiro o Vortice, un ritmo, come si comporta il colore e se delle particelle scivolano sopra. Il loop è costruito perché la sua fine incontri il suo inizio.
Le domande più frequenti
Cos’è uno sfondo a gradiente animato?
È una sfumatura di colori che si muove nel tempo, andando alla deriva, fluendo, variando la tonalità o facendo respirare la luce, di solito in loop dietro a parole, prodotti o video.
Quanto veloce deve muoversi un gradiente animato?
Lentamente, per la maggior parte degli sfondi. Un ciclo completo di cambiamento deve durare molti secondi, e non dovresti riuscire a seguire il movimento comodamente mentre leggi il titolo.
Quali colori sono migliori per un gradiente animato?
Le tonalità vicine, come indaco, viola e rosa, si animano nel modo più pulito. I colori opposti hanno bisogno di un colore ponte in mezzo, altrimenti passano per il grigio.
Come tengo leggibile il testo su un gradiente animato?
Controlla le parole nei momenti più chiari e più scuri del loop, tieni la parte più calma del campo dietro di esse e lascia fermo il testo.
In quale formato esporto un gradiente animato?
MP4 per piattaforme social e siti web. Usa la GIF solo dove il video non parte, come nelle email, e tieni un PNG fisso di riserva.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
