Pular para o conteúdo

Design6 min de leitura

Como fazer um overlay para live: tamanhos e erros

Resumindo: um overlay é a camada gráfica que fica por cima do seu jogo e da sua câmera dentro do OBS: moldura da webcam, cenas de abertura e de pausa, elementos do chat e alertas. Ele é desenhado no tamanho da tela base do OBS (o normal é 1920x1080) e organizado em cenas com peças separadas. Este guia explica o que um bom overlay inclui, como montá-lo no OBS sem deformar e os erros que mais aparecem.

O que é um overlay e para que serve

Quando alguém entra na sua live, a primeira coisa que vê é a sua cena: o jogo, a sua câmera e tudo o que os cerca. O overlay é essa “moldura” visual. Ele cumpre três funções:

  • Identidade: fazer com que o seu canal seja reconhecido só de ver um quadro.
  • Organização: deixar claro onde está a câmera, onde vai o jogo e onde aparecem os alertas.
  • Contexto: pode mostrar o último seguidor, um contador ou uma mensagem de “já volto”.

Overlay e alertas não são a mesma coisa: o overlay é o design fixo das suas cenas e os alertas são avisos disparados por eventos. Os alertas ficam para o guia de alertas.

O que um overlay completo inclui

Um pacote de overlay costuma ser montado como uma família de cenas com o mesmo estilo:

Peça Para que serve
Cena de abertura (“starting soon”) Tela enquanto você espera o pessoal chegar
Cena de jogo Moldura para a webcam, bordas e área livre para o jogo
Cena de só conversa Câmera grande para Just Chatting ou bate-papo
Cena de pausa (“BRB”) Aviso de que você já volta
Cena de encerramento Despedida, redes e próxima live
Moldura de webcam e detalhes Quadro que emoldura a sua câmera com a sua paleta
Elementos de chat e eventos Caixa de chat, lista de eventos ou etiquetas com o último seguidor

Segundo o guia de alertas do OBS, os elementos dinâmicos mais comuns são os alertas, a lista de eventos, a caixa de chat, as etiquetas com informações soltas (último seguidor, último inscrito) e o “copo” que se enche com ícones de eventos.

Em que tamanho desenhar

Não existe um tamanho de overlay imposto pelas plataformas: o que manda é a tela base do OBS. Segundo o guia geral do OBS, a tela é o espaço onde você posiciona as suas fontes e costuma coincidir com a resolução do seu monitor ou do seu jogo. Por isso a regra é simples:

  1. Desenhe cada cena no mesmo tamanho da sua tela base. Se a sua tela é 1920x1080, desenhe em 1920x1080.
  2. Mantenha a tela fixa. Mudá-la depois obriga você a reposicionar todas as fontes. Se precisar transmitir em resolução menor, baixe só a resolução de saída, não a tela.
  3. Lembre-se do teto da sua plataforma. A Kick aceita até 1920x1080 e 60 fps, e as recomendações da Twitch vão até 1080p60. Um overlay 4K não serve se você vai transmitir em 1080p.

Se o overlay é uma página web (fonte Navegador)

Muitos overlays animados e todos os alertas funcionam com uma fonte do tipo Navegador (Browser Source). Segundo a documentação oficial do OBS:

  • O tamanho padrão é 800x600, então você precisa ajustá-lo à mão para o tamanho do seu overlay (por exemplo, 1920x1080).
  • O CSS padrão deixa o fundo transparente e remove margens e barras de rolagem.
  • Você pode ativar “Desligar a fonte quando não estiver visível” (Shutdown source when not visible) para a página ser descarregada quando não estiver na tela, e “Atualizar o navegador quando a cena for ativada” para ela reiniciar toda vez que você troca de cena.

Imagens e transparência

Para peças estáticas (molduras, bordas, textos), use uma imagem com fundo transparente que ocupe a tela inteira. Assim, ao colocá-la como fonte de imagem, ela cobre a cena toda, e o que está “vazio” deixa ver o jogo ou a câmera por baixo.

Os tamanhos do seu canal também contam

O overlay vive dentro da live, mas o seu canal tem peças visuais fora do OBS. Na Twitch, por exemplo, a ajuda oficial de configuração do canal indica:

  • Banner de perfil recomendado: 1200x480 px; concentre a arte à esquerda porque a página se ajusta conforme a janela de cada pessoa.
  • Painéis de informação: imagens de 320 px de largura no máximo (e 300 px de altura), com menos de 2,9 MB.
  • Foto de perfil: JPEG, PNG ou GIF de até 10 MB.

Se você usa as mesmas cores, fonte e logo no overlay, nos painéis e no banner, o seu canal parece uma marca só. Falamos de como conseguir isso no guia de branding.

Como montar no OBS, passo a passo

  1. Fixe a sua tela base em Configurações > Vídeo (por exemplo, 1920x1080).
  2. Crie uma cena para cada situação: abertura, jogo, conversa, pausa e encerramento.
  3. Adicione primeiro as fontes de fundo (jogo, câmera) e por cima a imagem do overlay com transparência.
  4. Estique a moldura da webcam até o tamanho do quadro do overlay; corte com o filtro Cortar/Preencher (Crop/Pad) se for preciso.
  5. Adicione as suas fontes de navegador (alertas, chat, etiquetas) no topo de tudo, para que nenhuma imagem as cubra.
  6. Faça um teste curto de transmissão ou gravação e confira que nada cobre elementos do jogo.

Para a configuração completa do OBS, incluindo CBR e bitrate, veja o guia do OBS.

Erros comuns

  • Cobrir a interface do jogo. Confira no seu jogo onde ficam o minimapa, a vida e os textos importantes antes de desenhar bordas grandes.
  • Webcam minúscula ou quadros que não encaixam. Se a moldura não coincide com a sua câmera, o resultado parece desleixado. Meça o quadro e ajuste a câmera a ele.
  • Elementos demais ao mesmo tempo. Cada contador e cada caixa extra suja a imagem e tira o foco de você e do jogo.
  • Texto pequeno demais. No celular, uma letra de 12 px é ilegível. Use poucas palavras e tamanhos generosos.
  • Alertas duplicados. Se você copia a fonte de alertas para várias cenas e ainda deixa outra dentro do overlay, o alerta toca duas vezes. Mantenha uma só.
  • Misturar estilos. Uma moldura neon com painéis minimalistas e emotes em outro estilo dá cara de canal improvisado.

Overlays feitos para o seu canal

Na Epik você pode pedir um overlay avulso por US$ 20 cada. O pacote Boost inclui logo, 3 overlays, 3 painéis e 1 banner (para uma única plataforma), e o pacote Epik soma overlays, frames, painéis, banners, emotes, emblemas de inscrição, alertas, TTS e configuração de OBS multiplataforma. Tudo é pago completo pelo PayPal e a gente começa com o seu briefing.

Continue lendo

Pronto para montar seu canal?

Responda três perguntas e diremos qual pacote combina com você, com preço e condições.

Descubra seu pacote em 1 minuto
Falar no Discord