Um canal da Twitch mostra sua marca em mais lugares que quase qualquer outra plataforma, e a maioria é minúscula. O selo de ao vivo ao lado das mensagens de chat. O avatar na grade de diretório, competindo contra uma centena de outras miniaturas. A arte offline que fica na tela enquanto ninguém transmite. O canto de overlay na transmissão, por cima de imagens de jogo que mudam de cor a cada poucos segundos. E a tela de início de stream, que é a única superfície com espaço suficiente para mostrar uma marca realmente se movendo.
Essa é a restrição que vale internalizar cedo: na Twitch, animação é a exceção e stills minúsculos são a regra. O que significa que uma animação de logo da Twitch tem que ser desenhada em torno de um quadro still que já funciona em todo lugar. Acerte o estático e a animação vira um extra curto e de alto valor. Pule-o e a animação é decoração em cima de uma marca que ninguém consegue ler.
Onde a marca realmente aparece
Vale separar as superfícies pelo quanto de espaço elas dão, porque as decisões de design seguem direto disso.
Miniaturas de diretório e artes offline são as maiores posições estáticas, e a primeira só aparece quando você está ao vivo. O diretório é onde a descoberta acontece, então a marca compete contra todo outro canal da categoria.
Avatares aparecem no chat, em listas de seguidores e ao lado de notificações de raid. Pequenos, repetidos, e muitas vezes a única versão que um espectador regular vê.
O canto de overlay é a única posição sem tamanho fixo, porque depende da sua própria configuração de cena. Também é a mais hostil, porque fica sobre imagens de jogo em movimento — uma marca de overlay tem que se sustentar contra fundos arbitrários em mudança.
Alertas, transições e a tela de início de stream são onde o movimento vive. Essas são as superfícies feitas para um momento de marca em vez de uma identidade persistente, e são onde uma marca animada conquista seu lugar.
A arte offline é a superfície mais ignorada
Quando um canal não está ao vivo, a página ainda existe, e o que um visitante vê é a arte offline mais o avatar mais quaisquer painéis abaixo. Para um canal que transmite algumas noites por semana, essa é a maior parte da vida dele. Uma boa parte dos visitantes de primeira viagem, e quase todos os que chegam de uma busca ou de um link compartilhado na hora errada, encontram o estado offline primeiro.
Duas regras fazem essa superfície funcionar. Primeiro, a composição tem que se ler como completa sem movimento, porque nada nela se mexe. Segundo, tem que funcionar no tamanho de diretório, porque o mesmo asset costuma ser reutilizado como a miniatura que o espectador vê na grade de navegação.
O erro prático aqui é uma arte feita para a visualização em largura total e reutilizada como miniatura. Uma composição que preenche um retângulo largo perde seus elementos mais distintos quando é espremida num card pequeno, e a marca e o wordmark acabam competindo por poucos pixels visíveis. Construa a versão pequena primeiro — esse é o mesmo princípio que se aplica a qualquer exportação de <a href="/logo-animation-templates/logo-video-maker">criador de vídeo com logo</a>, e se aplica com mais força aqui porque tantas posições da Twitch são pequenas.
Fazendo uma animação que sobrevive sendo vista sem áudio
Telas de início de stream e cenas de transição dão autoplay de música ambiente mais vezes do que qualquer um espera, e um espectador que cai numa página de canal frequentemente o faz com o som desligado. A própria Twitch dá autoplay do vídeo ao vivo sem áudio, e o comportamento de mídia em autoplay em navegadores está bem coberto em a documentação de autoplay da MDN — a versão resumida sendo que a reprodução começa sem um gesto do usuário, então o áudio não pode ser presumido.
Isso produz o teste mais útil de todos para uma animação de logo de stream. Mute e assista até o fim. Se as chegadas parecem arbitrárias sem a trilha, o tempo está errado e nenhum trabalho de áudio vai consertar. Se a marca ainda aterrissa com intenção em silêncio, a animação está cumprindo seu papel e a música vira um realce em vez de uma muleta.
O segundo teste é o comportamento de loop, e a Twitch o torna excepcionalmente importante. Uma tela de início de stream roda por minutos, então qualquer animação ali está em loop dezenas de vezes para um único espectador. Uma sequência que se lê bem uma vez pode ficar irritante na décima quinta repetição, e um corte seco no ponto de loop que era invisível na primeira passada vira a coisa que você nota na décima.
O conserto é tornar o loop contínuo em vez de longo. Uma marca que assenta e então se dissolve na própria posição inicial vai fazer loop sem uma costura visível, enquanto uma sequência que abre do preto e volta ao preto anuncia cada reinício. Se você confere só uma coisa numa tela de início, confira o ponto de loop.
Cor, contraste e o problema do overlay
Uma marca de overlay fica por cima de imagens de jogo. Isso significa que o fundo dela é o que o jogo estiver renderizando, mudando continuamente, às vezes claro e às vezes quase preto. Uma marca que depende de contraste com um fundo previsível não sobrevive a isso.
Três abordagens funcionam.
Dê à marca de overlay seu próprio fundo contido — uma placa pequena e sólida ou sutilmente moldada atrás do símbolo. Custa um pouco de área de tela e torna a marca legível independentemente do que está acontecendo embaixo.
Use uma marca com contraste interno forte, para que pelo menos um elemento permaneça visível contra qualquer fundo. Uma marca de tom único vai desaparecer contra imagens do mesmo tom em algum ponto da sessão. Isso não é hipotético; acontece no primeiro stream.
Tire-a inteiramente da ação. A maioria das interfaces de jogo mantém seus próprios elementos de status em cantos previsíveis, e a marca de overlay costuma pertencer a um dos espaços que deixaram livres, que é a mesma lógica por trás das convenções de zona segura que gráficos de transmissão usam há décadas.
Há uma disciplina documentada por trás disso. Um princípio bem estabelecido no uso de marcas é que um logo não deve ser decorado com sombras, bordas ou molduras adicionadas — a orientação de marca do canal do YouTube declara a mesma regra para avatares e arte do canal, e generaliza: se uma marca precisa de moldura para ser visível, o problema de contraste subjacente não foi resolvido. Curiosamente, uma placa de overlay não é decoração nesse sentido — está resolvendo um problema de legibilidade, e é por isso que soa deliberada onde uma sombra projetada soa como erro.
Há também um argumento útil de contenção para manter tudo isso simples. A pesquisa do Nielsen Norman Group sobre animação em interfaces de usuário separa o movimento que comunica uma mudança de estado do movimento que existe por si só e conclui que a segunda categoria custa atenção sem devolver nada. Uma transição de stream comunica que o conteúdo está prestes a começar, o que é uma mudança de estado real. Uma marca que gira, quica, explode e remonta comunica apenas que alguém curtiu a linha do tempo.
Os tamanhos de que você precisa, e quantas vezes
O conjunto de trabalho para um canal é menor do que as pessoas esperam, e a maior parte vem de um desenho.
Um still quadrado para avatares, exportado no maior tamanho que a plataforma aceita e confirmado legível dentro de um corte circular. Um still largo para a arte offline e a miniatura de diretório, construído para que a composição sobreviva sendo mostrada pequena. Uma animação vertical para stories, shorts e qualquer clipe de formato curto cortado de streams. Uma animação widescreen para a tela de início de stream, transições e alertas. E um quadro still exportado da espera limpa da animação, para painéis e qualquer posição que não comporte movimento.
Para as exportações de animação, resolução e proporção importam. A orientação de proporção e resolução do YouTube documenta 9:16 vertical, 1:1 quadrado e 16:9 widescreen junto com uma recomendação de 1080 por 1920 para vídeo vertical, e clips e shorts da Twitch ficam nos mesmos formatos. Exportar os três de uma origem mantém o tempo de entrada idêntico entre eles, o que importa porque uma transição de stream e seu clipe de formato curto pareado costumam ser vistos um atrás do outro.
Uma ordem de produção que evita refazer a animação
A sequência abaixo é ordenada para manter decisões difíceis à frente do trabalho caro, em vez de atrás dele.
Um. Exporte a arte como SVG, ou como um PNG transparente no maior tamanho disponível, e confirme a transparência sobre um fundo escuro.
Dois. Construa o corte quadrado do avatar e veja no tamanho real de chat. Essa é a menor posição e a que restringe tudo mais.
Três. Desenhe a composição larga da arte para que sobreviva sendo mostrada como uma miniatura pequena, e confira nesse tamanho em vez de em largura total.
Quatro. Decida a posição do overlay e sua placa antes de construir a animação, porque uma placa muda o quadro em que a marca fica.
Cinco. Construa a versão animada como uma chegada de um segundo com uma espera limpa, e então adicione um loop contínuo para a tela de início.
Seis. Exporte as três proporções mais um still, e teste a animação sem áudio em cada tamanho em que ela realmente vai aparecer.
Se você quiser ver a mesma sequência aplicada a outra plataforma, nossa análise de <a href="/blog/youtube-animated-logo">logos animados para o YouTube</a> cobre o caso widescreen em mais detalhe, e <a href="/blog/video-logo">o que um logo de vídeo precisa fazer de diferente</a> cobre as mudanças de design subjacentes que se aplicam a qualquer canal.
O que dá errado com mais frequência
Cinco falhas recorrentes, todas evitáveis.
A marca é ilegível no chat. Avatares de chat são pequenos e a marca foi desenhada para a página do canal. Resolva construindo o menor corte primeiro, como descrito acima.
O overlay some contra imagens de jogo claras. Uma marca de tom único sempre vai sumir contra algo. Use uma placa ou construa contraste antes de construir a animação.
A tela de início tem uma costura de loop visível. O espectador aguenta esse loop dezenas de vezes numa sessão. Conserte o ponto de loop, não o comprimento.
A animação só funciona com som. Confira sem áudio, porque uma boa parte dos seus espectadores chega assim.
A arte é linda em largura total e ilegível como miniatura. Construa a composição pequena primeiro e deixe a versão larga seguir.
Perguntas frequentes
Onde o logo animado vai num canal da Twitch?
Telas de início de stream, transições, alertas e a arte offline se ela aceita vídeo. Essas são as superfícies feitas para um momento de marca. Avatares, selos de chat e o canto de overlay são quase sempre estáticos, então a versão animada deve ser tratada como um acréscimo em vez de uma substituição.
Qual deve ser o tamanho de uma animação de logo da Twitch?
Exporte 9:16 em 1080 por 1920 para posições verticais e 16:9 para telas de início e transições, ambos de uma origem para que o tempo coincida. O avatar e a arte estáticos são exportações separadas com seus próprios requisitos, e ambos devem ser conferidos no tamanho que realmente exibem em vez de em largura total.
A animação do logo deve ter som?
Desenhe para que funcione sem. Um espectador que cai numa página de canal frequentemente está com o som desligado, então a sequência visual tem que aterrissar por conta própria. Adicione áudio como um realce para os espectadores que têm som em vez de deixar o tempo depender dele.
Como evito que a marca de overlay suma na transmissão?
Ou dê a ela uma placa contida atrás do símbolo, ou construa contraste interno suficiente para que um elemento permaneça visível contra qualquer fundo. Uma marca de tom único sobrepondo imagens de jogo vai sumir em algum ponto da sessão, e uma sombra projetada não vai consertar.
Um canal da Twitch precisa de um logo separado da marca principal?
Geralmente não um design separado, mas um conjunto separado de exportações. O canal precisa de uma marca que sobreviva a um avatar circular, uma miniatura pequena de diretório, um canto de overlay e uma tela de início widescreen. Um desenho pode servir aos quatro se o menor for desenhado primeiro.
O resumo
Abra seu canal como um estranho abriria — na hora errada, quando está offline, numa janela de navegador mais ou menos do tamanho de um celular. O que você vê é o que a maioria das pessoas vê. Se a marca é legível ali e a arte ainda se lê quando tem o tamanho de uma miniatura, você tem a base, e a animação é um acréscimo curto e barato por cima dela. Se não, nenhuma quantidade de movimento vai resgatar uma marca que já está perdendo exatamente no tamanho em que é mais exibida.