Advertisement
  1. Design & Illustration
  2. Minecraft

Cómo hacer un overlay de Minecraft para Twitch

Scroll to top
Read Time: 16 mins

Spanish (Español) translation by Ana Paulina Figueroa (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

En este tutorial, vamos a crear una plantilla de overlay de Minecraft para Twitch. Usaremos capturas de pantalla del juego para crear un overlay para streams personalizado que puedes usar en Twitch o en cualquier otra plataforma que prefieras. Necesitarás Minecraft, Adobe Photoshop y el software para streaming de tu elección. El resultado es una plantilla de overlay de Minecraft listo para OBS.

Overlay de Minecraft para TwitchOverlay de Minecraft para TwitchOverlay de Minecraft para Twitch
Foto de stock con un marcador de posición para cámaras web por Pressmaster en Envato Elements.

Lo que necesitarás

Estos son los recursos que utilizaremos en este tutorial para aprender cómo hacer overlays para Twitch:

Puedes descargar estos recursos y usarlos en tu plantilla de overlay para Twitch de Minecraft, o puedes usar cualquier contenido de tu elección. También necesitarás hacer algunas capturas de pantalla dentro del juego que utilizaremos para crear los gráficos de nuestro overlay de Minecraft. 

1. Cómo hacer un overlay para Twitch personalizado con capturas de pantalla de Minecraft

Paso 1

Primero, abre Minecraft. Vas a necesitar hacer algunas capturas de pantalla, ya que las requerimos para crear gráficos y usarlos en nuestro overlay para stream personalizado.

Ten en cuenta que tus capturas de pantalla de Minecraft pueden provenir de cualquier versión que prefieras de este juego. En este tutorial, mis capturas fueron tomadas de la versión para PC, en Windows 10. Si no sabes cómo hacer capturas de pantalla en Minecraft, puedes consultar la guía oficial aquí.

Para nuestra primera captura de pantalla, asegúrate de obtener una imagen de una línea recta de bloques de césped, como puedes ver a continuación en la captura que hice.

Captura de pantalla de Minecraft para una plantilla de overlayCaptura de pantalla de Minecraft para una plantilla de overlayCaptura de pantalla de Minecraft para una plantilla de overlay

Paso 2

Para nuestra segunda captura de pantalla, necesitamos obtener una imagen del personaje que usamos como avatar. Cambia la vista de la cámara para que puedas ver a tu personaje antes de realizar tu siguiente captura.

Al crear una plantilla para Twitch de Minecraft, es más fácil hacer ediciones si tu personaje está mirando hacia el frente. Sin embargo, puedes usar cualquier ángulo que prefieras. Solo ten en cuenta que es posible que debas realizar ediciones adicionales.

En este ejemplo vamos a usar al personaje Steve de Minecraft, ¡pero tú puedes elegir una apariencia diferente para que tu avatar refleje tu gusto y tu personalidad! 

Captura de pantalla de un avatar de Minecraft para crear una plantilla para TwitchCaptura de pantalla de un avatar de Minecraft para crear una plantilla para TwitchCaptura de pantalla de un avatar de Minecraft para crear una plantilla para Twitch

Paso 3

Ahora, crea un Nuevo documento en Adobe Photoshop. Queremos que las dimensiones de nuestro documento sean de 1920 píxeles de ancho por 1080 píxeles de alto. Este es el tamaño utilizado en las plantillas para Twitch, y es una recomendación común para crear overlays para streams personalizados. Si quieres que tu plantilla de overlay para Twitch tenga un tamaño distinto, coloca dimensiones diferentes en este paso.

Una vez que estés satisfecho con estos valores, haz clic en Crear para generar tu documento.

Crea un Nuevo documento en PhotoshopCrea un Nuevo documento en PhotoshopCrea un Nuevo documento en Photoshop

Paso 4

Antes de que agreguemos contenido a nuestro nuevo documento, usemos la herramienta Bote de pintura para convertir el color de fondo en Negro.

Usa la herramienta Bote de pintura de Photoshop para convertir el color de fondo en negroUsa la herramienta Bote de pintura de Photoshop para convertir el color de fondo en negroUsa la herramienta Bote de pintura de Photoshop para convertir el color de fondo en negro

Paso 5

A continuación, abre tu primera captura de pantalla en Adobe Photoshop. Vamos a seleccionar los bloques de césped usando la herramienta Lazo poligonal.

Esta es una herramienta perfecta para este trabajo, ya que facilita la creación de selecciones angulares. Simplemente haz clic en cada esquina hasta que el césped quede seleccionado.

Una vez que hayas hecho tu selección, copia este contenido yendo a Edición > Copiar.

La herramienta Lazo poligonal para hacer selecciones en PhotoshopLa herramienta Lazo poligonal para hacer selecciones en PhotoshopLa herramienta Lazo poligonal para hacer selecciones en Photoshop

Paso 6

Pega los bloques de césped en el Nuevo documento. Notarás que Photoshop pega los bloques de césped en una Nueva capa. Si no ves el panel Capas, ábrelo yendo a Ventana > Capas.

Consejo: Puedes asignar nombres a tus capas haciendo clic en el nombre de cada una. Esto es opcional, pero puede ayudarte a mantener la organización de tu proyecto.

Pega los bloques de césped en una Nueva capa de PhotoshopPega los bloques de césped en una Nueva capa de PhotoshopPega los bloques de césped en una Nueva capa de Photoshop

Paso 7

A continuación, duplica la capa que contiene nuestros bloques de césped. Puedes hacer clic derecho en la capa si estás usando una PC, o Control-clic si usas una Mac, y luego selecciona Duplicar capa.

Refleja o voltea la imagen de este césped adicional yendo a Edición > Transformar > Voltear horizontal. Ahora tenemos una copia reflejada de nuestros bloques de césped originales.

Duplica capas en PhotoshopDuplica capas en PhotoshopDuplica capas en Photoshop

Paso 8

Usa la herramienta Mover para posicionar tus bloques de césped, de modo que formen una línea recta a lo largo de la parte inferior de tu plantilla de overlay para Twitch personalizado. Si necesitas hacer más copias para llenar este espacio, repite el paso 5. Intenta que los píxeles coincidan, de modo que la línea de bloques de césped tenga una apariencia natural.

También puedes seleccionar cualquier exceso de contenido con la herramienta Marco rectangular. Una vez que hayas seleccionado el contenido adicional, presiona la tecla Retroceso para eliminarlo.

Si estás satisfecho con tu contenido, puedes seleccionar tus capas manteniendo presionada la tecla Control en una PC, o Comando en Mac, y haciendo clic en ellas. Cuando tengas seleccionadas estas múltiples capas, puedes ir a Capas > Combinar capas para fusionarlas.

Advertencia: ¡Asegúrate de querer fusionarlas antes de realizar esta acción! 

Duplica y fusiona capas en PhotoshopDuplica y fusiona capas en PhotoshopDuplica y fusiona capas en Photoshop

Paso 9

Podríamos dejar los bloques de césped en la parte inferior de nuestro overlay de Minecraft para Twitch si quisiéramos. Sin embargo, al usar esta plantilla de overlay para Twitch de Minecraft, es posible que obstruyan la vista de algunos de los elementos de la interfaz de usuario de dicho juego, y es probable que los espectadores quieran verlos. Por lo tanto, en lugar de eso vamos a voltearlos y a moverlos a la parte superior del overlay.

Selecciona tu capa de bloques de césped y luego ve a Edición > Transformar > Voltear vertical. A continuación, utiliza la herramienta Mover para mover los bloques de césped a la parte superior de tu overlay de Minecraft personalizado.

Usa la herramienta Mover para colocar los bloques de césped en la parte superior de tu overlay de MinecraftUsa la herramienta Mover para colocar los bloques de césped en la parte superior de tu overlay de MinecraftUsa la herramienta Mover para colocar los bloques de césped en la parte superior de tu overlay de Minecraft

2. Cómo hacer un overlay para Twitch de Minecraft

Paso 1

A continuación, usemos la herramienta Rectángulo para dibujar un rectángulo blanco en la parte superior de nuestro overlay. Asegúrate de que el Color de relleno sea de un tono verde claro y que el Color de trazo esté desactivado.

El código hexadecimal del color verde claro es #86795a, si quieres que tu diseño coincida exactamente con el nuestro.

Usa la herramienta Rectángulo para dibujar un rectángulo blanco en la parte superior del overlay para streamsUsa la herramienta Rectángulo para dibujar un rectángulo blanco en la parte superior del overlay para streamsUsa la herramienta Rectángulo para dibujar un rectángulo blanco en la parte superior del overlay para streams

Paso 2

Regresa a tu capa de bloques de césped. Selecciona una parte de la tierra marrón con la herramienta Marco rectangular. Luego, copia este contenido yendo a Edición > Copiar.

Copia el contenido de una capa en PhotoshopCopia el contenido de una capa en PhotoshopCopia el contenido de una capa en Photoshop

Paso 3

Dirígete a Edición > Pegar para pegar lo que acabamos de copiar. Ve al panel Capas y arrastra esta capa recién pegada para que quede encima de la capa del rectángulo.

Una vez hecho eso, haz clic derecho si estás trabajando en una PC, o Control-clic en una Mac, y selecciona Crear máscara de recorte. Reduce el valor de la Opacidad de esta capa a 55% para que podamos ver parcialmente a través de ella.

Máscara de recorte de PhotoshopMáscara de recorte de PhotoshopMáscara de recorte de Photoshop

Paso 4

A continuación, agreguemos algunos efectos a este cuadro. En el panel Capas, haz clic en Efectos de capa y, a continuación, selecciona Trazo.

Agrega un efecto de capa Trazo a tu plantilla para TwitchAgrega un efecto de capa Trazo a tu plantilla para TwitchAgrega un efecto de capa Trazo a tu plantilla para Twitch

Paso 5

Estos son algunos valores sugeridos que puedes usar aquí:

  • Tamaño: 6 píxeles
  • Posición: Exterior
  • Modo de fusión: Normal
  • Opacidad: 100%
  • Color de relleno: Marrón oscuro (#402c1e)

Si quieres obtener una vista previa de cómo se ven estos valores en tu plantilla para Twitch de Minecraft, recuerda activar la opción de previsualizar. Una vez que estés satisfecho con su apariencia, haz clic en OK.

El efecto de capa Trazo de PhotoshopEl efecto de capa Trazo de PhotoshopEl efecto de capa Trazo de Photoshop

Paso 6

Repite este proceso, pero esta vez selecciona Sombra interior en lugar de Trazo. Estos son algunos valores sugeridos que puedes usar:

  • Modo de fusión: Multiplicar
  • Opacidad: 100%
  • Ángulo: 68%
  • Distancia: 4
  • Retraer: 0
  • Tamaño: 8

Una vez más, puedes activar la opción de previsualizar para ver tu plantilla para Twitch de Minecraft usando estos valores. Haz clic en OK una vez que estés satisfecho con los resultados.

Sombra interior en PhotoshopSombra interior en PhotoshopSombra interior en Photoshop

Paso 7

A continuación, agreguemos un poco de texto a la parte superior de este cuadro. Selecciona la herramienta Texto. Luego, haz clic para comenzar a escribir. Voy a usar este espacio para mostrar mi último seguidor.

Puedes cambiar la fuente a través del panel Carácter. Ve a Ventana > Carácter para abrirlo. Yo estoy usando la fuente Pixel Rand.

La herramienta Texto de PhotoshopLa herramienta Texto de PhotoshopLa herramienta Texto de Photoshop

Paso 8

Agreguemos un Trazo acorde a este texto. Como lo hicimos anteriormente, ve a Estilos de capa y selecciona Trazo.

Aplica el siguiente Trazo a tu texto:

  • Tamaño: 5 píxeles
  • Posición: Exterior
  • Modo de fusión: Normal
  • Opacidad: 100%
  • Color: Marrón oscuro (#402c1e)

Una vez más, puedes elegir los valores que desees, ya que estos son solo valores recomendados. Una vez que estés satisfecho con el resultado, haz clic en OK. El diseño de tu plantilla para Twitch de Minecraft debería verse más o menos como el de este ejemplo:

El efecto Trazo en texto de PhotoshopEl efecto Trazo en texto de PhotoshopEl efecto Trazo en texto de Photoshop

Paso 9

Selecciona las capas que componen nuestra área de seguidor nuevo. Recuerda que puedes mantener presionada la tecla Control en una PC, o Comando en Mac, para seleccionar más de una capa.

A continuación, haz clic en el icono de carpeta para colocar este contenido en una carpeta.

Luego podemos copiar la carpeta haciendo clic derecho en ella en una PC, o Control-clic en Mac, y luego seleccionando Duplicar grupo. Asigna un nombre al grupo duplicado y, a continuación, haz clic en OK.

Ahora, usa la herramienta Mover para mover esta copia. Podemos duplicar y cambiar el nombre de tantos de estos cuadros como deseemos, para tantas secciones como queramos. Simplemente utiliza la herramienta Texto para editar el texto.

Copia grupos de capas en PhotoshopCopia grupos de capas en PhotoshopCopia grupos de capas en Photoshop

Paso 10

A continuación, utilicemos las técnicas que ya hemos usado para crear más contenido en nuestro overlay de Minecraft para Twitch personalizado.

En primer lugar, vamos a crear un espacio para nuestro overlay de cámara web para streams de Minecraft. Muchas cámaras web tienen una resolución de 1920 x 1080 píxeles, pero la tuya puede variar. Asegúrate de revisar y encontrar estas dimensiones.

Para cerciorarnos de estar usando el tamaño justo, podemos seleccionar nuestra capa de fondo. Una vez que hayas seleccionado dicha capa, ve a Selección > Todo. Luego dirígete a Edición > Copiar y después ve a Edición > Pegar.

Ve a Edición > Transformación libre y arrastra los controladores de redimensionamiento hasta que el rectángulo que pegamos tenga el tamaño que quieras para tu cámara web. Sabemos que coincidirá con 1920 x 1080, porque lo pegamos a partir de ese tamaño de documento. 

Overlay de cámara web para streams de MinecraftOverlay de cámara web para streams de MinecraftOverlay de cámara web para streams de Minecraft

Paso 11

Asignemos un trazo a juego a nuestro espacio para la cámara web. Ve a Efectos de capa nuevamente, selecciona Trazo y prueba los siguientes valores sugeridos:

  • Tamaño: 6
  • Posición: Exterior
  • Modo de fusión: Normal
  • Opacidad: 100%
  • Color: Verde (#546e33).

Haz clic en OK cuando estés satisfecho con los resultados. Así es como se ve el diseño final.

Diseño de overlay de Minecraft con espacio para cámara webDiseño de overlay de Minecraft con espacio para cámara webDiseño de overlay de Minecraft con espacio para cámara web

Paso 12

A continuación, agreguemos algunos bloques de césped, para que parezca que nuestra cámara web reposa encima de ellos. Esto le dará una apariencia más cercana a lo que podríamos desear de un overlay de cámara web para un stream de Minecraft, haciendo uso de la estética de bloques de este juego.

Regresa a tu capa de bloques de césped y selecciónala. Utiliza la herramienta Marco rectangular para seleccionar parte del césped y, a continuación, ve a Edición > Copiar. Dirígete a Edición > Pegar para pegar una copia de este contenido.

Luego podemos voltearlo yendo a Edición > Transformar > Voltear vertical. Utiliza la herramienta Mover para reposicionar los bloques de césped y que queden debajo del espacio de la cámara web.

Aquí puedes emplear las mismas técnicas que usamos anteriormente para personalizar la apariencia de los bloques de césped. Copia, pega y elimina contenido, según sea necesario, hasta que estés satisfecho con la apariencia del bloque de césped. Recuerda intentar que los píxeles coincidan, para que se vea natural.

Bloques de césped para un overlay de Minecraft con cámara webBloques de césped para un overlay de Minecraft con cámara webBloques de césped para un overlay de Minecraft con cámara web

Paso 13

También podemos agregar otro tipo de contenido a esta área superior. Este podría ser un estupendo lugar para compartir tus perfiles de redes sociales, para que los espectadores de tu stream de Minecraft en Twitch sepan dónde seguirte.

Yo voy a usar estos iconos de redes sociales, pero tú puedes utilizar cualquier conjunto de iconos que desees, o también puedes hacer uso del texto.

Abre los iconos en Adobe Photoshop. Después, cópialos y pégalos en tu overlay de Minecraft para Twitch personalizado. Recuerda que puedes encontrar las herramientas para hacer eso en Edición > Copiar y Edición > Pegar.

Utiliza la herramienta Texto para agregar tu nombre de usuario y así lograr que tus espectadores lo conozcan.

Plantilla de overlay para Twitch de Minecraft con información de redes socialesPlantilla de overlay para Twitch de Minecraft con información de redes socialesPlantilla de overlay para Twitch de Minecraft con información de redes sociales

3. Cómo agregar tu avatar a tu plantilla de overlay para Twitch de Minecraft

Paso 1

Volvamos a nuestra otra captura de pantalla: la que muestra nuestro avatar. Ábrela en Adobe Photoshop.

Luego, usemos la herramienta Lazo poligonal, como lo hicimos antes, para seleccionar cuidadosamente a nuestro personaje. Recuerda, haz clic en las esquinas de cada forma angular para crear una buena selección en línea recta.

Una vez que estés satisfecho con tu selección, ve a Edición > Copiar.

El avatar Steve de MinecraftEl avatar Steve de MinecraftEl avatar Steve de Minecraft

Paso 2

Ahora, regresa a tu overlay personalizado para streams de Minecraft. Ve a Edición > Pegar para pegar el avatar en el diseño.

Utiliza la herramienta Mover para reposicionar al personaje. Dirígete a Edición > Transformación libre y arrastra los controles de redimensionamiento para cambiar el tamaño del personaje.

Overlay de Minecraft para TwitchOverlay de Minecraft para TwitchOverlay de Minecraft para Twitch

Paso 3

Pensando en cómo hacer un overlay para Twitch que llame la atención, decidí que un bonito gesto sería hacer que el personaje saludara a la audiencia. Podemos usar la herramienta Lazo poligonal para seleccionar el brazo del personaje.

Ve a Edición > Cortar y, a continuación, a Edición > Pegar para pegar el brazo en su propia capa. Luego podemos ir a Edición > Transformación libre para girar el brazo y que parezca que está levantado y saludando.

Edita el avatar de tu overlay de Minecraft para TwitchEdita el avatar de tu overlay de Minecraft para TwitchEdita el avatar de tu overlay de Minecraft para Twitch

Paso 4

En este momento, Steve de Minecraft simplemente se ve como si estuviera flotando. Agreguemos algunos bloques de césped para que tenga algo en qué pararse.

Duplica la capa que tiene los bloques de césped y colócala debajo del espacio para la cámara web. Simplemente haz clic derecho si usas PC, o Control-clic en Mac y selecciona Duplicar capa.

Luego, podemos usar la herramienta Mover para reposicionar esta capa y colocarla debajo del personaje.

También puedes cortar, pegar y eliminar como mejor te parezca para cambiar el tamaño de este contenido. Utiliza la herramienta Marco rectangular para realizar estas selecciones y ediciones.

También puedes voltear al personaje utilizando una técnica que ya probamos: Edición > Transformar > Voltear horizontal.

Plantilla de overlay para Twitch de MinecraftPlantilla de overlay para Twitch de MinecraftPlantilla de overlay para Twitch de Minecraft

¡Y ahí lo tienes!

Ahora ya sabes cómo hacer un overlay para Twitch de Minecraft. Si quieres probar tu overlay, pega una captura de pantalla justo arriba de tu capa de fondo. Así puedes darte una idea de cómo se vería en acción.

Plantilla para Twitch de Minecraft personalizadaPlantilla para Twitch de Minecraft personalizadaPlantilla para Twitch de Minecraft personalizada
Foto de stock con un marcador de posición para cámaras web por Pressmaster en Envato Elements.

Si no estás seguro de cómo guardar y exportar tu overlay para streams de Minecraft, o de cómo importarlo en OBS, en Streamlabs u otro software de streaming, consulta este tutorial:

¿Estás buscando un generador de overlays para Minecraft?

Si no tienes Photoshop, o si estás buscando algo más simple, considera el uso de Placeit. Se trata de una herramienta de diseño basada en la web, por lo que puedes usarla desde la comodidad de tu navegador. Puedes comenzar a trabajar con ella y comenzar a diseñar de forma gratuita.

Solo pagas si decides descargar tu trabajo. Por un precio muy bajo, puedes crear overlays para streams, paneles de Twitch, contenido de video animado y más. Lo mejor de todo es que puedes probar este servicio primero, antes de hacer una compra.

Aquí puedes ver rápidamente cómo podríamos usar nuestro personaje de Minecraft para personalizar un overlay en este generador de overlays de Minecraft.

Paso 1

En Placeit, es fácil encontrar un overlay para personalizar. Navega a través de una enorme colección de plantillas de overlays, y estas son solo un punto de partida. Elige alguna que te guste para comenzar. Puedes personalizar el texto, los colores y muchas otras características también.

Esta es solamente una muestra de algunos de los overlays que puedes personalizar.

Generador de overlays para Minecraft de PlaceitGenerador de overlays para Minecraft de PlaceitGenerador de overlays para Minecraft de Placeit

Paso 2

Este es el overlay para streams que voy a personalizar. Podemos hacer clic y arrastrar elementos de diseño aquí, para reposicionarlos de la manera que queramos.

Overlay para streams personalizadoOverlay para streams personalizadoOverlay para streams personalizado

Paso 3

En el lado derecho, también podemos cambiar los colores del overlay para streams personalizado. Utiliza el selector de color para cambiar la combinación de colores según lo que tú prefieras.

También puedes modificar los elementos gráficos aquí: elige un overlay completamente diferente como base, si lo prefieres.

Explorador de un generador de overlays de MinecraftExplorador de un generador de overlays de MinecraftExplorador de un generador de overlays de Minecraft

Paso 4

Además, podemos cambiar lo que dice el texto. Aquí, en el lado izquierdo, podemos modificar el texto, su color y la fuente también. Haz clic y arrastra para mover elementos de texto fácilmente. También puede cambiar el tamaño del texto de esta manera.

Generador en línea de overlays de MinecraftGenerador en línea de overlays de MinecraftGenerador en línea de overlays de Minecraft

Paso 5

Incluso puedes subir imágenes personalizadas, como el personaje que usamos en nuestro overlay de Minecraft anterior. Si quieres probarlo, asegúrate de guardar tu avatar por sí solo como un archivo PNG transparente.

Todo lo que tenemos que hacer es dar clic en Agregar otro gráfico y luego en Cargar imagen.

Luego, podemos recortar, mover y ajustar nuestra imagen personalizada. De hecho, también puedes reemplazar la plantilla de overlay base con una imagen personalizada, como nuestro encabezado de bloques de césped. Échale un vistazo.

Generador de overlays para streams de MinecraftGenerador de overlays para streams de MinecraftGenerador de overlays para streams de Minecraft

Paso 6

Cuando estés listo, guardar es tan fácil como hacer clic en Descargar. Placeit prepara la imagen para ti y te proporciona un PNG transparente que puedes importar directamente a OBS, Streamlabs o al software para streams de tu elección. Es otra forma mediante la que puedes crear un diseño de overlay de Minecraft listo para ser usado en OBS.

Generador en línea de overlays para streams personalizados de TwitchGenerador en línea de overlays para streams personalizados de TwitchGenerador en línea de overlays para streams personalizados de Twitch

¡Buena suerte con tu overlay para streams personalizado!

Ya sea que decidas probar un generador o una plantilla de overlays de Minecraft para Twitch u otro programa de streaming, o que hagas un overlay para Twitch de Minecraft desde cero en Photoshop, cuentas con muchas opciones. Recuerda, se supone que los videojuegos son divertidos, ¡así que no olvides divertirte! Usa tu imaginación y trata de idear algo que sea memorable y tuyo de forma única. Estas técnicas y consejos son solo el punto de partida que te sugerimos.

Buena suerte, ¡y diviértete en tus streams!

¿Buscas aún más tutoriales y contenido para streaming? Consulta estos tutoriales y artículos gratuitos de Envato Tuts+.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Design & Illustration tutorials. Never miss out on learning about the next big thing.
Advertisement
Start your 7-day free trial*
Start free trial
*All Individual plans include a 7-day free trial for new customers; then chosen plan price applies. Cancel any time.