Une chaîne Twitch affiche votre marque en plus d'endroits que presque toute autre plateforme, et la plupart sont minuscules. Le badge en direct à côté des messages de chat. L'avatar dans la grille du répertoire, en concurrence contre une centaine d'autres vignettes. La bannière hors ligne qui reste à l'écran quand personne ne diffuse. Le coin de superposition pendant la diffusion, posé sur des images de jeu qui changent de couleur à quelques secondes d'intervalle. Et l'écran de démarrage de stream, qui est la seule surface avec assez de place pour montrer une marque réellement en mouvement.
C'est la contrainte qu'il vaut la peine d'intérioriser tôt : sur Twitch, l'animation est l'exception et les petites images fixes sont la règle. Ce qui signifie qu'une animation de logo Twitch doit être conçue autour d'une image fixe qui fonctionne déjà partout ailleurs. Réussissez le statique et l'animation devient un complément court et à haute valeur. Sautez-le et l'animation est une décoration par-dessus une marque que personne ne peut lire.
Où la marque apparaît réellement
Il aide à séparer les surfaces selon l'espace qu'elles vous donnent, car les décisions de conception en découlent directement.
Les vignettes du répertoire et les bannières hors ligne sont les plus grands emplacements statiques, et la première ne s'affiche que quand vous êtes en direct. Le répertoire est là où la découverte se produit, donc la marque concurrence chaque autre chaîne de la catégorie.
Les avatars apparaissent dans le chat, dans les listes d'abonnés et à côté des notifications de raid. Petits, répétés, et souvent la seule version qu'un spectateur régulier voit.
Le coin de superposition est le seul emplacement sans taille fixe, car il dépend de votre propre configuration de scène. C'est aussi le plus hostile, car il repose sur des images de jeu en mouvement — une marque de superposition doit tenir contre des fonds changeants arbitraires.
Les alertes, transitions et l'écran de démarrage de stream sont là où vit le mouvement. Ce sont les surfaces construites pour un moment de marque plutôt qu'une identité persistante, et c'est là qu'une marque animée gagne sa place.
La bannière hors ligne est la surface la plus ignorée
Quand une chaîne n'est pas en direct, la page existe encore, et ce qu'un visiteur voit est la bannière hors ligne plus l'avatar plus tous les panneaux en dessous. Pour une chaîne qui diffuse quelques soirées par semaine, c'est la majorité de sa vie. Une grande part des visiteurs pour la première fois, et presque tous ceux qui arrivent d'une recherche ou d'un lien partagé à la mauvaise heure, rencontrent d'abord l'état hors ligne.
Deux règles font fonctionner cette surface. D'abord, la composition doit se lire comme complète sans mouvement, car rien dessus ne bouge. Ensuite, elle doit fonctionner à la taille du répertoire, car le même élément est souvent réutilisé comme la vignette qu'un spectateur voit dans la grille de navigation.
L'échec pratique ici est une bannière construite pour la vue de page en pleine largeur et réutilisée comme vignette. Une composition qui remplit un rectangle large perd ses éléments les plus distinctifs quand elle est comprimée dans une petite carte, et la marque et le nom finissent par se disputer quelques pixels visibles. Construisez la petite version d'abord — c'est le même principe qui s'applique à tout export de <a href="/logo-animation-templates/logo-video-maker">créateur de logo vidéo</a>, et il s'applique avec plus de force ici car tant d'emplacements Twitch sont petits.
Créer une animation qui survit à un visionnage en sourdine
Les écrans de démarrage de stream et les scènes de transition lisent de la musique d'ambiance plus souvent que quiconque ne l'attend, et un spectateur qui arrive sur une page de chaîne le fait fréquemment avec le son coupé. Twitch lui-même lit en autoplay la vidéo en direct en sourdine, et le comportement des médias en autoplay dans les navigateurs est bien couvert dans la documentation de MDN sur l'autoplay — la version courte étant que la lecture démarre sans geste de l'utilisateur, donc l'audio ne peut être supposé.
Cela produit le test le plus utile pour une animation de logo de stream. Coupez le son et regardez-la jusqu'au bout. Si les arrivées semblent arbitraires sans la piste, le timing est faux et aucun travail audio ne le réparera. Si la marque arrive encore avec intention dans le silence, l'animation fait son travail et la musique devient un enrichissement plutôt qu'une béquille.
Le second test est le comportement en boucle, et Twitch le rend exceptionnellement important. Un écran de démarrage de stream tourne pendant des minutes, donc toute animation là-bas boucle des dizaines de fois pour un seul spectateur. Une séquence qui se lit bien une fois peut devenir irritante à la quinzième répétition, et une coupe dure au point de boucle invisible au premier passage devient ce que vous remarquez au dixième.
Le correctif est de rendre la boucle sans couture plutôt que longue. Une marque qui se stabilise puis se dissout dans sa propre position de départ bouclera sans couture visible, tandis qu'une séquence qui ouvre depuis le noir et y retourne annonce chaque redémarrage. Si vous ne vérifiez qu'une chose sur un écran de démarrage, vérifiez le point de boucle.
Couleur, contraste et le problème de superposition
Une marque de superposition repose sur des images de jeu. Cela signifie que son fond est ce que le jeu rend, changeant continuellement, parfois clair et parfois quasi noir. Une marque qui dépend du contraste avec un fond prévisible ne survit pas à cela.
Trois approches fonctionnent.
Donnez à la marque de superposition son propre fond contenu — une petite plaque pleine ou subtilement formée derrière le symbole. Cela coûte un peu de place à l'écran et rend la marque lisible quoi qu'il arrive en dessous.
Utilisez une marque avec un fort contraste interne, pour qu'au moins un élément reste visible contre n'importe quel fond. Une marque à un seul ton disparaîtra contre des images du même ton à un moment donné pendant une session. Ce n'est pas hypothétique ; cela arrive au premier stream.
Déplacez-la hors de l'action entièrement. La plupart des interfaces de jeu gardent leurs propres éléments d'état dans des coins prévisibles, et la marque de superposition appartient généralement à l'un des espaces qu'elles ont laissés libres, ce qui est la même logique derrière les conventions de zone de sécurité que les graphismes de diffusion utilisent depuis des décennies.
Il existe une discipline documentée derrière cela. Un principe bien établi dans l'usage des marques est qu'un logo ne doit pas être décoré d'ombres, bordures ou cadres ajoutés — les recommandations de marque de chaîne de YouTube énoncent la même règle pour les avatars et l'art de chaîne, et cela se généralise : si une marque a besoin d'un cadre pour être visible, le problème de contraste sous-jacent n'a pas été résolu. Fait intéressant, une plaque de superposition n'est pas une décoration en ce sens — elle résout un problème de lisibilité, c'est pourquoi elle se lit comme délibérée là où une ombre portée se lit comme une erreur.
Il existe aussi un argument de retenue utile pour garder tout cela simple. Les recherches du Nielsen Norman Group sur l'animation dans les interfaces utilisateur séparent le mouvement qui communique un changement d'état du mouvement qui existe pour lui-même et constatent que la seconde catégorie coûte de l'attention sans rien rapporter. Une transition de stream communique que le contenu est sur le point de commencer, ce qui est un vrai changement d'état. Une marque qui tourne, rebondit, explose et se réassemble ne communique que quelqu'un a apprécié la timeline.
Les tailles dont vous avez besoin, et combien de fois
L'ensemble de travail pour une chaîne est plus petit que les gens ne l'attendent, et la plupart provient d'un seul dessin.
Une image fixe carrée pour les avatars, exportée à la plus grande taille que la plateforme accepte et confirmée lisible dans un recadrage circulaire. Une image fixe large pour la bannière hors ligne et la vignette du répertoire, construite pour que la composition survive à un affichage petit. Une animation verticale pour les stories, shorts et tout clip court tiré de streams. Une animation grand écran pour l'écran de démarrage de stream, les transitions et les alertes. Et une image fixe exportée de la pause propre de l'animation, pour les panneaux et tout emplacement qui ne peut prendre de mouvement.
Pour les exports d'animation, la résolution et le ratio d'aspect comptent tous deux. Les recommandations de YouTube sur le ratio d'aspect et la résolution documentent le vertical 9:16, le carré 1:1 et le grand écran 16:9 avec une recommandation de 1080 par 1920 pour la vidéo verticale, et les clips et shorts Twitch siègent dans les mêmes formats. Exporter les trois à partir d'une source garde le timing d'entrée identique entre eux, ce qui compte car une transition de stream et son clip court apparié sont souvent regardés à la suite.
Un ordre de production qui évite de refaire l'animation
La séquence ci-dessous est ordonnée pour garder les décisions embarrassantes devant le travail coûteux, plutôt que derrière.
Un. Exportez l'illustration en SVG, ou en PNG transparent à la plus grande taille disponible, et confirmez la transparence sur un fond sombre.
Deux. Construisez le recadrage carré de l'avatar et visualisez-le à la taille réelle du chat. C'est le plus petit emplacement et celui qui contraint tout le reste.
Trois. Concevez la composition large de la bannière pour qu'elle survive à un affichage en petite vignette, et vérifiez-la à cette taille plutôt qu'en pleine largeur.
Quatre. Décidez de l'emplacement de superposition et de sa plaque avant de construire l'animation, car une plaque change l'image dans laquelle la marque repose.
Cinq. Construisez la version animée comme une arrivée d'une seconde avec une pause propre, puis ajoutez une boucle sans couture pour l'écran de démarrage.
Six. Exportez les trois ratios plus une image fixe, et testez l'animation en sourdine à chaque taille où elle apparaîtra réellement.
Si vous voulez voir la même séquence appliquée à une autre plateforme, notre analyse des <a href="/blog/youtube-animated-logo">logos animés pour YouTube</a> couvre le cas grand écran en plus de détail, et <a href="/blog/video-logo">ce qu'un logo vidéo doit faire différemment</a> couvre les changements de conception sous-jacents qui s'appliquent à toute chaîne.
Ce qui tourne mal le plus souvent
Cinq échecs récurrents, tous évitables.
La marque est illisible dans le chat. Les avatars de chat sont petits et la marque a été conçue pour la page de chaîne. Résolvez-le en construisant le plus petit recadrage d'abord, comme décrit ci-dessus.
La superposition disparaît contre des images de jeu claires. Une marque à un seul ton disparaîtra toujours contre quelque chose. Utilisez une plaque ou intégrez du contraste avant de construire l'animation.
L'écran de démarrage a une couture de boucle visible. Le spectateur subit cette boucle des dizaines de fois en une session. Corrigez le point de boucle, pas la longueur.
L'animation ne fonctionne qu'avec le son. Vérifiez-la en sourdine, car une bonne part de vos spectateurs arrivent ainsi.
La bannière est belle en pleine largeur et illisible comme vignette. Construisez la petite composition d'abord et laissez la version large suivre.
FAQ
Où va le logo animé sur une chaîne Twitch ?
Les écrans de démarrage de stream, transitions, alertes et la bannière hors ligne si elle est capable de vidéo. Ce sont les surfaces construites pour un moment de marque. Les avatars, badges de chat et le coin de superposition sont presque toujours statiques, donc la version animée doit être traitée comme un ajout plutôt qu'un remplacement.
Quelle taille doit avoir une animation de logo Twitch ?
Exportez 9:16 en 1080 par 1920 pour les emplacements verticaux et 16:9 pour les écrans de démarrage et transitions, les deux à partir d'une source pour que le timing corresponde. L'avatar et la bannière statiques sont des exports séparés avec leurs propres exigences, et les deux doivent être vérifiés à la taille où ils s'affichent réellement plutôt qu'en pleine largeur.
L'animation de logo doit-elle avoir du son ?
Concevez-la pour qu'elle fonctionne sans. Un spectateur arrivant sur une page de chaîne a fréquemment le son coupé, donc la séquence visuelle doit porter par elle-même. Ajoutez l'audio comme un enrichissement pour les spectateurs qui ont du son plutôt que de laisser le timing en dépendre.
Comment empêcher la marque de superposition de disparaître en stream ?
Donnez-lui soit une plaque contenue derrière le symbole, soit intégrez assez de contraste interne pour qu'un élément reste visible contre n'importe quel fond. Une marque à un seul ton superposée à des images de jeu disparaîtra à un moment donné pendant une session, et une ombre portée ne le réparera pas.
Une chaîne Twitch a-t-elle besoin d'un logo séparé de la marque principale ?
Généralement pas un design séparé, mais un ensemble d'exports séparé. La chaîne a besoin d'une marque qui survit à un avatar circulaire, une petite vignette de répertoire, un coin de superposition et un écran de démarrage grand écran. Un seul dessin peut servir les quatre si le plus petit est conçu d'abord.
En résumé
Ouvrez votre chaîne comme le ferait un étranger — à la mauvaise heure, quand elle est hors ligne, dans une fenêtre de navigateur à peu près de la taille d'un téléphone. Ce que vous voyez est ce que la plupart des gens voient. Si la marque est lisible là et que la bannière se lit encore quand elle a la taille d'une vignette, vous avez la fondation, et l'animation est un ajout court et peu coûteux par-dessus. Si ce n'est pas le cas, aucun mouvement ne sauvera une marque qui perd déjà à la taille exacte où elle est la plus montrée.