1. Design & Illustration
  2. Adobe Photoshop

Cómo crear un banner de Fortnite para Twitch

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

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

¿Estás buscando actualizar tu canal de streaming en Twitch con un flamante aspecto? ¿O eres nuevo en el streaming y buscas la mejor manera de atraer espectadores enfocándote en el tema visual? ¡Sigue este tutorial y aprende cómo hacer un fabuloso banner de Fortnite para Twitch!

Tu banner para Twitch actúa esencialmente como una imagen de portada o encabezado que está situado en una posición prominente en tu canal o página. Ello significa que vamos a querer una imagen única e interesante para atraer más espectadores al canal de Twitch. También es importante que la imagen tenga algo de relación con lo que se enfoca tu canal. Así que con esto en mente usaremos el siempre popular Fortnite como un ejemplo para nuestro banner que utilizaremos en Twitch. Sin embargo, siéntete libre de usar otro personaje de juego según tus necesidades.

¿Quieres ahorrar tiempo? Dirígete a Envato Elements para descargar tu plantilla para Twitch en formato PSD.

Twitch templates on Envato ElementsTwitch templates on Envato ElementsTwitch templates on Envato Elements

Lo que aprenderás en este tutorial de Adobe Photoshop

  • Cómo usar los tamaños de banner recomendados para Twitch y las dimensiones para el 2021
  • Cómo crear un banner de Fortnite para Twitch usando Adobe Photoshop
  • Cómo elegir e importar imágenes del juego
  • Cómo personalizar tu tipografía

Lo que necesitarás

Para aprender cómo crear un banner de Fortnite para Twitch en Adobe Photoshop, necesitarás descargar una copia del juego, que se puede jugar gratuitamente en la Epic Games Store. También requerirás descargar el archivo adjunto pattern.png que puedes obtener haciendo clic en el botón "Download Attachment" (descargar archivo adjunto) ubicado a la derecha.

1. ¿Cuál es tamaño de documento correcto de un banner para Twitch?

Paso 1

Así que comencemos primero determinando las dimensiones correctas para nuestro banner de Fortnite a utilizar en Twitch. El tamaño recomendado a partir de 2021 es 1200 px por 480 px, con un tamaño de archivo de hasta 10 MB.

Crea un nuevo documento en Adobe Photoshop con estas dimensiones y haz clic en el botón crear.

  • Anchura: 1200 pixeles
  • Altura: 480 pixeles
  • Resolución: 72 ppp
twitch banner dimensionstwitch banner dimensionstwitch banner dimensions

Paso 2

Esto creará un nuevo documento con las dimensiones correctas para que comencemos. La forma rectangular de nuestro banner debería lucir como el que aparece en la imagen de abajo.

twitch bank documenttwitch bank documenttwitch bank document

2. Cómo importar una imagen de fondo

Paso 1

Para crear una imagen de fondo, necesitaremos tomar la captura de pantalla con la más alta calidad posible desde dentro del juego. En los parámetros del juego, necesitamos hacer que las opciones del video sean las más altas posibles (dependiendo de las especificaciones de tu computadora).

Para juegos como Fortinite, a veces puedes simplificar este paso seleccionando la opción de calidad que oscila de Baja a Media, Alta y Épica.

fortnite game settingsfortnite game settingsfortnite game settings

Paso 2

Fortnite también permite que los jugadores guarden sus partidos y luego los vean de nuevo desde cualquier ángulo usando el Replay System (sistema de repeticiones). Esto te permitirá enfocarte en capturar el mejor diseño y buscar tu imagen de fondo, sin tener que preocuparte por las jugadas.

El Replay System (sistema de repeticiones) de Fortnite presenta diversos modos de cámara como Third Person (tercera persona), Drone Modes (modos de dron) y Gameplay Camera (cámara de jugadas). También presenta otros ajustes cinemáticos y visualizaciones únicas para ayudarte a capturar la mejor imagen de fondo para tu banner de Fortnite a utilizar en Twitch.

Para ingresar a Replay Mode (modo de repeticiones), ve a Career Tab (pestaña Carrera) en el lobby y luego selecciona el botón Replays (repeticiones) en la parte inferior de la pantalla.

fortnite replaysfortnite replaysfortnite replays

Paso 3

Cuando estés usando Replay Mode, asegúrate de habilitar el modo High Quality FX (efectos de alta calidad) para realzar la calidad de tu imagen.

gameplay camgameplay camgameplay cam

Paso 4

Toma algunas capturas de pantalla y una vez que tengas unas buenas imágenes de tu fondo, elige la que vas a utilizar y la importaremos desde Adobe Photoshop.

fortnite landscape backgroundfortnite landscape backgroundfortnite landscape background

Paso 5

Importa o pega tu imagen de fondo en Adobe Photoshop. Esta actuará como tu principal capa de fondo.

import backgroundimport backgroundimport background

3. Cómo colorear la imagen de fondo usando mapas de degradado

Paso 1

Para cambiar el color del fondo, haz clic en el botón Crear nueva capa de relleno o ajuste (ubicado cerca de la parte inferior del panel Capas) y selecciona Degradado.

gradient gradient gradient

Paso 2

Esto creará una capa de Mapa de degradado arriba de nuestra imagen de fondo. Establécela en Opacidad de 70%.

opacity 70%opacity 70%opacity 70%

Paso 3

Con la capa de Mapa de degradado aún seleccionada, haz clic en la barra de degradado, que puedes encontrar en el panel Propiedades. Esto abrirá la ventana del Editor de degradado. Aquí podremos elegir los colores de nuestro Mapa de degradado.

gradient editorgradient editorgradient editor

Paso 4

Deja la detención de color de la izquierda como negro y cambiar la detención de color de la derecha a la siguiente:

  • R: 156
  • G: 45
  • B: 234

Luego muévela a una ubicación de aproximadamente 62%.

purple gradientpurple gradientpurple gradient

Paso 5

La imagen de fondo ahora debería lucir como la imagen observada a continuación. Si quieres, puedes tratar de experimentar y mover las ubicaciones de detenciones de color o cambiar los colores ligeramente para obtener una apariencia que te agrade.

purple backgroundpurple backgroundpurple background

4. Cómo crear las formas del fondo del banner para Twitch

Paso 1

Usando la  herramienta Lazo poligonal, dibuja una forma que abarque dos tercios de la composición. Este espacio es donde se ubicará tu nombre y tus íconos de redes sociales. Para seguir los colores, usa lo siguientes parámetros:

  • R: 71
  • G: 72
  • B: 121
dark purple shapedark purple shapedark purple shape

Paso 2

Usando de nuevo la herramienta Lazo poligonal, dibuja una segunda forma cerca de la parte inferior de tu composición. Asegúrate de que la capa esté colocada debajo de la primera forma para evitar cualquier superposición innecesaria. Para seguir los colores, utiliza los siguientes parámetros:

  • R: 255
  • G: 54
  • B: 253
pink shapepink shapepink shape

Paso 3

Usando de nuevo la herramienta Lazo poligonal, dibuja una tercera forma para detalles adicionales. Asegúrate otra vez que la capa esté colocada debajo de las primeras dos capas de formas para evitar cualquier superposición innecesaria. Para seguir los colores, utiliza los siguientes parámetros:

  • R: 255
  • G: 255
  • B: 255
white shapewhite shapewhite shape

5. Cómo crear el motivo del fondo

Paso 1

Para el motivo del fondo del banner de Fortnite para Twitch, podemos usar el motivo que puedes descargar del archivo adjunto en este tutorial. Importa el motivo en tu documento.

triangle patterntriangle patterntriangle pattern

Paso 2

Una vez que hayas importado el motivo en Photoshop, puedes cambiar su color usando la herramienta Relleno o Superposición de colores con los siguientes parámetros:

  • R: 255
  • G: 54
  • B: 253
apply the patternapply the patternapply the pattern

Paso 3

Usa una combinación de la herramienta Deformar, la herramienta Perspectiva y la herramienta Transformar para manipular la forma del motivo buscando darle un aspecto más interesante.

use the warp tooluse the warp tooluse the warp tool

Paso 4

Con la capa del motivo seleccionada, cambia la Opacidad a 15% para darle más sutileza y así no contraste con el resto del diseño.

set opacity to fifteen percentset opacity to fifteen percentset opacity to fifteen percent

Paso 5

Elimina cualquier superposición no deseada usando la herramienta Lazo poligonal y la herramienta Borrador para darle una apariencia más limpia.

remove excessremove excessremove excess

Paso 6

También puedes añadir un color sutil al diseño usando un Pincel circular difuso. En este ejemplo, he utilizado el color que se muestra a continuación:

  • R: 107
  • G: 38
  • B: 142
use soft round brush use soft round brush use soft round brush

6. Cómo añadir un personaje al banner para Twitch

Paso 1

También podemos agregar un personaje a nuestro diseño usando las mismas técnicas que utilizamos previamente para capturar la imagen de fondo de nuestro banner de Fortnite para Twitch. Simplemente ve a una pantalla donde el personaje que quieres se muestre (como la pantalla de seleccionar personaje o la tienda) y luego toma una captura de pantalla.

Siéntete libre de meterte en el juego y algunas capturas de pantalla de algunos Emotes de Twitch para Fortnite de tu personaje para añadir algo de personalidad a tu banner.

Una vez que hayas capturado el personaje que quieres usar, regresa a Adobe Photoshop e importa el personaje. 

Fortnite character select screenFortnite character select screenFortnite character select screen

Paso 2

Utiliza cuidadosamente la herramienta Lazo para cortar la forma de tu personaje elegido. Esto puede ser un proceso largo pues las formas de ciertos personajes pueden resultar muy complejas. Ciertos Emotes de Fortnite para Twitch también pueden añadir más complejidad a la forma general. Usa la herramienta Transformar para redimensionar el personaje y luego colócalo cerca de la parte izquierda del banner.

import characterimport characterimport character

Paso 3

También podemos añadir una Sombra paralela para resaltar más el personaje que quieres usar. Para hacerlo, da clic derecho en la capa del personaje. Luego elige del menú Opciones de fusión.

blending optionsblending optionsblending options

Paso 4

Esto abrirá las opciones de Estilo de capa. Aquí, podemos seleccionar Sombra paralela, que puede encontrarse en la parte inferior de la lista.

Luego experimenta con las opciones de Sombra paralela para obtener la apariencia que quieres. En este ejemplo, he utilizado los siguientes parámetros:

  • Modo de fusión: Normal
  • Opacidad: 100%
  • Ángulo: 13%
  • Distancia: 24 px
  • Extensión: 100%
  • Tamaño: 1 px

El color utilizado para la sombra se muestra a continuación:

  • R: 27
  • G: 5
  • B: 52
drop shadowdrop shadowdrop shadow

Paso 5

Ajusta las opciones de Sombra paralela y experimenta con diferentes valores hasta que obtengas un resultado que te guste.

shadow adjustshadow adjustshadow adjust

7. Cómo añadir tu nombre

Paso 1

Elige una fuente que te gustaría utilizar y escribe la primera palabra de tu nombre. He usado la fuente Ammonite para este ejemplo, pero siéntete libre de utilizar cualquier otra.

El color para la primera palabra es el siguiente:

  • R: 255
  • G: 255
  • B: 255
add the first wordadd the first wordadd the first word

Paso 2

Coloca la segunda parte de nuestro nombre debajo de la primera parte y usa un color diferente. Elige un color que concuerde con tu esquema de color general. Para este ejemplo he utilizado los siguientes parámetros:

  • R: 255
  • G: 54
  • B: 253
add the second wordadd the second wordadd the second word

Paso 3

Reúne algunos íconos de redes sociales de todas las plataformas que utilices. Impórtalos desde Adobe Photoshop y colócalos debajo de tu nombre. Aquí he elegido alternar entre los dos colores utilizados para el nombre, pero siéntete libre de experimentar.

social iconssocial iconssocial icons

8. Cómo añadir algunos toques finales al banner para Twitch

Paso 1

En esta sección, añadiremos una capa de ajuste, que te permitirá añadir algunos toques finales a la apariencia general de tu diseño de banner de Fortnite para Twitch.

Haz clic en el botón Crear nueva capa de relleno o ajuste (ubicado cerca de la parte inferior del panel Capas) y selecciona Tono/Saturación de la lista.

hue and saturationhue and saturationhue and saturation

Paso 2

Esto creará una nueva capa de ajuste de Tono/Saturación, que ahora puedes modificar. Para hacerlo, selecciona la nueva capa de ajuste que creaste y dirígete al panel Propiedades. Aquí puedes utilizar los reguladores deslizantes para cambiar la apariencia de tu diseño.

En este ejemplo, he incrementado la saturación general +30, lo que hará que los colores destaquen más.

adjust saturationadjust saturationadjust saturation

Paso 3

Siéntete libre de experimentar y alterar los parámetros.

final adjustmentsfinal adjustmentsfinal adjustments

¡Fabuloso! ¡Terminaste!

¡Felicidades! Y así es cómo se crea un banner de Fortnite para Twitch que puedes utilizar en tu canal o página.

Ahora que estás familiarizado con las técnicas, ¿por qué no creas un paquete de Fortnite para Twitch? Este puede incluir más elementos para realzar la apariencia de tu canal como paneles, imágenes de perfil, overlays ¡y más!

¡Siéntete libre de compartir tus propias creaciones en la sección de comentarios! Espero que te haya resultado útil este tutorial y hayas aprendido algunos nuevos consejos y trucos que puedas usar para tus propios proyectos. ¡Hasta la próxima!

final twitch bannerfinal twitch bannerfinal twitch banner

Los 5 mejores banners para gaming

¿Necesitas pronto un banner para Twitch? Dirígete a Envato Elements donde puedes descargar diversos diseños de plantillas para gaming. Estos son cinco de mis diseños favoritos de plantillas de banner.

Banners publicitarios para eSports (en formato PSD)

esports bannersesports bannersesports banners

Esta plantilla de Adobe Photoshop tiene un diseño gráfico moderno que presenta un divertido personaje femenino usando un casco de realidad virtual. Incluye 15 plantillas en formato PSD que son fáciles de personalizar y editar. Todas están redimensionadas de acuerdo a las pautas más recientes de redes sociales.

Paquete de mockups de promoción de logo de canal de gaming en YouTube (en formato PSD)

youtube templateyoutube templateyoutube template

Este paquete de mockups contiene tres plantillas en formato PSD que son fáciles de editar usando capas organizadas. Los archivos son de alta resolución así que puedes usarlas para todas tus necesidades de redes sociales.

3 Banners para YouTube - Ilustración para canal de gaming V1 (en formato PSD)

gaming youtube bannersgaming youtube bannersgaming youtube banners

Este paquete contiene tres banners para YouTube de estilo retro que puedes usar para tus propios canales y páginas de redes sociales. Todas las capas incluidas en el paquete están bien organizadas, limpias y profesionales con una resolución de 2560 x 1440.

Perfiles de redes sociales - Kit de ilustraciones (en formato PSD)

action media kitaction media kitaction media kit

¡Este kit de redes sociales es perfecto para todos los fanáticos de los videojuegos! Úsalo para atraer nuevos espectadores y suscriptores a tu canal. Este paquete presenta un archivo PSD completamente editable que está redimensionado de acuerdo a las más recientes pautas de redes sociales.

Comunidad gaming - Kit de redes sociales (PSD, PNG, JPG)

league of gamersleague of gamersleague of gamers

Este kit para redes sociales es perfecto para una comunidad gaming o sitio web de esports. La plantilla es completamente personalizable en Adobe Photoshop y presenta 13 encabezados, portadas y formatos de post. Este paquete incluye tamaños ajustables para todas las redes sociales populares como Twitter, Facebook, Instagram y YouTube.

¿Buscas aprender más? ¡Consulta más tutoriales sobre gaming a continuación!

One subscription.
Unlimited Downloads.
Get unlimited downloads