Guía para crear imágenes reactivas en Discord

Paso 1: Crea tu PNGtuber usando la herramienta de Fugi

Para empezar, utiliza la herramienta de imágenes reactivas de Discord de Fugi para crear imágenes fácilmente. Sigue estos pasos:

1. Abre la aplicación Discord en tu computadora junto con OBS Studio, disponible para descarga gratuita.
2. Accede a tu configuración de Discord haciendo clic en el ícono de engranaje junto a tu nombre de usuario.
3. En el menú de configuración, navegue a la sección Avanzada y habilite el Modo de desarrollador.
4. Desplácese hasta Voz y video en el panel izquierdo, seleccione su micrófono y configure su cámara en OBS Virtual Camera.
5. Vaya a reactive.fugi.tech y haga clic en Iniciar sesión con Discord.
6. Inicie sesión con sus credenciales o escanee el código QR y haga clic en Autorizar.
7. Configure sus imágenes reactivas en la página de configuración que se abre.
8. Sube tus imágenes: una con la boca cerrada y otra con la boca abierta. Haz clic en el icono «Más» (+) para añadir cada imagen y luego haz clic en «Guardar».
9. Copia el enlace generado para tu configuración.
10. En OBS, haga clic en el ícono Más (+) debajo de Fuentes, seleccione Navegador, ingrese un nombre de fuente y haga clic en Aceptar.
11. Pegue el enlace en el campo URL de Propiedades y haga clic en Aceptar.
12. Ajuste el tamaño de la imagen según sea necesario antes de su transmisión de Discord.
13. Haga clic en “Iniciar cámara virtual” en OBS para iniciar la transmisión.
14. Únete a un canal de voz en Discord y habilita tu cámara para ver la imagen reactiva en acción.

Consejo profesional: pruebe la configuración hablando a través del micrófono para asegurarse de que la imagen reactiva responda correctamente.

Paso 2: Utiliza CSS personalizado con la superposición StreamKit de Discord

Para quienes se familiarizan con CSS básico, la superposición de Discord StreamKit ofrece otra solución eficaz. Aquí te explicamos cómo hacerlo:

1. Visita streamkit.discord.com.
2. Seleccione Instalar para OBS o XSplit según su software de transmisión.
3. Inicie sesión en Discord si se le solicita; asegúrese de que Discord esté abierto de antemano.
4. Vaya al Widget de Voz y seleccione su servidor y canal de voz. Active la opción «Ocultar nombres» para mayor privacidad. Copie la URL generada que se muestra a la derecha.
5. Autorice la aplicación cuando Discord lo solicite.
6. Abra OBS, haga clic en el ícono Más (+) para agregar una nueva fuente, elija Navegador y pegue la URL copiada.
7. Crea un canal de texto privado en Discord para cargar tus imágenes PNG.
8. Utilice el generador de CSS en codepen.io.
9. Copia tu ID de Discord desde la aplicación Discord y pégalo en el generador de CSS.
10. Para cada imagen PNG cargada en tu canal de Discord, haz clic derecho y selecciona “Copiar ID”.Pégala junto a “URL de la imagen” en el generador.
11. Haga clic en Generar CSS y luego copie el código de salida.
12. En OBS, acceda a las propiedades de origen del navegador StreamKit, navegue a la sección CSS personalizado y pegue su código allí.
13. Finalizar haciendo clic en Aceptar.

Consejo profesional: asegúrate de ajustar la posición y el tamaño de tu imagen reactiva en OBS para que se adapte perfectamente a tu diseño.

¿Cómo creo una imagen reactiva para Discord?

¿Puedo utilizar otros formatos de imagen además de PNG?