Como colocar overlay no OBS (2026): monte o seu com fontes de imagem e de navegador

Para colocar um overlay no OBS, clique no botão + embaixo do painel Sources e adicione uma fonte Image (gráficos fixos) ou uma fonte Browser (um endereço da web fornecido por um widget de alertas ou de chat) e depois deixe ela acima da fonte do jogo na lista. Três coisas decidem se vai funcionar: o tipo certo de fonte, a ordem das camadas e um fundo transparente. Os nomes de menu abaixo seguem os textos em inglês do OBS Studio 32.2.2 e a base de conhecimento oficial, conforme verificado em 6 de outubro de 2026, para PCs com Windows. O posicionamento da webcam está em como gravar jogo com facecam, então este guia fica só nas fontes Image e Browser.

Resumo: o OBS não traz alertas próprios

O OBS Studio não tem alertas de live embutidos; o FAQ oficial manda adicionar o overlay de um serviço de alertas de terceiros como Browser Source. Na prática, isso quer dizer que alertas e caixas de chat chegam como um endereço que você cola, enquanto um logo ou uma moldura é um arquivo que você mesmo faz e carrega. Este guia não recomenda nenhum serviço nem site de templates. Se o processo inteiro de montar cenas parecer pesado, vale ler também um post sobre trocar para gravação automática quando o OBS é complicado demais.

Adicionando overlays de imagem e de navegador, em ordem

1. 1Escolha a cena e coloque a fonte do jogo primeiroSelecione a cena no painel Scenes. O tutorial oficial de layout de live adiciona primeiro a fonte do jogo, via Display Capture, Game Capture (só no Windows), Window Capture ou Video Capture, e depois usa Edit > Transform > Fit to screen (Ctrl-F) para ajustá-la à tela. Os overlays são camadas que ficam por cima disso.
2. 2Adicione a fonte ImageClique no botão + embaixo do painel Sources para abrir a janela Add Source e escolha Image na lista Source Type. Confira se Make source visible está marcado e clique em Add a new Image; a fonte ganha um nome automático e a janela de propriedades abre. A base de conhecimento oficial descreve uma tela mais antiga (Create New, um nome e depois OK), então a sua janela pode estar um pouco diferente. Na janela de propriedades, clique em Browse para escolher o arquivo e em OK. Os formatos suportados são BMP, TGA, PNG, JPEG e GIF, com suporte a alfa (transparência) quando se aplica. O caminho do arquivo fica na propriedade chamada Image File.
3. 3Adicione a fonte BrowserNa mesma janela Add Source, escolha Browser na lista Source Type, clique em Add a new Browser e cole o endereço do serviço no campo URL da janela de propriedades que abrir. Os padrões documentados são Width 800 e Height 600, e FPS 30 é o valor usado quando Use custom frame rate está ligado (página de 11 de janeiro de 2022). O tutorial de alertas só diz para definir um tamanho adequado, então use a Base (Canvas) Resolution em Settings > Video como referência ao ajustar Width e Height e observe na prévia se algo ficou cortado. Uma página salva no seu próprio computador precisa do Local file ligado.
4. 4Confirme que o fundo está transparenteUma imagem só deixa o jogo aparecer por trás se o próprio arquivo foi salvo com fundo transparente. Para a fonte Browser, a documentação diz que é o Custom CSS padrão, body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }, que deixa o fundo da página transparente. Se aparecer um bloco sólido, confira se esse campo foi editado. A base de conhecimento não descreve outro método de transparência.
5. 5Ajuste tamanho e posiçãoUma fonte selecionada mostra uma caixa delimitadora vermelha na prévia. Arraste para mover e use as alças vermelhas dos cantos e das bordas para redimensionar. Para valores exatos, abra Edit > Transform > Edit Transform (Ctrl-E no Windows) e use Position, Size e Crop. Segurar Alt enquanto arrasta uma alça corta a imagem, e segurar Ctrl enquanto arrasta desliga o encaixe automático.
6. 6Defina a ordem das camadasAs fontes mais acima na lista são desenhadas por cima das que estão embaixo. Se o overlay estiver atrás do jogo, selecione-o e clique na seta para cima embaixo da lista, ou use o menu Order com Move Up ou Move to Top. Com vários overlays, aplique a mesma regra a cada um.
7. 7Confira visibilidade, trava e atualizaçãoO ícone de olho cinza quer dizer que a fonte está oculta, e o branco, que está visível. Depois de posicionar um overlay, você pode travá-lo com Lock. Se uma fonte Browser continuar mostrando uma página antiga, clique em Refresh cache of current page nas propriedades dela.

Qual fonte combina com cada overlay

Checagem antes de gravar ou entrar ao vivo

• O arquivo de imagem é BMP, TGA, PNG, JPEG ou GIF e foi salvo com transparência, se você precisa dela
• A URL da fonte Browser é exatamente a que aparece na tela do serviço, e o Local file está ligado ou desligado como você quer
• Width e Height comparados com a Base (Canvas) Resolution, sem nada cortado ou vazio na prévia
• O overlay está acima da fonte do jogo na lista Sources
• O ícone de olho está branco e o Custom CSS padrão não foi apagado nem alterado
• As Page permissions continuam no padrão, Read access to OBS status information, a menos que você tenha mudado de propósito

Passando para a gravação depois que o layout está pronto

Tudo acima monta um layout dentro do OBS. Na etapa de gravação, o DOR oferece um começo sem a configuração de cenas, fontes e saída do OBS: abra um jogo suportado, como o VALORANT, e o app gratuito para Windows detecta o jogo e grava a partida inteira em mp4. O VALORANT é um dos sete jogos em que os destaques de abates também viram clipes automaticamente. Depois, a ferramenta de recorte de My Clips define início e fim e oferece saída em 16:9, 9:16 ou 1:1, e o editor DOR Studio no navegador, sem instalar nada, permite colocar texto na hora de editar o vídeo.

Fontes oficiais

• Guia de fontes (Sources Guide)
• Fontes de imagem (Image Sources)
• Fonte de navegador (Browser Source)