In breve
- Un logo animato è il logo di un brand con l’aggiunta di un breve movimento, come una comparsa, una linea che si disegna da sola, parti che si assemblano o un colore che cambia.
- La maggior parte delle animazioni di logo per intro e outro funziona meglio con una durata di circa uno-tre secondi, terminando sull’esatto logo statico.
- Basta un’idea per animazione, e il movimento dovrebbe rispecchiare la personalità del brand nello stesso modo dei suoi colori e dei suoi caratteri.
- I siti possono animare i loghi con SVG e CSS o con file Lottie, mentre il video richiede MP4, le email la GIF e il montaggio un formato con trasparenza.
- Ogni logo animato ha bisogno di una versione statica, per le dimensioni piccole, per la stampa e per chi preferisce meno movimento.
In questa pagina
Un logo animato è il tuo logo con un solo movimento breve e mirato: appare, disegna le proprie linee, si assembla dalle sue parti, cambia colore o respira piano in un loop. I migliori sono brevi, di solito da uno a tre secondi per un’intro, e finiscono sempre sull’esatto logo che le persone già conoscono. Pensalo come il logo che arriva, non che si esibisce.
Cinque modi per animare un logo
Quasi ogni buona animazione di logo è una di cinque tecniche, a volte due combinate. Scegli quella che si adatta alla forma del tuo logo e al carattere del brand.
| Tecnica | Cosa succede | Adatta a |
|---|---|---|
| Comparsa | Il logo appare con una dissolvenza, una tendina o una maschera | Qualsiasi logo; la scelta più sicura |
| Tracciato | Le linee si disegnano da sole, poi si riempiono | Marchi a linea, monogrammi, firme |
| Assemblaggio | Le parti scorrono o si ingrandiscono fino al loro posto | Loghi fatti di forme distinte |
| Variazione | Un colore o un gradiente attraversa il logo | Loghi a gradiente e logotipi decisi |
| Loop discreto | Un respiro o un luccichio sottile e senza fine | Stati di caricamento, schermi da palco, dirette |
Le regole che tengono di buon gusto un’animazione di logo
L’animazione di un logo viene ripetuta molte volte: all’inizio di ogni video, a ogni caricamento di pagina, a ogni evento. Tutto ciò che è troppo ingegnoso stanca in fretta. È la sobrietà che permette di apprezzarla anche la centesima volta. I principi del motion design approfondisce il ragionamento.
Da evitare
- Animazioni più lunghe del messaggio che introducono
- Far ruotare, rimbalzare o esplodere il logo
- Finire su una posa che non è il vero logo
- Un movimento che contraddice il carattere del brand
- Una sola versione, senza alternativa statica
Da fare
- Da uno a tre secondi per intro e outro
- Un’idea, eseguita in modo pulito
- Finire sull’esatto logo statico e mantenerlo
- I brand calmi si muovono piano, quelli vivaci possono essere svelti
- Tenere un logo statico per le dimensioni piccole e la stampa
Abbina il movimento al brand nello stesso modo in cui abbini colori e caratteri. Il logo di uno studio legale può apparire in dissolvenza in un secondo con un’accelerazione morbida. Quello di un festival musicale può scattare al suo posto con un piccolo rimbalzo. La personalità del brand ti aiuta a dare un nome al carattere, e l’easing lo trasforma in curve.
Come creare in SVG l’animazione di un logo che si disegna
L’effetto tracciato usa un bel trucco dell’SVG. Un tratto può essere disegnato a trattini, e se un trattino è lungo quanto tutto il percorso, puoi farlo entrare in vista animando il suo scostamento. Impostare pathLength="1" sul percorso semplifica i calcoli: il percorso conta come lungo un’unità, qualunque sia la sua lunghezza reale.
<svg viewBox="0 0 120 120" width="120" height="120" role="img" aria-label="Northlight">
<path class="draw" d="M20 100 L20 20 L100 100 L100 20" pathLength="1"
fill="none" stroke="#1e1b4b" stroke-width="10"
stroke-linecap="round" stroke-linejoin="round" />
</svg>.draw {
stroke-dasharray: 1;
stroke-dashoffset: 1; /* hidden: the dash starts one full length away */
animation: draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; } /* drawn */
}
@media (prefers-reduced-motion: reduce) {
.draw { animation: none; stroke-dashoffset: 0; }
}Animare un logo a gradiente
I loghi a gradiente hanno un movimento già incorporato: lascia viaggiare il colore. Un lento scorrimento del gradiente dentro un logotipo o un’icona sembra luce che si muove sulla superficie, e tiene la forma perfettamente ferma, il che favorisce la leggibilità. Il trucco per un loop pulito è un gradiente che finisce sul colore da cui parte, così la ripetizione non ha giunture.
linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%).wordmark {
background: linear-gradient(90deg, #6d28d9 0%, #db2777 50%, #6d28d9 100%);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
to { background-position: 200% 0; }
}
@media (prefers-reduced-motion: reduce) {
.wordmark { animation: none; }
}Il testo a gradiente ha le sue regole di leggibilità; vedi testo a gradiente in CSS. E assicurati che il logo esista anche in un solo colore piatto, come spiega i loghi a gradiente.
Quanto deve durare un logo animato
- Intro e outro video: circa da uno a tre secondi, poi tieni fermo il logo finito per un momento.
- Intestazione del sito: una sola volta, in fretta, alla prima visita; mai a ogni cambio di pagina.
- Stati di caricamento: un loop discreto e lento che non sembri impaziente.
- Schermi da palco e dirette: un loop molto lento, perché può restare a schermo per ore.
L’ultimo fotogramma di un’intro dovrebbe essere il logo esattamente come appare ovunque, sullo sfondo abituale del brand.
In quale formato esportare un logo animato
| Dove viene riprodotto | Formato | Note |
|---|---|---|
| Sito web o app | SVG con CSS, o un file Lottie | Nitido a ogni dimensione, file minuscoli, può rispettare la preferenza per meno movimento |
| Video social | MP4 | Posizionato su uno sfondo; non serve la trasparenza |
| Montaggio video | Un formato con trasparenza, come ProRes 4444 | Così chi monta può metterlo sopra qualsiasi filmato |
| Firma email o newsletter | GIF | Tienila breve e leggera; il primo fotogramma dovrebbe essere il logo completo |
| Presentazioni | MP4, o l’animazione dello strumento stesso | Prova sul computer che userai per presentare |
Per approfondire loop e tipi di file, vedi GIF o MP4. E qualunque cosa esporti, abbinala a uno sfondo adatto: un logo animato su un campo fermo e calmo si legge meglio che su un filmato movimentato. Mettere un logo su un gradiente tratta contrasto e posizione.
Le domande più frequenti
Quanto deve durare un logo animato?
Per intro e outro video, circa da uno a tre secondi, finendo sul logo statico e tenendolo fermo per un breve momento. I loop discreti per gli schermi possono essere più lunghi e più lenti.
Qual è il modo più facile per animare un logo?
Una semplice comparsa: una dissolvenza, una tendina o una maschera che scopre il logo in circa un secondo. Funziona con qualsiasi logo ed è difficile sbagliare.
In che formato deve essere un logo animato?
SVG con CSS o Lottie per siti e app, MP4 per i video social, un formato con trasparenza come ProRes 4444 per il montaggio e la GIF per le email.
Come faccio a far disegnare un logo da solo?
In SVG, imposta pathLength a 1 sul percorso, dagli uno stroke-dasharray di 1 e anima lo stroke-dashoffset da 1 a 0.
Mi serve ancora un logo statico?
Sì. Le dimensioni piccole, la stampa, le favicon e chi preferisce meno movimento hanno tutti bisogno della versione statica, e ogni animazione deve finire su di essa.
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
