Tu pack listo en OBS o Streamlabs, paso a paso.

Capítulo 00

Antes de empezar

Todo funciona en tu ordenador: no se envía nada a ningún sitio, las páginas funcionan sin conexión. Esto es lo que contiene la carpeta.

1. Descomprime en una carpeta que no vayas a mover

   Hecho

   En Windows: clic derecho en el ZIP, «Extraer todo», y elige una carpeta estable, por ejemplo Documentos\Stream. Trabaja siempre desde la carpeta descomprimida, nunca desde dentro del ZIP.

2. Por qué no hay que moverla

   Hecho

   Cada fuente de tu programa apunta a un archivo de esta carpeta, por su ruta completa en tu disco. Si mueves o renombras la carpeta, la fuente ya no encuentra su página y se queda vacía: tendrás que rehacer la ruta de cada fuente (ver el capítulo Solución de problemas).

3. Mantén la estructura tal cual

   Hecho

   La carpeta polices/ tiene que quedar junto a scenes/, y dos niveles por encima de elements/onde/, como en el ZIP. No saques una página sola de la carpeta: el texto cambiaría de tipografía.

4. Compruébalo en tu navegador

   Hecho

   Haz doble clic en scenes/onde-demarrage.html: la escena se abre en tu navegador y se mueve. La carpeta está lista. Después elige tu programa arriba de la página: todas las instrucciones siguen esa elección.

Capítulo 01

Añadir una escena de pantalla completa

Inicio, pausa, intermedio, final, desconectado y horario: páginas de 1920 x 1080 que cubren toda la pantalla. Todas se colocan igual, una escena para cada una.

1. Crea una escena por pantalla

   Hecho

   En el panel «Escenas», haz clic en +, ponle nombre a la escena (por ejemplo «Inicio») y acepta.

   OBS Studio

   Escenas

   • Inicio
   • En juego
   • Just chatting

   +−

   Fuentes

   • Captura de juego
   • Webcam

   +−⚙

   Mezclador de audio

   Streamlabs Desktop

   Escenas+

   • Inicio
   • En juego
   • Just chatting

   Fuentes+

   • Captura de juego
   • Webcam

2. Añade una fuente de navegador

   Hecho

   Con la escena seleccionada, haz clic en + en «Fuentes» y elige «Navegador». Ponle un nombre y luego Aceptar.Con la escena seleccionada, haz clic en + (Agregar fuente) en «Fuentes», elige «Fuente de navegador» y luego «Agregar fuente». Ponle nombre y acepta.

   OBS Studio

   Escenas

   • Inicio
   • En juego
   • Just chatting

   +−

   Fuentes

   • Captura de juego
   • Webcam

   +−⚙

   Mezclador de audio

   Streamlabs Desktop

   Escenas+

   • Inicio
   • En juego
   • Just chatting

   Fuentes+

   • Captura de juego
   • Webcam

   OBS Studio

   Captura de juegoImagenNavegadorEscenaDispositivo de captura de video

   Streamlabs Desktop

   Agregar fuente

   Captura de juegoFuente de navegadorImagenArchivo multimedia

   Agregar fuente

3. Elige el archivo de la pantalla

   Hecho

   Marca «Archivo local», haz clic en «Examinar» y elige scenes/onde-demarrage.html (o la página de la pantalla que quieras, mira la tabla).

   Si la opción «Archivo local» no aparece, pega la dirección completa en el campo «URL» (capítulo 04).

   Propiedades · OBS Studio

   Archivo local

   Archivo local…/scenes/onde-demarrage.htmlExaminar

   Ancho1920

   Alto1080

   Apagar fuente cuando no sea visible

   Actualizar el navegador cuando la escena se active

   CancelarOK

   Propiedades · Streamlabs Desktop

   Archivo local

   Archivo local…/scenes/onde-demarrage.htmlExaminar

   Ancho1920

   Alto1080

   Apagar fuente cuando no sea visible

   Actualizar navegador cuando se active la escena

   CancelarOK

4. Ancho 1920, alto 1080

   Hecho

   Todas las pantallas miden 1920 x 1080. Una fuente del tamaño correcto se ve nítida: la página se adapta al tamaño que le das.

5. Las opciones útiles

   Hecho
   • Marca «Actualizar el navegador cuando la escena se active»«Actualizar navegador cuando se active la escena»: la animación de entrada se repite cada vez.
   • Deja sin marcar «Apagar fuente cuando no sea visible» en las pantallas, y márcala en las alertas si quieres que se repitan.
   • Deja el campo de CSS personalizado tal como está: las páginas ya tienen fondo transparente donde hace falta.

6. Acepta y ajusta la fuente

   Hecho

   Acepta. Si la fuente no llena la pantalla: clic derecho en la fuente, «Transformar», «Ajustar a la pantalla».Acepta y ajusta la fuente a la pantalla si hace falta (clic derecho en la fuente, menú de transformación).

7. Repítelo para cada pantalla

   Hecho

   Lo mismo para onde-pause.html, onde-intermission.html, onde-fin.html, onde-hors-ligne.html, onde-planning.html. El inicio cuenta hasta la hora del stream, la pausa y el intermedio cuentan minutos: estos ajustes van en la dirección (capítulo 04).

Capítulo 02

En juego, just chatting y superposiciones

Estas páginas se colocan encima de tu captura de juego y tu cámara. Su fondo es transparente o está recortado: el orden de las fuentes lo es todo.

La escena en juego

1. Pon tu captura de juego y tu webcam

   Hecho

   En tu escena en juego, añade tu captura de juego («Captura de juego») y tu webcam («Dispositivo de captura de video»), como siempre.

2. Añade la página en juego encima

   Hecho

   scenes/onde-en-jeu.html como fuente de navegador, 1920 x 1080, como en el capítulo 01. Arrástrala arriba del todo en la lista de fuentes: la más alta queda delante. Su centro es transparente.

   Captura de juego

   Webcam

   onde-en-jeu.html

   1. onde-en-jeu.htmldelante
   2. Webcam
   3. Captura de juegodetrás

3. Coloca tu webcam debajo del marco

   Hecho

   Lugar recomendado: posición 56, 650, tamaño 480 x 270.

   Clic derecho en la webcam, «Transformar», «Editar transformación», y luego Posición 56 y 650, Tamaño 480 x 270.Arrastra la webcam debajo del marco y ajusta su tamaño con sus controles, hasta que llene la abertura.

   Webcam56, 650 · 480 x 270

   Cintillo

Just chatting e intermedio

1. Añade la página y tu webcam debajo

   Hecho

   scenes/onde-just-chatting.html (o scenes/onde-intermission.html) en 1920 x 1080. Tu webcam va debajo de la página, en 80, 190, tamaño 1200 x 675: el fondo de la página está recortado en ese lugar.

   Webcam

   onde-just-chatting.html

   Chat

   1. Tu fuente de chatdelante
   2. onde-just-chatting.html
   3. Webcamdetrás

2. La caja de chat

   Hecho

   La zona de chat está reservada a la derecha: 500 x 675 en 1340, 190 (500 x 400 en el intermedio, el temporizador está debajo). Pon tu fuente de chat encima de la página, en esa zona: por ejemplo el widget de chat gratis de Aghenor.TV (tu usuario se añade a su dirección con ?channel=tu_usuario), o el widget Chat Box de Streamlabs.

   Webcam80, 190 · 1200 x 675

   Chat1340, 190 · 500 x 675

   Cintillo

Las demás superposiciones

1. El marco de cámara y la caja de chat solos

   Hecho

   Para tus propias composiciones: scenes/onde-webcam.html (1000 x 660) se coloca sobre tu webcam, y scenes/onde-chat.html (560 x 900) es una decoración de chat con fondo transparente. A su tamaño original, la zona de mensajes de la caja de chat mide 500 x 720 en 30, 100: tu fuente de chat va encima.

2. El tercio inferior

   Hecho

   scenes/onde-tiers-inferieur.html en 1920 x 1080, arriba del todo en las fuentes. Muestra tu nombre y tu eslogan; para un invitado, añade ?nom=Kestrel&titre=Invitado de la noche a la dirección, y &boucle para que entre y salga en bucle.

3. La transición

   Hecho

   scenes/onde-transition.html no es un video de stinger: añádela arriba del todo en la escena de llegada, en 1920 x 1080, con «Actualizar el navegador cuando la escena se active»«Actualizar navegador cuando se active la escena» marcado. Cubre la pantalla al llegar y luego se retira. Añádela en cada escena donde quieras verla.

4. Alertas y objetivo: arriba del todo

   Hecho

   Las alertas, la barra de objetivo (scenes/onde-objectif.html, 1000 x 200, colócala donde quieras), el tercio inferior y la transición van por encima del resto. Las alertas tienen su propio capítulo (05).

Capítulo 03

Los elementos sueltos

Las escenas de pantalla completa se quedan en scenes/. Los elementos toman partes de las superposiciones, con el mismo aspecto y las mismas animaciones, pero cada uno en su propia fuente, de su propio tamaño: los colocas en tu escena donde quieras.

El marco de cámara y la caja de chat ya son fuentes aparte: scenes/onde-webcam.html (1000 x 660) y scenes/onde-chat.html (560 x 900).

1. Añade el elemento

   Hecho

   «Fuentes», +, «Navegador».+, «Fuente de navegador». Marca «Archivo local» y elige la página en elements/onde/.

2. Dale su tamaño exacto

   Hecho

   Ancho y alto del elemento (tabla de arriba) y acepta. Marca también «Actualizar el navegador cuando la escena se active»«Actualizar navegador cuando se active la escena» para repetir la entrada.

3. Colócalo, agrándalo sin que se vea borroso

   Hecho

   Arrastra la fuente adonde quieras. Para agrandarla sin que se vea borrosa, cambia el ancho y el alto en las propiedades de la fuente en lugar de tirar de una esquina, con las mismas proporciones: la página se adapta. Tirar de una esquina estira una imagen ya dibujada.

   Ejemplo: elements/onde/tiers-inferieur.html pasa de 1640 x 300 a 2460 x 450 para ser una vez y media más grande.

   Tirar de una esquina

   Tu usuarioAcomódate, ya llegamos.

   Imagen estirada: borrosa.

   Ancho / Alto

   Tu usuarioAcomódate, ya llegamos.

   1640 x 300 pasa a 2460 x 450: nítido.

4. Recorta con la tecla Alt

   Hecho

   En la vista previa de OBSStreamlabs, mantén Alt y tira de un borde de la fuente: recortas en lugar de redimensionar. Práctico para quedarte solo con una parte del cintillo.

   Alt

   Tu usuario

Capítulo 04

Los ajustes en la dirección

Algunas páginas leen ajustes al final de su dirección: la hora de inicio, un temporizador, el nombre de un invitado, una alerta. Aquí están todos los que reconocen.

1. Desmarca «Archivo local»

   Hecho

   La casilla «Archivo local» no permite añadir ajustes. En las propiedades de la fuente, desmárcala: aparece el campo «URL».

2. Pega la dirección completa

   Hecho

   Empieza por file:/// seguido de la ruta del archivo, con barras normales, y luego los ajustes después del signo de interrogación:

   file:///C:/Users/tu/Documents/Stream/scenes/onde-demarrage.html?cible=2026-11-02T20:00

   El generador de abajo la prepara por ti. Acepta: la página vuelve a leer sus ajustes en cada carga.

Los espacios pasan tal cual; si dan problemas, sustitúyelos por %20. Los nombres de los parámetros se quedan en francés: cible = meta, duree = duración, nom = nombre, titre = título, actuel = actual, montant = cantidad, boucle = bucle, figer = congelar, y los días lundi, mardi, mercredi, jeudi, vendredi, samedi, dimanche.

Capítulo 05

Las alertas

Alertas animadas con tu estilo: follow, suscripción, resuscripción, donación, bits, raid y host. Solo el Alert Box de Streamlabs recibe los eventos reales de tu canal.

1. Abre el Alert Box

   Hecho

   Ve a streamlabs.com, inicia sesión y luego Widgets (o «All widgets») > Alert Box. Abre el tipo de alerta que quieras.

2. Activa el código personalizado

   Hecho

   Baja hasta «Custom HTML/CSS» (o la pestaña Custom Code) y actívalo.

   streamlabs.com

   streamlabs.com · Alert Box

   • Follows
   • Subscriptions
   • Donations
   • Bits
   • Raids

   Custom HTML/CSS

   HTMLCSSJS

   Alert Duration7

   Text Delay0

   Save Settings

3. Pega los tres archivos

   Hecho

   Pestaña HTML: borra todo y pega el contenido de alertes/streamlabs/<tipo>/html.txt del mismo tipo. Pestaña CSS: borra todo y pega css.txt. Pestaña JS: borra todo y pega js.txt. El CSS es el mismo para los siete tipos (tipografías incluidas).

   Los tipos de alerta y sus carpetas

   Tipo	Carpeta	En el Alert Box
   Follow	alertes/streamlabs/follow/	Follows
   Suscripción	alertes/streamlabs/sub/	Subscriptions
   Resuscripción	alertes/streamlabs/resub/	Resubs (o la variante resub dentro de Subscriptions, según tu versión)
   Donación	alertes/streamlabs/don/	Donations (o Tips)
   Bits	alertes/streamlabs/bits/	Bits (Cheers)
   Raid	alertes/streamlabs/raid/	Raids
   Host	alertes/streamlabs/host/	Hosts

4. Ajusta la duración y lo demás

   Hecho
   • Duración de la alerta (Alert Duration): 7 segundos. Si eliges otra, cambia también data-duree en el HTML (en milisegundos: 7 s = 7000).
   • Retraso del texto (Text Delay): 0. Animación de entrada y salida de Streamlabs: un fundido simple, o ninguna. Las alertas ya tienen las suyas.
   • Imagen de la alerta: déjala vacía (se muestra el icono del tipo), o sube tu logo: ocupa el lugar del icono. El sonido lo eliges tú.

5. Guarda y prueba

   Hecho

   Save Settings y luego «Test Follow» (o Test Sub, Test Donation...). Para ver cada tipo enseguida, abre alertes/apercu.html en tu navegador.

6. Muestra el Alert Box en OBSStreamlabs

   Hecho

   En la página del Alert Box, copia la dirección del widget (Widget URL). En OBS, añade una fuente «Navegador», desmarca «Archivo local» y pega esa dirección en «URL», 1920 x 1080.En Streamlabs Desktop, + en «Fuentes» y luego el widget «Alert Box»: está vinculado a tu cuenta. Colócala arriba del todo en las fuentes. Si tu fuente no tiene el tamaño de tu pantalla, la alerta se ajusta sola.

7. Sin Streamlabs: para probar

   Hecho

   alertes/source-navigateur.html reproduce una alerta de prueba al cargar (fuente «Navegador», archivo local, 1920 x 1080), y scenes/onde-alerte.html hace lo mismo con el estilo de las escenas. Ninguna de las dos recibe los eventos reales de tu canal: sin un servicio de alertas, solo sirven para probar el aspecto o lanzar una alerta a mano.

El host ya no existe en Twitch desde 2022: su carpeta solo sirve si tu plataforma o tu versión de Streamlabs todavía lo ofrece. Los tokens y los contenedores de Streamlabs pueden cambiar: si falta algo, vuelve a probar desde Streamlabs.

Capítulo 06

Las imágenes fijas

Dibujadas con los colores y la tipografía de tu pack, con tus textos, en el idioma de las escenas: paneles de Twitch, pantalla de desconectado, iconos de redes.

1. Los paneles de Twitch

   Hecho

   640 x 320 (Twitch los muestra a 320 de ancho, el doble se mantiene nítido), en visuels/onde/. En tu canal de Twitch, pestaña Acerca de: activa «Editar paneles», añade un panel de imagen, sube la imagen y luego añade el enlace y el texto de debajo.

   Acerca depanneau-a-propos.jpgReglas del chatpanneau-regles.jpgRedespanneau-reseaux.jpgHorariopanneau-planning.jpgEquipopanneau-equipement.jpgApoyarpanneau-don.jpgDiscordpanneau-discord.jpgFAQpanneau-faq.jpg

2. La pantalla de desconectado

   Hecho

   visuels/onde/ecran-hors-ligne.jpg, 1920 x 1080. En Twitch se configura en los ajustes del canal (banner del reproductor de video). En OBSStreamlabs también puedes añadirla como fuente «Imagen».

3. Los iconos de redes

   Hecho

   128 x 128, fondo transparente: icone-twitch.png, icone-youtube.png, icone-instagram.png, icone-tiktok.png, icone-x.png, icone-discord.png, icone-kick.png, icone-facebook.png, icone-site.png. Son pictogramas genéricos (ningún logo de marca): colócalos en OBSStreamlabs (fuente «Imagen») o en tus paneles.

Capítulo 07

Organizar y cambiar de escena

Una escena por momento del stream, las mismas fuentes en el mismo orden: cambias de escena sin pensarlo.

Es un ejemplo: añade onde-transition.html arriba de cada escena de llegada si quieres la cortinilla.

1. Cambia de escena con un clic

   Hecho

   Haz clic en la escena en el panel «Escenas». El modo estudio te muestra la siguiente escena antes de enviarla al aire.

2. Atajos de teclado

   Hecho

   En los ajustes de OBS, sección de atajos de teclado (Hotkeys): cada escena tiene su línea para cambiar a ella. Haz clic en el campo y pulsa la tecla que quieras.En los ajustes de Streamlabs Desktop, sección de atajos (Hotkeys): una tecla por escena, en la parte de las escenas.

   Teclado (ejemplo)

   F1Inicio

   F2En juego

   F3Just chatting

   F4Pausa

   Stream Deck

   InicioEn juegoJust chattingPausaIntermedioFinal

3. Con un Stream Deck

   Hecho

   La aplicación Stream Deck ofrece acciones para OBSStreamlabs, entre ellas cambiar de escena: arrastra la acción a una tecla y elige la escena.

4. La transición entre escenas

   Hecho

   Mantén corta la transición de tu programa, un fundido breve o un corte limpio: onde-transition.html, arriba de la escena de llegada, hace la cortinilla.

5. ¿Y el cambio automático?

   Hecho

   Las páginas de este pack no cambian de escena solas. Las escenas que cambian solas son otro servicio de Aghenor.TV: pasan por la API de Streamlabs, y la versión para OBS, por obs-websocket, está en preparación. Cómo funciona.

6. Pon tu configuración a salvo

   Hecho

   Cuando todo esté listo, exporta tu colección de escenas desde el menú de colecciones de escenas de OBS: la recuperas después de reinstalar.Streamlabs Desktop guarda tus escenas en colecciones de escenas. En cualquier caso, deja la carpeta del pack en el mismo lugar: las rutas de las fuentes apuntan a ella.

7. Modificar o actualizar tu pack

   Hecho
   1. Vuelve a abrir el Taller de escenas. En el TUTORIEL.html de tu propio pack, un enlace lo reabre directamente con tus ajustes. El logo no va incluido: vuelve a ponerlo.
   2. Cambia los colores, los textos o el estilo y descarga el nuevo ZIP.
   3. Descomprime el nuevo ZIP sobre tu carpeta actual, reemplazando los archivos. Los archivos conservan los mismos nombres y los mismos sitios: tus fuentes de OBSStreamlabs siguen conectadas, no hay que configurar nada de nuevo.

   Si una escena sigue mostrando la versión anterior, actualiza la fuente: abre sus propiedades y confirma, u ocúltala y vuelve a mostrarla.

Capítulo 08

Solución de problemas

Los problemas más comunes y cómo resolverlos.