Criar emblemas de bits da Twitch

As badges de bits do Twitch usam os mesmos três tamanhos quadrados das badges de inscritos — 72, 36 e 18 pixels, cada uma com menos de 25 KB. Recorte uma vez, exporte as três tamanhos como um ZIP e repita por cada nível de cheer. Cada arquivo é medido contra o limite antes do download.

Só local

Solte um PNG, JPG, WebP ou GIF

ou em qualquer lugar da página · Escolher um arquivo · 100 MB

Aceitos: PNG, JPG, JPEG, WebP, GIF, AVIF

Badges de bits marcam quanto um espectador deu cheer no seu canal, e vêm como um conjunto: arte separada para cada marco de cheer, desde os primeiros cem bits para cima. Cada desse conjunto precisa das mesmas três exportações quadradas — 72, 36 e 18 pixels — e cada arquivo deve permanecer abaixo de 25 KB.

O conjunto é o que torna isso trabalhoso para fazer manualmente. Níveis de cheer multiplicados por três tamanhos dá vinte e sete exportações, cada uma precisando de uma verificação de tamanho, e fazer isso em um editor de imagens geral leva uma tarde. Um recorte por nível aqui produz um ZIP nomeado com três arquivos, o que transforma a tarde em alguns minutos.

O problema de design é o mesmo que para as badges de inscritos e um pouco mais difícil: os níveis de bits são tradicionalmente distinguidos por cor, e cores que parecem distintas a 72 pixels podem convergir a 18 pixels contra um fundo escuro do chat. A página exporta o menor tamanho para que você possa verificar antes de confirmar o conjunto.

Badges de inscritos usam a geometria idêntica, então a página de badge de inscritos cobre metade desse trabalho.

Para qualquer coisa que a plataforma não determine, o resto das ferramentas de imagem lidam com tamanhos da sua escolha.

Um conjunto de badges de bits, nível por nível

Twitch define os marcos de cheer e espera arte para cada um que você escolher para personalizar. Os níveis exatos disponíveis dependem do seu status de afiliado ou parceiro; a geometria não muda entre eles.

Item	Requisito	Observação
Tamanhos por nível	72, 36 e 18 px	Todos quadrados, todos obrigatórios
Tamanho do arquivo	Menos de 25 KB cada	Aplicado no envio
Formato	PNG	Fundo transparente esperado
Níveis	Um conjunto de imagens por marco de cheer	Personalize quantos quiser

Mantendo os níveis distintos a dezoito pixels

A abordagem convencional é uma rampa de cores: cinza, roxo, verde, azul, vermelho, e assim por cima. Isso funciona a 72 pixels e pode falhar a 18, onde um roxo saturado e um azul saturado ao lado de texto branco em um fundo escuro são genuinamente difíceis de distinguir na visão periférica.

Duas coisas ajudam. Varie o brilho assim como a matiz, para que os níveis diferem em contraste contra o fundo do chat e não apenas na cor. E mude ligeiramente o contorno nos níveis mais altos — uma coroa, um ponto extra, um contorno diferente — para que a forma carregue parte da distinção que a cor sozinha não consegue.

Varie o brilho na rampa, não apenas a matiz.
Dê aos níveis superiores um formato de contorno distinguível além de uma cor.
Verifique as exportações de 18 pixels lado a lado antes de enviar o conjunto.
Teste contra um fundo escuro; o chat é escuro para a maioria dos espectadores.

Por que o limite de bytes raramente é um problema aqui

A arte de badge de bits é plana e simples por necessidade, e arte plana a 72 pixels quadrados é alguns quilobytes como PNG — longe do limite de 25 KB. O limite se torna um problema apenas quando um nível é fornecido como uma joia renderizada ou uma textura fotográfica, e esses níveis dificilmente são legíveis a 18 pixels de qualquer forma.

Quando um arquivo realmente excede o limite, a página avisa e o remédio é simplificar ou exportar como WebP, onde a busca por qualidade pode encontrar um ajuste. PNG não tem um controle de qualidade para girar, e é exatamente por isso que a medição é relatada em vez de ser ignorada silenciosamente.

Trabalhando em um conjunto de forma eficiente

Solte o primeiro nível, defina o recorte, exporte, depois solte o próximo arquivo — as configurações de recorte permanecem onde você as deixou, então um conjunto desenhado em uma tela consistente precisa da moldura decidida apenas uma vez. Cada ZIP é nomeado para a badge em vez do nível, então renomeie à medida que se se estiver exportando muitas em uma única sessão.

Perguntas frequentes

Qual o tamanho das badges de bits do Twitch?

72 por 72, 36 por 36 e 18 por 18 pixels, o mesmo trio que as badges de inscritos usam, com o mesmo limite de 25 KB por arquivo. Um conjunto completo de cheer precisa desse trio para cada nível de marco que você escolher para personalizar.

Quantos níveis de badge de bits eu preciso criar?

Apenas os que você quiser personalizar. Twitch fornece arte padrão para cada marco de cheer, e um canal pode substituir tão poucos ou tantos quanto desejar. A maioria dos canais começa com os níveis mais baixos, que são os que os espectadores realmente atingem.

Por que meus níveis de cheer parecem iguais no chat?

Porque uma rampa apenas de matiz perde sua separação a 18 pixels contra um fundo escuro. Varie o brilho no conjunto assim como a cor, e dê aos níveis superiors um contorno ligeiramente diferente, para que a forma e o contragem levem a distinção que a matiz sozinha não consegue nesse tamanho.

As badges de bits devem ter fundo transparente?

Sim. Elas ficam inline ao lado de um nome de usuário em um fundo que difere entre temas e sobreposições, então um retângulo sólido atrás da arte é proeminente. Exporte PNG ou WebP e mantenha a borda alfa limpa — um halo suave aparece como uma borda em tamanhos pequenos.

Posso usar a mesma arte para bits e inscritos?

Tecnicamente sim, já que os tamanhos correspondem, mas isso derrota o propósito: os dois tipos de badge dizem aos espectadores coisas diferentes, e um canal onde cheering e subscribing parecem idênticos perde o sinal que ambos deveriam enviar. Reutilize o estilo, não a forma.

Esta página envia meu conjunto de badges para algum lugar?

Não. Todo recorte, redimensionamento, codificação e ZIP acontece dentro desta aba do navegador, sem servidor envolvido em nenhum momento. Para um conjunto encomendado que ainda não foi anunciado, isso é verificável em vez de apenas alegado — o painel de Rede permanece vazio.

Equipe ToolsByUs · Como verificamos nossas ferramentas