logoto.video logologoto.video
Home
GuideSep 18, 202611 min

Logo animato Twitch: costruito per 32 pixel

Gli streamer progettano prima la versione grande e scoprono il problema alla dimensione dell'avatar. Lavorare al contrario a partire dal posizionamento più piccolo è ciò che fa reggere un logo animato Twitch ovunque appaia.

Un canale Twitch mette lo stesso marchio in quattro posti contemporaneamente, e tre di essi sono più piccoli di una miniatura. C'è la foto del profilo in un ritaglio circolare, il marchio in chat accanto a ogni messaggio, l'angolo di un overlay di stream e la schermata offline che riempie il player ogni volta che lo stream non è live. Progetta prima la più grande e la più piccola fallirà.

Questa è la guida per costruire un logo animato Twitch che sopravvive a tutti e quattro — più le regole di piattaforma che decidono cosa ti è permesso mettere sullo schermo quando due loghi condividono un fotogramma.

Quattro posizionamenti, quattro disegni diversi

L'istinto è disegnare un logo e ridimensionarlo. Quello funziona per un wordmark su un deck di slide e fallisce ovunque altro, perché i quattro posizionamenti su un canale chiedono disegni genuinamente diversi. L'avatar è un cerchio che ritaglia tutto vicino agli angoli. Il marchio in chat è un quadrato reso di pochi pixel di altezza. L'overlay sta sopra girato in movimento con luminosità variabile. La schermata offline è un'intera tela 16:9 che di solito è la prima cosa che vede un nuovo visitatore.

Trattali come un'identità espressa in quattro modi invece di un file buttato quattro volte. Il monogramma porta l'avatar e il marchio in chat; il lockup completo con il nome del canale appartiene alla schermata offline e al banner; la versione overlay è il marchio semplificato più il contorno o la piastra che serve a sopravvivere al gameplay. Stesso brand, quattro livelli di dettaglio.

Progetta prima l'istanza più piccola

Il posizionamento più piccolo impone i vincoli a tutto il resto. Disegnalo per primo e il resto del sistema ne deriva. Disegnalo per ultimo e dovrai ridisegnare.

Perché l'avatar è lo slot più difficile

Twitch mostra la foto del profilo in un ritaglio circolare e la riusa a dimensioni ben sotto l'upload. Le guide sulle dimensioni del settore indicano l'upload consigliato a 256x256 pixel o più, ma le stesse guide fanno il punto che conta: il marchio compare anche piccolissimo in chat e nelle directory dei canali, quindi deve essere leggibile molto prima di essere grande. Un design che funziona solo a 256 pixel è un design che scompare nei due posti in cui viene visto di più.

Il test del monogramma

Riduci il nome del canale alle sue due o tre lettere più forti e guarda se si leggono alla dimensione più piccola che riesci a simulare. Se non si leggono, nessun lavoro sul nome completo sistemerà l'avatar. Tre lettere sono già vicino al limite di leggibilità dentro un cerchio; cinque sono una barra grigia. Gli streamer il cui nome non si riduce naturalmente dovrebbero scegliere le due lettere più forti invece di comprimere l'intera parola.

Spessore del tratto a dimensioni piccole

Le linee sottili sono il motivo più comune per cui un marchio scompare. Un tratto di un pixel in un master di 2000 pixel diventa una frazione di pixel nel rendering della chat e semplicemente si sgrana in grigio. Imposta uno spessore minimo del tratto nel master — abbastanza pesante da sopravvivere all'esportazione più piccola — e accetta che la versione grande sembrerà leggermente più bold di quanto immaginavi. Bold si legge; elegante scompare.

La stessa logica vale per il dettaglio interno. Il tratteggio fine, i contatori sottili e i piccoli spazi tra i tratti si riempiono tutti quando il marchio si restringe. Costruisci la versione avatar come una semplificazione deliberata — meno forme, spazi più ampi, contrasto più alto — invece di una copia ridimensionata del disegno dettagliato.

La schermata offline è l'asset più guardato

Ecco la parte controintuitiva del branding di canale: la schermata offline di solito riceve più visualizzazioni dello stream. I nuovi visitatori atterrano su un canale a ogni ora del giorno, e la maggior parte di questi arrivi avviene quando nessuno è live. La grafica offline 1920x1080 è ciò che riempie il player in quel momento, il che la rende l'immagine a più alto leverage del canale.

Le guide pubblicate sulle dimensioni di Twitch trattano la schermata offline come HD 16:9 standard — 1920x1080, in perfetto accordo con il player, con un minimo consigliato di 1280x720 e un'opzione animata che accetta GIF sotto un limite di dimensione file. La guida alle dimensioni immagine di Twitch di StreamScheme è un utile elenco di controllo per tutto il kit di art del canale, inclusa la larghezza del pannello di 320 pixel che la maggior parte degli streamer sbaglia al primo upload.

Cosa deve rispondere la card offline

Tre domande, in questo ordine: cos'è questo canale, quando è di nuovo live, e dove altro lo trovo. Il logo animato Twitch sta nella prima risposta — è la conferma d'identità che dice a un visitatore di essere atterrato nel posto giusto. Tutto il resto è testo, e il testo deve restare abbastanza grande da leggersi su un telefono, che è dove la maggior parte delle schermate offline si sgretola silenziosamente.

Animazione sicura per il loop

Se la schermata offline si anima, la giunzione del loop diventa visibile entro circa dieci secondi di visione, che è più o meno quanto impiega un visitatore a decidere se seguire. Un logo animato Twitch costruito per la card offline dovrebbe restare fermo per la maggior parte del tempo — un pulse lento, un glow sottile, un singolo movimento agganciato al beat ogni pochi secondi — e tornare esattamente al fotogramma da cui è partito. Il movimento costante su una pagina che nessuno sta guardando si legge come un video bloccato, e i video bloccati vengono chiusi.

Overlay e alert: un movimento che sopravvive al gameplay

L'overlay è il posizionamento tecnico più difficile, perché il marchio sta sopra un girato che cambia luminosità, colore e dettaglio più volte al secondo. Un logo nitido sopra una tavolozza di colore può scomparire del tutto sopra un cielo luminoso o un'esplosione affollata.

Il contorno e la piastra

Due soluzioni, applicate in ordine. Prima un contorno a contrasto largo due o tre pixel, che separa il marchio da ciò che ha dietro senza cambiarne il colore. Poi una piastra morbida — un rettangolo arrotondato al 40-60 percento di opacità — per le scene affollate in cui un contorno da solo non basta. Entrambe sono impostazioni dell'overlay più che cambiamenti di disegno, il che significa che un unico file animato può portarle in ogni scena invece di aver bisogno di una variante ricolorata per gioco.

Un movimento, non tre

Il timbro — il marchio che arriva leggermente sovradimensionato e si blocca a tempo sul beat — è il movimento che porta questa categoria, perché si legge a qualsiasi dimensione e si abbina naturalmente al drop che segue un alert. Impilare una scossa, una separazione di colore e un lampo sullo stesso beat è l'errore comune: tre effetti che atterrano insieme si annullano a vicenda e il marchio smette di essere leggibile nel momento esatto in cui dovrebbe registrarsi. Un movimento forte atterra più di tre che competono.

Regole di piattaforma quando due marchi condividono un fotogramma

Un logo animato Twitch raramente appare da solo. Sta su una schermata offline con l'UI di piattaforma, in una miniatura di clip con la key art di un gioco, e accanto ai marchi Discord o YouTube su un pannello. Ciascuno ha le sue regole, e il punto di partenza più sicuro è la pagina degli asset della piattaforma stessa invece di una copia di terze parti — la pagina degli asset di brand di Twitch è la fonte canonica per i marchi della piattaforma, e lo dice già nella sua prima riga, ringraziando i visitatori per aver trovato gli asset corretti invece di scaricare fan art.

La stessa disciplina vale per le altre piattaforme su cui posta uno streamer. La guida al branding dei canali di Google per YouTube è insolitamente specifica su ciò che un banner deve tollerare: un upload minimo di 2048x1152 pixel, una safe area di 1235x338 pixel entro cui testo e loghi sono garantiti rimanere visibili, un consigliato 2560x1440 per la televisione, e un'istruzione di non aggiungere ombre, bordi o cornici decorative. Come nota la documentazione sul branding dei canali di Google, lo stesso banner è mostrato su computer, dispositivi mobili e televisori ma ritagliato diversamente su ciascuno — che è l'intero argomento per tenere il marchio dentro la safe area invece di centrarlo per uno schermo.

Discord è il terzo marchio che di solito finisce nella stessa immagine. Le linee guida di brand di Discord stabiliscono le proprie regole d'uso per il marchio, e il takeaway pratico per uno streamer è lo stesso di ogni altro posto: mantieni il marchio di piattaforma non modificato, dagli spazio chiaro, e non comporlo mai nel tuo lockup come se fosse uno dei tuoi elementi.

Costruirlo in un pomeriggio

L'ordine di costruzione conta più degli strumenti. Inizia dal monogramma alla dimensione più piccola che riesci a simulare e fallo leggere. Ingrandiscilo nell'avatar. Aggiungi il nome del canale per fare il lockup offline, poi costruisci la variante overlay a partire dal disegno semplificato con il contorno applicato. Solo allora anima, e anima la versione semplificata — il movimento amplifica ciò che il marchio è già, quindi un disegno affollato diventa una macchia in movimento mentre uno pulito diventa un'identità in movimento.

L'animazione stessa è un lavoro breve una volta che i disegni esistono. Carica l'SVG o PNG trasparente, scegli i fotogrammi di sfondo, prendi una traccia e lascia che lo strumento tagli il movimento sui marcatori del beat — poi esporta 9:16 per clip e Shorts e 16:9 per la schermata offline e il trailer di canale dalla stessa sorgente. Un'apertura costruita attorno a un primo fotogramma leggibile è ciò che rende quell'esportazione utilizzabile anche come miniatura statica, e l'editor del browser esegue l'intero passaggio senza una timeline da imparare. Se il marchio viene disegnato da zero invece che animato, le regole di design per i marchi da gaming coprono le decisioni di disegno che vengono prima di questo passaggio.

FAQ

Di che dimensione dovrebbe essere un logo animato Twitch?

Costruiscilo a partire da un master vettoriale così la dimensione smette di essere una decisione. Nella pratica ti serve un quadrato che sopravvive al ritaglio circolare dell'avatar, una versione semplificata che resta leggibile in chat e una composizione 1920x1080 per la schermata offline. L'avatar è il vincolo che conta: se il marchio non si legge alla dimensione più piccola che la piattaforma renderizza, nessuna esportazione più grande lo salva.

La mia foto del profilo Twitch può essere animata?

La foto del profilo di Twitch è un'immagine statica, quindi la versione animata appartiene ai posizionamenti che accettano video o GIF — la schermata offline, gli alert, gli overlay e il trailer di canale. Tratta l'avatar come il fotogramma fermo della tua animazione: se quel fotogramma si legge come una composizione finita, anche la versione animata lo farà, e il requisito statico smette di essere un compromesso.

La schermata offline dovrebbe essere animata?

Un loop sottile aiuta, uno affollato nuoce. La card offline è spesso la prima impressione di un visitatore, e di solito viene vista su un secondo monitor o su un telefono mentre accade altro. Un movimento lento e occasionale riporta l'occhio sul nome del canale e sulla programmazione. Il movimento costante compete con il testo e si legge come un video che non è riuscito a caricarsi.

Come mantengo un logo leggibile sopra il gameplay?

Applica prima un contorno a contrasto largo due o tre pixel, poi aggiungi una piastra morbida al 40-60 percento di opacità se la scena è ancora troppo affollata. Entrambe sono impostazioni a livello di overlay, quindi un file copre ogni gioco invece di un file per scena. Se il marchio fatica ancora, il problema è di solito il disegno più che il trattamento — semplificalo e riprova.

Posso usare il mio logo animato Twitch su altre piattaforme?

Sì, e dovresti, con una sola accortezza: rispetta le safe area di ciascuna piattaforma. La guida al banner di YouTube è l'esempio più chiaro, garantendo testo e loghi solo dentro una regione di 1235x338 pixel di un upload di 2048x1152. Un marchio centrato per la schermata offline Twitch verrà ritagliato su una televisione, quindi esporta per posizionamento invece di riusare un file unico ovunque.

In sintesi

Costruisci il logo animato Twitch partendo al contrario dal posizionamento più piccolo che occuperà mai. Falli leggere il monogramma alla dimensione della chat, semplifica il disegno finché i tratti sottili sopravvivono, dai all'overlay un contorno così funziona su qualsiasi gioco, e fai tornare il loop offline al suo primo fotogramma. Poi anima la versione semplificata — non quella dettagliata — perché la versione che si legge a 32 pixel è la versione che si legge a 1080. Tutto il resto è un ridimensionamento.