Cómo poner un overlay en OBS (2026): créalo con fuentes de imagen y de navegador

Para poner un overlay en OBS, haz clic en el botón + debajo del panel Sources y agrega una fuente Image (gráficos fijos) o una fuente Browser (una dirección web que te da un widget de alertas o de chat), y luego colócala encima de la fuente del juego en la lista. Que funcione depende de tres cosas: el tipo de fuente correcto, el orden de las capas y un fondo transparente. Los nombres de menú de abajo coinciden con los textos en inglés de OBS Studio 32.2.2 y con la base de conocimiento oficial, revisados el 6 de octubre de 2026, para PC con Windows. Cómo colocar la cámara web lo explicamos en cómo grabar un juego con facecam, así que esta guía se centra en las fuentes Image y Browser.

En resumen: OBS no trae alertas propias

OBS Studio no tiene alertas de stream integradas; sus preguntas frecuentes oficiales indican agregar el overlay de un proveedor externo de alertas como Browser Source. En la práctica, las alertas y las cajas de chat llegan como una dirección que pegas, mientras que un logo o un marco es un archivo que creas tú y cargas. Esta guía no recomienda ningún proveedor ni sitio de plantillas. Si todo el proceso de armar escenas te parece pesado, también vale la pena leer un artículo sobre pasarte a la grabación automática cuando OBS es demasiado complicado.

Agregar overlays de imagen y de navegador, en orden

1. 1Elige la escena y pon primero la fuente del juegoSelecciona la escena en el panel Scenes. El tutorial oficial Stream Layout agrega primero la fuente del juego, con Display Capture, Game Capture (solo Windows), Window Capture o Video Capture, y luego usa Edit > Transform > Fit to screen (Ctrl-F) para ajustarla al lienzo. Los overlays son capas que van encima de eso.
2. 2Agrega la fuente ImageHaz clic en el botón + debajo del panel Sources para abrir la ventana Add Source y elige Image en la lista Source Type. Comprueba que Make source visible esté marcado y haz clic en Add a new Image; la fuente recibe un nombre automático y se abre su ventana de propiedades. La base de conocimiento oficial describe una pantalla más antigua (Create New, un nombre y luego OK), así que tu ventana puede verse un poco distinta. En la ventana de propiedades presiona Browse para elegir el archivo y haz clic en OK. Los formatos compatibles son BMP, TGA, PNG, JPEG y GIF, con canal alfa (transparencia) donde corresponda. La ruta del archivo está en la propiedad llamada Image File.
3. 3Agrega la fuente BrowserEn la misma ventana Add Source elige Browser en la lista Source Type, haz clic en Add a new Browser y pega la dirección del proveedor en el campo URL de la ventana de propiedades que se abre. Los valores predeterminados documentados son Width 800 y Height 600, y FPS 30 es el valor que se usa cuando activas Use custom frame rate (página del 11 de enero de 2022). El tutorial de alertas solo dice que pongas un tamaño adecuado, así que usa como referencia Base (Canvas) Resolution en Settings > Video al ajustar Width y Height, y revisa en la vista previa que nada quede cortado. Para una página guardada en tu propia computadora, activa Local file en su lugar.
4. 4Confirma que el fondo sea transparenteUna imagen solo deja ver el juego a través si el propio archivo se guardó con fondo transparente. Para una fuente Browser, la documentación dice que el Custom CSS predeterminado, body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }, es lo que vuelve transparente el fondo de la página. Si aparece un recuadro sólido, revisa si se modificó ese campo. La base de conocimiento no describe otro método de transparencia.
5. 5Ajusta el tamaño y la posiciónUna fuente seleccionada muestra un recuadro rojo en la vista previa. Arrástrala para moverla y usa los controladores rojos de las esquinas y los bordes para cambiar el tamaño. Para valores exactos abre Edit > Transform > Edit Transform (Ctrl-E en Windows) y usa Position, Size y Crop. Mantener Alt mientras arrastras un controlador recorta, y mantener Ctrl mientras arrastras desactiva el ajuste automático (snapping).
6. 6Define el orden de las capasLas fuentes más arriba en la lista se dibujan sobre las de abajo. Si el overlay queda detrás del juego, selecciónalo y haz clic en la flecha hacia arriba debajo de la lista, o usa el menú Order con Move Up o Move to Top. Con varios overlays, aplica la misma regla a cada uno.
7. 7Revisa la visibilidad, bloquea y actualizaUn ícono de ojo gris significa que la fuente está oculta y uno blanco, que se muestra. Cuando el overlay ya esté colocado, puedes bloquearlo con Lock. Si una fuente Browser sigue mostrando una página vieja, haz clic en Refresh cache of current page en sus propiedades.

Qué fuente usar para cada overlay

Comprobaciones antes de grabar o salir en vivo

• El archivo de imagen es BMP, TGA, PNG, JPEG o GIF, y está guardado con transparencia si la necesitas
• La URL de Browser es exactamente la que muestra la pantalla del proveedor, y Local file está activado o desactivado según lo que quieres
• Width y Height comparados con Base (Canvas) Resolution, sin nada cortado ni vacío en la vista previa
• El overlay está encima de la fuente del juego en la lista Sources
• El ícono de ojo está blanco y el Custom CSS predeterminado no se borró ni se modificó
• Page permissions sigue en el valor predeterminado, Read access to OBS status information, salvo que lo hayas cambiado a propósito

Pasar a la grabación una vez armado el diseño

Todo lo anterior arma un diseño dentro de OBS. Lo que DOR aporta en la etapa de grabación es empezar sin configurar escenas, fuentes ni salida como en OBS: abre un juego compatible como VALORANT y la app gratuita para Windows lo detecta y graba la partida completa en mp4. VALORANT es uno de los siete juegos en los que además las kills se separan en clips automáticamente. Después, la herramienta de recorte de la biblioteca marca un inicio y un final y ofrece salida en 16:9, 9:16 o 1:1, y el editor de DOR Studio en el navegador, que no requiere instalación, te permite agregar texto en la etapa de edición, que es un trabajo distinto al de un overlay en vivo.

Fuentes oficiales

• Guía de fuentes (Sources Guide)
• Fuentes de imagen (Image Sources)
• Fuente de navegador (Browser Source)