Il momento in cui un nuovo logo viene approvato su sfondo bianco è il peggior momento per iniziare a animarlo. Tutto ciò che andrà storto sul video — un lettering che collassa a 98 pixel, un contorno costruito per la stampa, aree trasparenti che diventano box grigi in un'esportazione compressa — è invisibile nel file che il team di design ha appena approvato.
Quindi il lavoro procede in un ordine specifico. Sei controlli, tutti economici, tutti fatti prima che esista un singolo keyframe. Eseguli in una seduta e l'animazione è un lavoro di venti minuti. Saltali e l'animazione è un ridisegno. Se non hai mai animato un marchio, la meccanica è trattata in come animare un logo; questo pezzo riguarda tutto ciò che deve essere vero prima di quello.
Un logo video non è un file di logo
La prima correzione mentale è che un logo video non è un logo diverso. È lo stesso marchio, esistente in un insieme di condizioni molto più dure, e questo cambia quali decisioni sono portanti.
Un logo stampato viene visto una volta, a una dimensione comoda, su una superficie che non lo ricompone. Un logo video viene visto in un avatar da 98 pixel, a distanza di braccio, dopo una codifica lossy che ha già scartato dettagli fini, a volte con una barra didascalia sopra il terzo inferiore dell'inquadratura. Nulla di tutto ciò è una critica al design. È semplicemente una condizione di visualizzazione diversa, e gli asset che la sopravvivono sono costruiti tenendo presenti quelle condizioni.
È per questo che i controlli qui sotto sono ordinati così. Prima la dimensione piccola, perché è quella decisiva e la più costosa da correggere dopo. Poi le proprietà tecniche, poi la dimensione dell'inquadratura, poi il trattamento del movimento, poi l'esportazione. Invertire uno dei primi tre costa un ridisegno. Se parti da un marchio che non è stato mai progettato per il movimento, i vincoli sono raccolti in ciò che richiede davvero l'animazione di un logo.
Passo 1 · Testa il marchio a 98 pixel
Esporta il marchio alla sua dimensione di visualizzazione reale, mettilo su un telefono e guardalo per un secondo. Non ingrandito, non su un monitor, non a risoluzione piena con il nome del file accanto.
Tre cose falliscono di solito. I tratti sottili scompaiono del tutto — una linea di un pixel nell'originale diventa nulla dopo il ridimensionamento. Lo spazio negativo si chiude, così i controcampi si riempiono e le lettere si fondono. E qualsiasi gradiente si appiattisce in una singola tonalità media, che può cambiare silenziosamente il rapporto cromatico tra simbolo e lettering.
La soluzione non è ridisegnare tutto. È decidere cosa mostra il posizionamento più piccolo. Una versione solo simbolo per gli avatar e una versione simbolo-più-lettering per le inquadrature larghe è la suddivisione standard, e costa un pomeriggio invece di un rebrand.
Progettare su una tela grande e decidere alla dimensione piccola è l'intero metodo, ed è l'abitudine che ripaga su ogni asset in seguito. Lo stesso ragionamento si applica alla versione statica di un marchio che finisce in una GIF: il formato impone la stessa semplificazione, ed è per questo che i vincoli di palette alla base di una logo GIF valgono la pena di essere compresi anche se pubblichi solo video.
Passo 2 · Conferma che la trasparenza sia reale
Un file di logo può sembrare trasparente e non esserlo. Apri il PNG su uno sfondo scuro e controlla che l'area attorno al marchio sia davvero assente invece di un rettangolo bianco che lo sfondo del mockup ha nascosto per caso.
Questo conta più sul video che altrove, perché il marchio animato viene composto su sfondi fotografici — una testa parlante, uno scatto di prodotto, un panorama notturno. Un piatto bianco dietro al marchio è immediatamente visibile come piatto bianco, e nessun motion design lo nasconde. Le ombre morbide semi-trasparenti sono l'altro errore comune: si leggono come un box grigio una volta che l'encoder fa la media del canale alpha.
I formati sicuri sono SVG e un PNG con un vero canale alpha, e la differenza tra i due vale la pena conoscerla prima di esportare: PNG supporta l'alpha blending completo, mentre il formato GIF è limitato a un singolo indice completamente trasparente per fotogramma, ed è per questo che i bordi morbidi appaiono sgranati lì — w3.org — specifica PNG. Se il tuo unico file è un JPEG, non hai ancora un logo trasparente.
Passo 3 · Decidi prima l'inquadratura più piccola
La dimensione dell'inquadratura è una decisione di design, non un'impostazione di esportazione, e la più piccola dell'insieme decide la composizione.
Il verticale 9:16 è il ritaglio più stretto in un set di contenuti normale — ha il minor spazio orizzontale per un lettering, quindi è dove un lockup o funziona o deve essere ricostruito. Il quadrato 1:1 è il medio sicuro per i posizionamenti in feed che ritagliano in modo aggressivo. L'orizzontale 16:9 fino a 4K copre YouTube, gli hero dei siti e qualsiasi cosa su uno schermo in una stanza fisica.
Realizza prima la versione verticale se il contenuto è social-first, poi adatta verso l'esterno. Adattare da un master largo al verticale è l'errore che produce più ridisegni, perché la composizione era stata risolta per uno spazio che l'inquadratura verticale non ha mai avuto. Se il problema è il lockup invece dell'animazione, le convenzioni di disposizione sono trattate in le basi del logo video.
Passo 4 · Scegli il trattamento del movimento dalla geometria del marchio
Il trattamento dovrebbe essere leggibile dal marchio stesso. Un simbolo geometrico con angoli netti richiede una mask reveal o una costruzione a parti, perché la geometria suggerisce già da dove arrivano i pezzi. Un marchio circolare o organico richiede una scalatura radiale o un assestamento. Un lettering che deve restare leggibile richiede quasi nulla — una breve fade-up e una pausa.
Ciò che non funziona è scegliere l'animazione da un elenco di effetti e applicarla a qualunque marchio ti trovi davanti. È il meccanismo dietro l'errore riconoscibile in cui un marchio sembra muoversi contro la propria forma, che il pubblico legge come amatoriale anche quando non sa spiegarne il motivo.
Due valori decidono il risultato più della scelta dell'effetto: quanti fotogrammi impiega l'ingresso e cosa succede nei due fotogrammi attorno alla fermata. Un ingresso sotto i 24 fotogrammi a 24 fotogrammi al secondo trasmette sicurezza. Un ingresso di 40 fotogrammi trasmette attesa. E un marchio che arriva e si ferma di colpo si legge come un taglio netto invece che come un movimento, ed è per questo che un assestamento di due fotogrammi vale la pena di essere aggiunto prima di aggiungere qualsiasi durata.
Passo 5 · Imposta la base tecnica prima di animare
Scrivi questi quattro valori una volta e riusali per ogni esportazione, perché le specifiche delle piattaforme cambiano e ricostruire a memoria è il modo in cui un set finisce per essere incoerente tra i canali.
Frame rate: 24 per qualsiasi cosa con assestamento e pausa, 30 dove una piattaforma ricodifica in modo aggressivo. Rapporti d'aspetto: 9:16, 1:1 e 16:9, tutti esportati da una sorgente così la tempistica resta identica. Durata: uno-tre secondi per un'apertura, due-sei per un taglio di lancio. E spazio colore: esporta in Rec. 709 e non improvvisare, perché un colore di marca saturo che cambia dopo la transcodifica è peggio di qualsiasi artefatto di compressione e non sarà visibile finché il file non parte sul telefono di qualcun altro.
I numeri delle piattaforme valgono la pena di essere controllati invece di essere dati per scontati, visto che differiscono più di quanto la gente si aspetti. L'API Reels Publishing di Meta documenta i suoi requisiti in modo esplicito — rapporto d'aspetto 9:16, 1080 per 1920 pixel consigliati con un minimo di 540 per 960, 24-60 fotogrammi al secondo e compressione H.264 o H.265 con GOP chiuso di due-cinque secondi — developers.facebook.com — Reels publishing. Come mostra quella specifica, un'apertura di uno-tre secondi sta comodamente dentro ogni vincolo pubblicato, quindi il fattore limitante è la tua disciplina di tempistica invece dei limiti della piattaforma.
Passo 6 · Guardalo muto e a dimensione feed
L'ultimo controllo richiede novanta secondi e intercetta i fallimenti che gli altri cinque non possono. Esporta il pezzo finito, riproducilo su un telefono alla dimensione feed reale, senza suono.
Se l'ingresso si legge ancora come deliberato con l'audio spento, la tempistica sta facendo il lavoro e il brano è un bonus. Se silenziandolo i tagli sembrano arbitrari, il problema è nei punti di taglio, non nella musica — e aggiungere un whoosh o un riser non riparerà un taglio che sta a pochi fotogrammi dal beat. È anche il punto in cui aiuta la precisione a livello di fotogramma di una griglia simile a un metronomo, e il modello di base di come la tempistica viene espressa lungo una durata è documentato nella <a href="https://www.w3.org/TR/web-animations-1/">specifica Web Animations</a> del W3C, che vale uno sguardo se vuoi il vocabolario per ciò che stai regolando.
Guardalo tre volte prima di pubblicare, non una. La prima visione vede il logo. La seconda vede la tempistica. La terza vede ciò che vede un estraneo, che è l'unica che conta.
Cosa cambia nel lavoro quando hai un logo nuovo
C'è una differenza strutturale tra animare un marchio consolidato e animarne uno del tutto nuovo, e decide quanto dell'ordine a sei passi puoi saltare.
Un marchio consolidato è già passato attraverso questo filtro in pubblico. È apparso a dimensioni piccole per anni di asset, qualcuno si è lamentato di una versione illeggibile e la variante semplificata esiste probabilmente già come file secondario. I controlli colgono ancora problemi, ma il marchio è di solito stato testato da qualche parte.
Un marchio nuovo è stato testato in un unico contesto: una presentazione, a una dimensione comoda, su uno schermo che nessuno stava scorrendo via. È la condizione di visualizzazione più indulgente che il marchio incontrerà mai. L'avatar da 98 pixel non è mai stato considerato, l'esportazione trasparente potrebbe non esistere ancora e nessuno ha controllato se il contorno che regge a scala poster sopravvive a una codifica video.
Quindi i sei passi sono caricati all'inizio di proposito: tre di essi — il test a dimensione piccola, il controllo della trasparenza e la decisione dell'inquadratura — sono controlli sul file sorgente invece che sull'animazione. Correggerli dopo che l'animazione esiste significa rifarla. Correggerli prima costa un pomeriggio e, nella maggior parte dei casi, una variante semplificata del marchio.
Se vuoi la versione breve di tutta la disciplina prima di impegnarti in una costruzione completa, l'anatomia di un marchio animato — ingresso, assestamento, pausa — è esposta negli stili che i brand usano davvero, ed è più facile scegliere un trattamento una volta che sai nominare le alternative: stili di logo animati.
Il foglio di consegna
Una pagina di numeri, tenuta accanto ai file di esportazione. Ci vogliono dieci minuti per scriverla una volta ed è la differenza tra un brand coerente e un insieme di file che sono ciascuno derivati un poco.
File sorgente: l'SVG o PNG trasparente da cui animi, con la variante semplificata solo simbolo salvata separatamente.
Movimento: durata dell'ingresso in fotogrammi, lunghezza della pausa in secondi, durata totale e il nome del caso trattato in cui il marchio siede nel suo stato finale.
Tecnica: frame rate, i tre rapporti d'aspetto, spazio colore e il profilo di codec con cui esporti.
Musica: il brano, il suo tempo in battiti al minuto e la conferma che è libero per pubblicazione commerciale.
Poi esegui i sei controlli su quel foglio a ogni ricostruzione invece che a memoria. Nessuno ricorda un intervallo di keyframe sei mesi dopo, e la seconda versione dell'apertura di un brand è dove l'incoerenza entra di solito.
FAQ
Di cosa ho bisogno perché un nuovo logo video funzioni?
Un marchio leggibile a 98 pixel, una vera trasparenza nel file, una dimensione d'inquadratura decisa, un trattamento del movimento derivato dalla geometria del marchio e una base tecnica che riusi. L'animazione stessa è l'ultimo passo e il più breve — la maggior parte dello sforzo sta nei controlli che la precedono.
Posso animare un logo che ho solo come JPEG?
Puoi, ma dovrai prima ritagliare il marchio. Un JPEG non ha canale alpha, quindi l'area attorno al logo è un colore pieno che siederà visibilmente sopra qualsiasi sfondo video. Riesporta come PNG con trasparenza o come SVG prima di animare, e controlla il risultato su uno sfondo scuro per confermare che l'alpha sia reale.
Quanto deve durare l'animazione di un logo video?
Uno-tre secondi per un'apertura di canale, due-sei secondi per un pezzo di lancio o annuncio. Qualsiasi cosa più lunga di solito sta portando tre compiti insieme — logo, titolo e tagline — e la soluzione è eliminarne due invece di stringere la tempistica di tutti e tre.
Ho bisogno di file diversi per verticale e orizzontale?
Rapporti d'aspetto diversi, sì; tempistica diversa, no. Esporta 9:16, 1:1 e 16:9 dallo stesso file sorgente così durata dell'entrata, allineamento al beat e lunghezza della pausa restano identici. Cambia solo l'inquadratura attorno al marchio, ed è questo che impedisce a un brand di sembrare tre aziende diverse su tre canali.
L'animazione deve fare loop o dissolvenza?
Fai il loop. Un video in autoplay che torna alla prima inquadratura sembra un unico oggetto continuo in un feed, mentre una dissolvenza al nero sembra una clip finita che viene scorso via. Stesso girato, finale del file diverso, tempo di visualizzazione misurabilmente diverso — quindi taglia netto o fai il loop, e riserva la dissolvenza a un hero di sito se ti serve.
In sintesi
Fai il passo uno prima di fare qualsiasi altra cosa. Esporta il marchio a 98 pixel, mettilo su un telefono, guardalo per un secondo — e se regge a quella dimensione, gli altri cinque controlli sono aritmetica invece di un ridisegno. Ogni team che finisce per ridisegnare un'animazione ha saltato quel test, perché il posizionamento più piccolo è l'unico che ti dice la verità sul marchio. Puoi eseguirlo sul tuo file nell'editor nel browser in circa dieci minuti.