Estilizar um Overlay

O que é esta página

Cada overlay é estilizado no mesmo editor: seções à esquerda, uma prévia ao vivo no meio, as configurações da seção escolhida à direita. Alertas, chat, metas, o mascote, o overlay de entrada, listas, temporizadores, o quadro de leilão, a roleta, a chave, o carrossel, a barra do pote e o quadro de desafios todos o compartilham, então o que você aprende em uma tela funciona nas demais.

O visual pertence a um overlay. Dois overlays de chat na mesma lista são estilizados separadamente, e copiar um overlay copia seu visual junto.

Nada é salvo até você pressionar Salvar

As alterações vivem apenas na tela. Mova os controles deslizantes, experimente um visual pronto, escolha cores — e se você não gostar do resultado, saia: Salvar no cabeçalho da página é o que o grava.

Sair com alterações não salvas pergunta primeiro. Essa pergunta aparece tanto quando você pressiona Voltar à lista dentro de um cartão de widget quanto quando você muda para outra seção no menu esquerdo.

Os visuais prontos funcionam da mesma forma: Aplicar coloca o visual na tela, mas não grava nada. Nada é perdido até você salvar, e nada é mantido até que você o faça.

O botão de redefinir não é exceção. Redefinir Personalização, ou Redefinir aparência em alguns overlays, só coloca o visual padrão no editor. O overlay no OBS mantém o visual antigo até você pressionar Salvar, e sair sem salvar desfaz também a redefinição.

Os tamanhos são digitados, não só arrastados

Cada tamanho, margem, arredondamento e espessura mostra o número à direita da legenda, e esse número é um campo: clique nele e digite. As setas movem o valor um passo, com Shift dez.

O deslizante embaixo continua ali para ajustar no olho, e um número maior que a escala dele estica a própria escala. Nada para em um limite escolhido por nós, e isso importa em uma fonte 4K, onde as margens e o texto precisam ser bem maiores do que em 1080p.

A unidade fica na legenda, Tamanho do texto (px), e nunca dentro do campo. Um tamanho sem a unidade não é uma regra válida: o navegador a descartaria e a sobreposição voltaria ao valor embutido enquanto a tela ainda mostra o seu número.

Um campo que não faz nada no modo atual fica escondido, em vez de se mexer à toa. Nos alertas, se em Aparência da mídia o campo Tamanho estiver em Do tamanho do cartão, somem Largura, Altura e Ajuste. Escolha Eu defino de novo e eles reaparecem com os valores que tinham.

Visuais prontos

Os visuais prontos ficam na lista Estilização, em Integrado. Neon, Minimalista e Retrô existem em cada overlay, exceto o mascote, e usam as mesmas cores, fontes e bordas. Aplique um a todos os seus overlays e eles parecerão um conjunto, não uma dúzia de widgets separados. O mascote não tem visuais prontos: a lista dele contém apenas os seus próprios modelos.

Os overlays que têm uma seção Material (veja abaixo) também listam os doze materiais em Integrado, de Lápis vivo a Vidro perolado. Um visual assim traz as próprias cores, fontes e raio dos cantos junto com o seu material, então é o jeito mais rápido de ver como um material fica.

Aplicar um visual também limpa o que ele não define, então o resultado não depende do que você estava ajustando antes.

Abaixo deles está a lista de seus próprios modelos: o campo de nome com Salvar mantém o visual que está na tela agora, e Excluir remove um modelo. Um modelo salvo de um overlay pode ser aplicado a outro, e o editor traduz o que pode. O material e o efeito de contorno viajam como estão, para qualquer overlay que tenha essas seções.

Material

Alertas, Sobreposição de Chat, Metas de Doação, Listas e Temporizadores têm uma seção Material, e quatro overlays de extensões também: Sobreposição do placar e Sobreposição da roda do leilão, Sobreposição de barra do pote e Sobreposição de lista de desafios do carrossel. O mascote, Entrada, Sobreposição do chaveamento e Sobreposição de carrossel não têm. Na lista de seções ela fica logo depois da parte que pinta primeiro, que na maioria dos overlays é Painel.

Um material desenha essa parte em um estilo artístico pronto: Lápis vivo, Aurora boreal, Colagem de papel, Planta técnica, Blocos, Terminal de campo, Tático, Juramento dourado, Vidro transparente, Vidro fosco, Vidro convexo ou Vidro perolado. Nenhum o desliga. O que ele pinta depende do overlay:

• alertas: o cartão, e uma borda em volta da imagem ou do vídeo, cuja largura é Largura da moldura da mídia na mesma seção (de 4 a 32 px);
• chat: cada mensagem;
• metas de doação: a barra e o preenchimento, e também o painel depois que ele tem uma cor, uma borda ou uma sombra (ele começa transparente);
• listas: a barra;
• temporizadores: a placa atrás dos dígitos;
• o quadro de leilão: o cabeçalho, o painel e cada linha de lote;
• a roda do leilão: só a Placa de resultado embaixo da roda;
• a barra do pote: o painel e a barra;
• a lista de desafios: cada linha.

1. Abra o visual do overlay e escolha Material na lista de seções.
2. Escolha um material. Ele mantém as suas cores, fontes e tamanhos: a cor de fundo de cada parte que ele pinta continua vindo da seção dessa parte.
3. Abaixo da escolha ficam os ajustes desse material: os detalhes dele (linhas, granulação, reflexos, ornamentos) com os seus tamanhos e cores, e um interruptor para cada detalhe que pode ser retirado. Lápis vivo também tem Espessura do lápis.
4. Lápis vivo, Aurora boreal, Terminal de campo e Juramento dourado podem se mexer. Movimento decorativo liga ou desliga isso. Escolhido nesta seção, um material começa com o movimento Desligado; os visuais prontos de Lápis vivo, Aurora boreal e Terminal de campo o deixam Ligado. Os visuais em movimento são desenhados pelo OBS, no computador que codifica a sua live, e é por isso que o movimento espera você pedir.
5. Pressione Salvar.

Enquanto um material está escolhido, o editor esconde os campos que ele torna inúteis: a borda de cada parte que ele pinta, e a sombra também, exceto em Aurora boreal, Colagem de papel, Planta técnica e nos quatro visuais de vidro. Nos alertas, o fundo, o espaço interno, o contorno e a sombra de Moldura da mídia também se escondem, porque ali o material desenha a própria borda. Escolha Nenhum e esses campos voltam com os valores que tinham. Em Tático e Blocos, Raio do canto define o tamanho do canto cortado ou em degraus, em vez de uma curva.

Efeito de contorno

Os mesmos overlays têm uma seção Efeito de contorno: um efeito em movimento que corre em volta da borda do overlay. Essa borda é o cartão do alerta, a meta inteira, a barra da lista, a placa do temporizador, a barra do pote ou a placa da roda, e cada mensagem do chat, cada linha da lista de desafios, o cabeçalho e cada linha de lote do quadro de leilão. O efeito é escolhido separadamente do material e funciona com ou sem um.

1. Escolha Efeito de contorno na lista de seções.
2. Escolha em Efeito: Elétrico, Cometa, Borda líquida, Fogo, Geada, Holograma, Moldura de tinta, Bolhas, Partículas magnéticas ou Montagem de fragmentos. Nenhum o desliga.
3. Defina Cor do efeito e Velocidade do efeito. A maioria dos efeitos também tem Brilho, Tamanho do movimento e uma quantidade própria (cometas, chamas, bolhas e assim por diante).
4. Em Quando toca, O tempo todo mantém o efeito rodando, e A cada evento o faz piscar por Duração do efeito quando algo acontece naquele overlay. Montagem de fragmentos começa em A cada evento, os outros em O tempo todo.
5. Pressione Salvar.

O evento pertence ao overlay: um alerta aparece, chega uma mensagem no chat, uma meta cresce, o texto de uma lista muda (não quando a fonte carrega pela primeira vez), um temporizador ganha ou perde tempo, um cartão sai na barra do pote, aparece um desafio novo, a roda mostra o resultado. O quadro de leilão dá às suas seções os nomes das partes: Efeito do cabeçalho toca Quando a roda para, e Efeito dos lotes toca Quando o lote é sorteado.

Elétrico é a borda elétrica que os alertas definiam antes com Efeito de Borda em Painel, um campo que não existe mais. Um alerta que estava com ele ligado o encontra aqui, com a mesma cor, velocidade e caos. A imagem ou o vídeo de um alerta tem um efeito próprio: Efeito em Moldura da mídia oferece os mesmos dez efeitos, escolhidos separadamente do efeito do cartão.

Um efeito de contorno corre pelo lado de fora da borda, então em uma Fonte de Navegador cortada rente ao overlay parte dele fica fora do quadro. Margens da borda, abaixo, dá espaço para ele.

No OBS, os materiais e os efeitos continuam se mexendo mesmo que os efeitos de animação estejam desligados nas configurações do Windows: essa configuração é sobre a sua tela, não a dos seus espectadores. A prévia no editor segue essa configuração, então com os efeitos de animação do Windows desligados os materiais e os efeitos ficam parados ali, todos menos Elétrico.

Margens da borda

Cada overlay, exceto os alertas, tem uma seção Margens da borda no seu visual, com Em cima e embaixo e À esquerda e à direita em pixels. É uma margem transparente entre as bordas da fonte do navegador e o que o overlay desenha, para que brilho, sombras, efeitos de contorno e animações de entrada não sejam cortados pelo OBS. Ela começa em zero, então um overlay que já está na sua cena não se mexe. A exceção é o quadro de leilão: ali a seção se chama Distância da borda da fonte, e começa em 16 px em cima e embaixo e 28 px à esquerda e à direita, porque o quadro já mantinha uma margem própria. Os alertas mantêm os mesmos espaços dentro da seção Posição.

Cores

O seletor de cores contém duas linhas.

Minhas cores permanecem até você removê-las. O + no final da linha mantém a cor que você escolheu agora; o x no canto de uma cor a remove. Coloque as cores do seu canal aqui uma vez e elas estarão à mão em cada overlay.

Recentes são as últimas doze cores que você usou em qualquer lugar no aplicativo — a linha flui por conta própria, uma nova cor empurrando a mais antiga para fora. É por isso que as cores com as quais você se importa pertencem à linha acima.

Ambas as linhas são compartilhadas em todo o aplicativo: um tom escolhido no overlay de chat está a um clique de distância nos alertas.

Cada cor das seções próprias do overlay tem um controle deslizante de transparência ao lado: texto, planos de fundo, bordas e sombras. As cores dos detalhes de um material e dos efeitos de contorno são sólidas, todas menos a cor de Elétrico. Um fundo de duas cores (um gradiente) tem um controle deslizante para cada uma das suas cores, com a porcentagem ao lado, então um fundo pode ir do sólido ao transparente. O campo de código no seletor também aceita uma cor com a sua transparência, como #00000080 para um preto meio transparente, ou números como 15,12,30. A conta-gotas ao lado do campo de código escolhe uma cor de qualquer lugar na tela.

O que ele não pode fazer

• Não há desfazer dentro do editor. O que o protege é que nada é gravado até Salvar — sair sem salvar é o caminho de volta.
• Um visual pronto não pode ser aplicado a todos os overlays de uma vez; é aplicado por overlay.
• Os modelos não são pastas: são uma lista plana compartilhada por todos os overlays.
• A prévia mostra o overlay, não sua cena, e ela não pergunta ao OBS qual é o tamanho da sua fonte. Quem diz é você: Tamanho da fonte embaixo da prévia começa em 1920 × 1080, oferece os tamanhos comuns e Tamanho próprio, e a prévia desenha uma moldura desse tamanho, reduzida para caber. Cada overlay guarda o seu próprio tamanho.
• Material e Efeito de contorno não estão em todos os overlays: o mascote, Entrada, Sobreposição do chaveamento e Sobreposição de carrossel não têm essas seções.
• A conta-gotas não está disponível em todas as janelas: onde o navegador não a oferece, o botão não é mostrado.