() translation by (you can also view the original English article)
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.
Lo que necesitarás
Estos son los recursos que utilizaremos en este tutorial para aprender cómo hacer overlays para Twitch:
- La fuente de píxeles Pixel Rand
- Iconos de redes sociales (este recurso ya no está disponible en Envato Elements)
- Capturas de pantalla de Minecraft
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.
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!
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
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.
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.
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.
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.
¡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.
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.
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.
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.
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.
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.
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.
¡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+.
Cómo crear overlays para Twitch OBS en Photoshop
Cómo Hacer Emotes para Twitch
Cómo Hacer Paneles para Twitch
Cómo diseñar banners con un creador de banners para Twitch
15 mejores overlays para Twitch GRATIS
Crear la Piel para un Personaje de Minecraft in Adobe Illustrator
Cómo crear rápidamente un efecto de texto de Minecraft en Adobe Illustrator
Jugando con proyección isométrica en Inkscape para hacer una escena de Minecraft
