L'avatar di un canale su YouTube viene mostrato a 98 per 98 pixel. È più piccolo di quanto la maggior parte delle persone supponga quando esporta un master da 4000 pixel e si ritiene soddisfatta. Accanto, la barra del canale si estende per 2560 pixel di larghezza e ne mostra solo una frazione su una televisione. E alla fine di ogni video, lo stesso marchio deve sedersi accanto a due miniature di concorrenti senza diventare illeggibile.
Quindi un logo animato per YouTube non è un unico asset. È un solo marchio, disegnato una volta e adattato a tre box che condividono quasi nulla a livello geometrico — e poi animato una sola volta per tutti e tre. Sbagli l'ordine e ridisegnerai il marchio tre volte. Fai bene e l'intera cosa è un solo pomeriggio. Se non hai mai animato un marchio, inizia prima dalle basi per animare un logo.
I tre box che un logo animato per YouTube deve riempire
Conviene trattare ogni posizionamento come un vincolo di design invece che come un ridimensionamento. I tre non hanno nulla in comune se non il marchio stesso.
L'avatar è quadrato, mostrato dentro un ritaglio circolare ed è piccolo. Tutto ciò che sta fuori dal cerchio inscritto in quel quadrato viene tagliato, quindi il marchio deve stare dentro un cerchio per progettazione — non essere un rettangolo che casualmente ha spazio attorno.
Il banner è largo e per lo più invisibile. YouTube mostra un'area sicura di 1235 per 338 pixel dentro un upload di 2048 per 1152 pixel, e una TV che ritaglia ancora di più. Tutto ciò che sta fuori da quella banda centrale è decorazione per gli spettatori su una specifica dimensione di schermo, che è un bel bonus e mai un presupposto di design.
La schermata finale è quella che coinvolge altre persone. Il tuo marchio appare come un piccolo elemento circolare accanto alle card video e al pulsante iscriviti, su girato che non controlli. Deve restare leggibile sia contro una testa parlante luminosa sia contro una scena d'azione buia nella stessa sessione.
Progetta prima l'avatar da 98px
Inizia dalla dimensione più piccola e procedi verso l'alto. Non al contrario, e non come controllo finale.
Il ragionamento è semplice. Andare dal grande al piccolo fa perdere dettagli: disegni un lettering che si legge benissimo a scala banner, poi scopri a dimensione avatar che le lettere sono collassate in una macchia grigia, e ora devi ridisegnare. Andare dal piccolo al grande non fa perdere nulla, perché un marchio leggibile a 98 pixel lo è a qualsiasi dimensione superiore. La versione piccola è il vincolo; tutto ciò che è più grande è spazio di cui non avevi bisogno.
Nella pratica, questo significa progettare l'avatar come simbolo autonomo mentre ci lavori, poi aggiungere il lettering per il banner e la schermata finale. Questa separazione è lo stesso ragionamento alla base della creazione di una logo GIF o di qualsiasi asset a formato ridotto attorno a un monogramma: la versione che sopravvive al ritaglio più difficile è la versione che vale la pena animare.
Scegli un marchio che funziona in un cerchio
Due forme falliscono regolarmente il ritaglio circolare. Qualsiasi cosa con contenuti importanti agli angoli del suo bounding box — un lettering allineato da sinistra a destra, un lockup con un simbolo accanto a un nome — perde le estremità del nome. E qualsiasi cosa costruita come rettangolo largo con spaziatura interna basata su quella larghezza sembrerà non centrata una volta che il cerchio la morde.
La soluzione è progettare come se il box fosse già un cerchio. Tieni il marchio dentro un cerchio inscritto nel quadrato, lascia spazio di respiro di circa l'otto-dieci percento del diametro su ogni lato, e se il brand ha un lettering, trattalo come asset separato per i posizionamenti larghi invece che come qualcosa che deve comparire a dimensione avatar. Un monogramma più un lettering opzionale è la struttura che sopravvive a tutti e tre i box.
Testa il marchio alla dimensione reale, non ingrandito
Progetta a 4000 pixel, giudica a 98. Esporta il marchio alla sua dimensione di visualizzazione reale, mettilo su un telefono a distanza di braccio e guardalo in meno di un secondo. I tratti sottili scompaiono, lo spazio negativo si chiude e qualsiasi gradiente diventa una tonalità media piatta. Ciò che supera quel test è il disegno che animi.
La parte scomoda è che il test di solito uccide la versione più interessante del marchio. Questo non è un motivo per saltarlo. Ogni canale che usa un'illustrazione dettagliata come avatar prima o poi la sostituisce, e la sostituisce con qualcosa di simile a ciò che questo test avrebbe prodotto fin dall'inizio.
Il movimento deve essere leggibile anche a dimensione avatar
La stessa logica si applica all'animazione, ed è qui che falliscono la maggior parte dei logo di canale. Un ingresso costruito su una scivolata, una scalatura e una rotazione si legge bene a 1080 pixel e diventa fango illeggibile a 98, perché sono tutti movimenti di posizione e dimensione, e su piccola scala l'occhio non può seguirli.
Ciò che sopravvive piccolo è il cambiamento di forma e opacità: una wipe, un disegno progressivo, una dissolvenza tra due stati della stessa silhouette. Quelli si leggono come un cambiamento di stato invece che come un movimento, e si registrano all'istante anche in un elemento a dimensione miniatura.
La meccanica alla base è documentata nel modello di animazione CSS, che separa le proprietà animabili in quelle che possono essere interpolate con continuità e quelle che non possono: w3.org — specifica delle animazioni CSS. Opacity e transform si interpolano in modo pulito ed economico; qualsiasi cosa che forzi un ricalcolo completo del layout a metà animazione è sia più pesante da renderizzare sia più difficile da leggere a dimensioni piccole. Lo stesso principio vale sia che l'animazione giri in un browser sia che venga renderizzata in video.
Altri due vincoli arrivano dalla piattaforma. Primo, l'animazione deve atterrare e restare — un avatar viene guardato di sfuggita, quindi il marchio dovrebbe essere nel suo stato finale per la maggior parte della durata. Secondo, il punto di loop dovrebbe tornare alla prima inquadratura se l'asset verrà usato come miniatura animata o in un'intro, perché un marchio in movimento che si resetta con un salto visibile sembra rotto.
Schermate finali animate e intro
Due posti in cui un marchio di canale animato guadagna il suo posto oltre l'avatar.
Il primo è un'intro breve del canale — uno-tre secondi, il marchio arriva, resta, si libera. Tennila sotto i tre secondi, perché ogni secondo di intro è un secondo di retention dello spettatore speso prima che inizi il contenuto. La versione più stretta di quel formato è l'animazione di intro del logo, dove la prima inquadratura è progettata per reggere da sola.
Il secondo è la schermata finale. La stessa documentazione di YouTube sul branding del canale chiede ai creator di non aggiungere ombre portate, bordi o cornici agli elementi che compaiono accanto ad altre card di canale, perché la piattaforma applica già il proprio trattamento e gli effetti impilati rendono confusionario il layout. Un marchio animato in una schermata finale dovrebbe quindi avere bordi netti e essere autonomo, senza glow o contorni aggiunti per enfasi.
Entrambi i posizionamenti condividono una regola con l'avatar: guida con il logo nel suo stato finale. La stessa guida di YouTube è di caricare un avatar di almeno 98 per 98 pixel che verrà mostrato in un cerchio, e di tenere il messaggio del banner dentro l'area sicura di 1235 per 338 — il resto dell'upload di 2048 per 1152 viene spesso ritagliato del tutto: support.google.com/youtube/answer/10456525. Come nota quella documentazione, un banner progettato su tutta la larghezza di upload sembrerà centrato su desktop e perderà entrambe le metà su una TV.
Una animazione, tre esportazioni
Realizza l'animazione una volta sul ritaglio dell'avatar, poi esportala a ogni rapporto di cui ha bisogno il canale. Tempistica, easing e pausa restano identici; cambia solo l'inquadratura attorno al marchio.
L'elenco breve: un'esportazione quadrata a dimensioni avatar e miniatura per l'asset di profilo statico e animato, un'esportazione orizzontale per l'area del banner del canale e qualsiasi uso su sito o stampa, e un'esportazione 16:9 per l'intro e la schermata finale. Se il canale pubblica anche Shorts verticali, aggiungi un cutdown 9:16 — stesso file sorgente, stesso allineamento al beat.
Il bitrate di esportazione conta qui più che sui filmati ordinari, perché un marchio ad alto contrasto su sfondo piatto è dove gli artefatti di compressione compaiono per primi. H.264 a profilo High, un intervallo di keyframe di circa due secondi e una velocità di trasmissione superiore a quella che la piattaforma consiglia per i video generici manterranno i tratti sottili lontani dal ringing.
C'è una seconda decisione di esportazione nascosta nello stesso pannello. Un marchio su sfondo semplice è insolitamente sensibile agli errori di spazio colore, e vale la pena confermare che il contenitore stia trasportando i valori che ti aspetti invece di dare per scontato che il default sia giusto — la differenza si manifesta come un colore di marca che cambia lievemente sullo schermo di qualcun altro. Controllare come un formato gestisce i metadati fa parte del lavoro, non è un pensiero successivo: developer.mozilla.org — riferimento sulla gestione dei formati.
Dove appare anche il marchio
Un marchio di canale non vive solo nei tre box ufficiali. Appare in posti per cui YouTube non ti dà un spec sheet, e quelli sono spesso dove una versione animata fa il lavoro maggiore.
Le miniature sono la più ovvia. Un piccolo marchio in un angolo di una miniatura è un segnale di riconoscimento, e funziona meglio quando è identico su ogni video — stessa posizione, stessa dimensione, stesso trattamento. Nel momento in cui il marchio d'angolo si sposta tra gli upload, il valore di riconoscimento crolla e diventa decorazione.
Gli Shorts sono il secondo. Un cutdown verticale dello stesso marchio funziona come card finale per uno Short, e l'inquadratura 9:16 è dove un logo video costruito da un unico file sorgente guadagna il suo posto — la tempistica si trasferisce invariata, cambia solo l'inquadratura attorno al marchio.
Il terzo è del tutto fuori piattaforma. Lo stesso marchio animato finisce in una firma email, un kit stampa, un server Discord e un deck per sponsor. Tutti sono motivi per tenere il file sorgente in un unico posto invece di ricostruire il movimento ogni volta che qualcuno chiede una versione.
Un confronto utile da tenere a mente
I tre posizionamenti differiscono per più delle dimensioni, e aiuta avere le differenze elencate in un unico posto prima di iniziare a esportare.
Avatar — quadrato, mostrato in un cerchio, circa 98 pixel sullo schermo, giudicato in meno di un secondo, meglio costruito come simbolo autonomo con uno sfondo solido o semplicemente a contrasto.
Banner — largo, effettivamente 1235 per 338 per tutto ciò che deve restare visibile, caricato a 2048 per 1152, letto su desktop e televisione con ritagli diversi, meglio costruito con il marchio su un lato e il messaggio dentro la banda sicura.
Schermata finale — piccola, circolare, posizionata su girato non controllato, in competizione con card video e un pulsante iscriviti, meglio costruita come marchio a bordi netti senza contorno o ombra aggiunti e con una pausa breve invece di una lunga animazione.
Un marchio, un linguaggio di movimento, tre serie di numeri. Scrivi i numeri accanto ai file di esportazione così la prossima persona che tocca il canale non ricostruisce il marchio a memoria e non devia di due fotogrammi dal beat.
FAQ
Quanto deve essere grande il logo di un canale YouTube?
Carica almeno 98 per 98 pixel, e più grande se puoi — la stessa guida della piattaforma è un minimo di 98 pixel per l'avatar, che viene mostrato dentro un ritaglio circolare. Progetta a 4000 pixel ma giudica a 98, e tieni tutto ciò che conta dentro il cerchio inscritto nel quadrato.
Un logo di canale YouTube può essere animato?
L'avatar stesso è un'immagine statica, ma lo stesso marchio può essere animato per le intro, le schermate finali, le miniature animate e ogni posizionamento fuori piattaforma. Realizza un'animazione sul ritaglio dell'avatar ed esportala nei rapporti di cui hai bisogno, così la tempistica resta identica ovunque appaia il marchio.
Perché il mio logo appare sfocato come avatar di canale?
Quasi sempre per tratti sottili e dettagli fini. A 98 pixel un tratto di un pixel o scompare o scintilla, e di solito scintilla. Semplifica il disegno finché regge alla dimensione più piccola, aumenta il contrasto tra il marchio e il suo sfondo e anima la versione semplificata invece di quella dettagliata.
Devo inserire il nome del canale nel logo?
Tratta il nome come un asset separato. Un lettering non si legge a dimensione avatar — le lettere collassano in una macchia grigia — quindi usa un monogramma come marchio primario e aggiungi il lettering solo nel banner, nell'intro e nella schermata finale, dove c'è larghezza da spendere.
Quanto deve durare l'animazione di intro di un canale?
Uno-tre secondi, e più vicino a uno per i canali che pubblicano ogni settimana. Il marchio arriva veloce, resta per un battito e si libera prima che l'attenzione dello spettatore debba essere riconquistata. Qualsiasi cosa di più lungo scambia retention per un logo, che è un cattivo scambio su ogni video che posterai mai.
In sintesi
Progetta a 4000 pixel e decidi a 98. Quella singola abitudine — costruire il marchio per il ritaglio dell'avatar prima del banner, e animare cambiamenti di forma invece di grandi spostamenti di posizione — è ciò che produce un logo animato per YouTube che funziona in tutti e tre i posizionamenti senza un secondo ridisegno. L'avatar del canale è l'unica versione che la maggior parte degli spettatori vedrà a grandezza intera; tutto il resto è contesto attorno. Puoi testare il ritaglio a dimensione piccola sul tuo marchio nell'editor nel browser prima di impegnarti in un'animazione.