Guia OverlayGO para OBS Studio

Integra tu overlay HTML y configura tu camara paso a paso.

🌐 EN
1

Usar tu Overlay HTML (Archivo Local)

Exportaste tu overlay como un archivo HTML individual (y su mascara PNG). OBS puede leerlos directamente desde tu ordenador sin necesidad de subirlos a internet, garantizando fluidez total a 60 FPS.

Agregar Fuente Navegador

En tu escena de OBS, ve al panel Fuentes, haz clic en + y selecciona Navegador (Browser). Asignale un nombre descriptivo.

Marcar Archivo Local

En las propiedades de la fuente, marca Archivo local . Luego haz clic en Explorar y busca tu archivo OverlayGO.html.

Consejo de resolucion: En las propiedades del navegador de OBS, configura el ancho y alto para que coincidan o sean un poco superiores al tamano que asignaste al overlay. Asi tendras margen para desplazarlo a la posicion deseada dentro de la escena.
Importante — Orden de capas: Para que se vean el indicador REC, el texto del nickname, el glow y otros detalles internos del overlay, tu fuente de camara debe estar por debajo de la fuente del overlay en la lista de fuentes de OBS. El overlay siempre va arriba.
2

Ajuste, Recorte y Mascara de Camara

Si tu camara es vertical (9:16) y sobresale de tu marco, o necesitas recortar margenes sobrantes, sigue este orden profesional:

Mascara de Mezcla

En la camara añade el filtro Imagen/Mascara de mezcla y selecciona la mascara PNG que descargaste (del mismo tamano). En Tipo elige Mascara alfa (canal alfa) y en Color pon blanco (#ffffff) . Asi los bordes se recortan automaticamente con la forma de tu overlay.

Recorte Rapido (ALT)

Selecciona tu camara en la vista previa, mantén ALT y arrastra los controladores de los bordes (se pondran verdes). Permite recortar excedentes de forma inmediata.

Filtro Crop / Pad

Para precision numerica, clic derecho en tu camara > Filtros > Recortar/Pad (Crop/Pad) y especifica cuantos pixeles sustraer de cada lado.

OverlayGO! — Guia de configuracion rapida para OBS Studio