1. Design & Illustration
  2. twitch

Cómo hacer bonitos paneles de anime en Twitch

by
Read Time:15 minsLanguages:

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

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

Los paneles de Twitch pueden ayudar a dar más personalidad a tu transmisión en vivo. En este tutorial, crearemos bonitos paneles para Twitch, explorando algunas opciones para el arte de los paneles de Twitch. Trabajaremos con algunas de las impresionantes obras de Studio Ghibli para crear estupendos paneles de Twitch personalizados para aquellos que busquen algo bonito, divertido o de estilo anime. También puedes adaptar este proceso para cualquier otra obra de arte que te guste.

anime twitch panels anime twitch panels anime twitch panels
Capturas de pantalla de "Ponyo" de Studio Ghibli

Utilizaremos Adobe Photoshop para crear nuestros bonitos paneles de Twitch, pero también echaremos un vistazo a un creador de paneles de Twitch más adelante en el tutorial. Esta es una gran opción si no tienes Photoshop. Un creador de paneles de Twitch también es una gran opción si quieres crear tus paneles desde la comodidad de tu navegador.

Lo que necesitarás:

Al hacer paneles de Twitch, las capturas de pantalla de anime y de juegos pueden ser un complemento divertido para tu canal. También puedes utilizar tus propias ilustraciones. Elige el arte del panel de Twitch apropiado para el enfoque de tu canal.

1. Cómo crear paneles personalizados de Twitch en Adobe Photoshop

Paso 1

En primer lugar, hablemos de las dimensiones de los paneles de Twitch personalizados. Los paneles de Twitch tienen un ancho fijo de 320 píxeles, así que tendrás que tener en cuenta ese número. La altura, sin embargo, puede variar. Verás que algunas fuentes recomiendan anchos mayores y menores, como 320x160 (una proporción de 2:1) o incluso un mayor 320x320 (un cuadrado, que podría ser bueno para enlaces o información más grandes y llamativos).

Tienes la libertad y la flexibilidad de elegir cuál es el mejor para tu canal. El máximo permitido por Twitch es de 320px de ancho por 600px de alto. El tamaño de los archivos debe ser inferior a 1 MB.

Para esta demostración, empezaremos con un lienzo de 320 píxeles de ancho por 160 de alto.

Para empezar, crea un Nuevo documento en Adobe Photoshop de este tamaño.

new document photoshopnew document photoshopnew document photoshop

Paso 2

Empecemos por insertar una captura de pantalla en nuestro documento.

Abre la captura de pantalla que hayas elegido en Adobe Photoshop. Yo voy a utilizar esta de Ponyo, de Studio Ghibli.

A continuación, ve a Seleccionar > Todo en la parte superior de la pantalla, para seleccionar toda la captura de pantalla. Sabrás que tu trabajo está seleccionado si ves esta línea discontinua alrededor de tu selección, como se muestra a continuación.

Select All PhotoshopSelect All PhotoshopSelect All Photoshop

Paso 3

Ve a Edición > Copiar para copiar toda la captura de pantalla. A continuación, vuelve a tu documento original y ve a Edición > Pegar.

Esto pegará la captura de pantalla en nuestro documento de 320x160. Observa, mirando nuestro panel de Capas, que la captura de pantalla ha sido pegada en una nueva capa llamada "Capa 1". En este momento se ve azul, porque la captura de pantalla es muy grande; lo arreglaremos en el siguiente paso.

Paste into Photoshop DocumentPaste into Photoshop DocumentPaste into Photoshop Document

Paso 4

En este momento, la captura de pantalla es demasiado grande para nuestra área de trabajo, así que tendremos que cambiar su tamaño.

Ve a Edición > Transformación libre para empezar. Verás que al hacerlo se colocan tiradores de cambio de tamaño alrededor de la imagen. Haz clic y arrastra sobre ellos para cambiar el tamaño de la imagen hasta que encaje mejor en este espacio.

Consejo: Puedes cambiar el nombre de tus capas haciendo clic en el nombre de la capa en el panel de capas. Esto es para fines de organización.

Photoshop Free TransformPhotoshop Free TransformPhotoshop Free Transform

Paso 5

A continuación, vamos a añadir algo de texto. Selecciona la Herramienta Texto en el panel de Herramientas.

Con la Herramienta Texto seleccionada, podemos seleccionar nuestra Fuente, arriba en el panel de Opciones, en la parte superior del software.

Photoshop Type ToolPhotoshop Type ToolPhotoshop Type Tool

Paso 6

A continuación, con la Herramienta texto activa, haz clic en tu espacio de trabajo para empezar a escribir, como lo harías en la mayoría de los programas de procesamiento de textos. Voy a empezar con la palabra "Hola". Utilizaremos este panel de Twitch como introducción y saludo para nuestros espectadores.

Sugerencia: Si quieres cambiar el texto, también podemos recurrir al panel Carácter. Lo encontrarás en Ventana > Carácter, en la parte superior del software. Aquí podemos cambiar cosas como la fuente, el tamaño de la fuente y el color de la misma.

Photoshop Type ToolPhotoshop Type ToolPhotoshop Type Tool

Paso 7

Vamos a añadir un ligero trazo a nuestro panel de Twitch, solo para darle un acabado.

En tu panel de Capas, crea una Nueva Capa haciendo clic en el signo más en la parte inferior del panel. Utiliza la Herramienta Cubo de pintura para rellenar esta capa con el color blanco. A continuación, establece el modo de fusión de la capa en Multiplicar. Esto hará que aparezca invisible por ahora.

Photoshop Layers Blending ModePhotoshop Layers Blending ModePhotoshop Layers Blending Mode

Paso 8

Ve a tus Efectos de capa, en la parte inferior del panel Capas, y selecciona Trazo.

Para este ejemplo, utilizaremos estos valores:

  • Tamaño: 2 px
  • Posición: Dentro de
  • Modo de mezcla: Normal
  • Opacidad: 100%
  • Color: Azul oscuro (#1e6279)

Puedes utilizar cualquier otro valor que prefieras. Previsualiza tu trabajo manteniendo activada la vista previa. Cuando estés satisfecho con los resultados, haz clic en Aceptar.

Esto nos deja con un contorno alrededor del perímetro de nuestro panel de Twitch.

Photoshop StrokePhotoshop StrokePhotoshop Stroke

2. Cómo personalizar paneles bonitos para Twitch en Adobe Photoshop

Paso 1

Hemos creado el inicio de unos sencillos paneles de anime para Twitch. Puedes seguir con lo que hemos hecho y cambiar el texto de cada panel, si estás contento con el resultado. Si es así, pasa a la sección 3 para obtener más información sobre cómo guardar tu trabajo.

Sin embargo, también podemos hacer más cosas con esto. Tomemos lo que hemos hecho y llevémoslo más lejos.

Cuando diseño paneles de Twitch personalizados, ya sean paneles de anime de Twitch, paneles de Twitch de juegos o de cualquier otro género, me gusta verlos todos juntos en un solo documento. Esto me ayuda a crear algo cohesivo, y también me ayuda a tener una idea de cómo podría verse en la página del canal juntos.

Comienza creando un Nuevo Documento. A mí me gusta trabajar a 1920 píxeles de ancho por 1080 píxeles de alto. Podrías trabajar a cualquier tamaño que prefieras, ya que este documento es solo para ver y trabajar con más de un panel a la vez.

Photoshop New DocumentPhotoshop New DocumentPhotoshop New Document

Paso 2

A continuación, ve al panel personalizado de Twitch que hemos creado antes. Ve a tu panel de Capas, y selecciona todas tus capas. Puedes hacer esto manteniendo pulsada la tecla Mayúsculas, haciendo clic en la primera capa, y luego haciendo clic en la última capa de la lista.

Photoshop select layersPhotoshop select layersPhotoshop select layers

Paso 3

Arrastra estas capas a tu nuevo documento, y aparecerán en el panel de capas por aquí.

Photoshop layers movePhotoshop layers movePhotoshop layers move

Paso 4

Puede que notes que las cosas se ven un poco diferentes. Nuestra captura de pantalla ya no se ajusta al tamaño correcto.

¡No te preocupes!. Podemos simplemente hacer clic derecho en la PC o Control-clic en Mac y seleccionar Máscara de recorte en nuestra capa de captura de pantalla. Ahora, se ajustará al tamaño que pretendíamos originalmente.

Photoshop Clipping MaskPhotoshop Clipping MaskPhotoshop Clipping Mask

Paso 5

Vamos a hacer otro ajuste aquí. Haz clic en el efecto de capa Trazo que hemos creado, y arrástralo a la capa base de nuestro panel personalizado de Twitch. Esto moverá este efecto a esa capa.

A continuación, podemos borrar nuestra capa original. Para borrar una capa, haz clic en la papelera de la parte inferior del panel Capas.

Photoshop Layer EffectsPhotoshop Layer EffectsPhotoshop Layer Effects

Paso 6

Recomiendo colocar este contenido en su propio Grupo de Capas o carpeta. Podemos hacer esto seleccionando las capas que componen nuestros paneles personalizados de Twitch, y luego haciendo clic en el icono de la carpeta, en la parte inferior del panel de capas.

Sugerencia: También puedes nombrar tus capas y tus carpetas/grupos. De esta forma, podrás saber fácilmente qué es cada cosa. También puedes codificar por colores tus capas/grupos haciendo clic con el botón derecho del ratón en PC o Control-clic en Mac y eligiendo un color. Estos son pasos opcionales con fines organizativos.

Photoshop Group FolderPhotoshop Group FolderPhotoshop Group Folder

Paso 7

Con nuestro trabajo en un grupo, podemos duplicarlo fácilmente. Solo tienes que hacer clic derecho en la PC o Control-clic en el Mac y seleccionar Duplicar grupo. Duplica tu contenido tantas veces como quieras, para tantos paneles de anime de Twitch como quieras crear.

A continuación, selecciona la Herramienta Mover en tu panel de Herramientas. Selecciona una de tus carpetas de grupo duplicadas. Haz clic y arrastra, con la Herramienta Mover activa, para mover los paneles personalizados de Twitch a una nueva posición.

Photoshop duplicate groupsPhotoshop duplicate groupsPhotoshop duplicate groups

Paso 8

Podemos cambiar fácilmente el texto de los distintos paneles con la Herramienta Texto.

Selecciona la Herramienta Texto en tu panel de Herramientas, y luego haz clic en el tipo que quieras cambiar. Edita como lo harías en la mayoría de los procesadores de texto.

Photoshop Type ToolPhotoshop Type ToolPhotoshop Type Tool

Paso 9

Podríamos dejar todos nuestros paneles de anime de Twitch idénticos con un texto diferente, si queremos. Sin embargo, es fácil cambiar las capturas de pantalla, con la forma en que hemos configurado esto.

Abre una nueva captura de pantalla en Adobe Photoshop y sigue las instrucciones de la Sección 1, Paso 2, si necesitas un recordatorio de cómo copiar y pegar esto en tu documento. Utilizaremos otra captura de pantalla de Ponyo.

La captura de pantalla debe estar sobre la base del panel de Twitch. A continuación, haz clic derecho en la PC o Control-clic en Mac y selecciona Máscara de recorte, tal y como hemos hecho antes. Esta es una forma fácil de probar todas las capturas de pantalla que quieras.

Consejo: En el ejemplo de abajo, he cambiado el color del texto a blanco para adaptarlo a esta nueva captura de pantalla. Recuerda que puedes hacer esto desde tu panel de personajes.

Photoshop Clipping MaskPhotoshop Clipping MaskPhotoshop Clipping Mask

Paso 10

Como sabemos que cada panel aquí ya es de 320x160 píxeles, podemos experimentar con la altura y la transparencia también. Vamos a hacer algo un poco diferente para nuestro panel de Twitch acerca de mí.

Selecciona la capa que está debajo de tu captura de pantalla, la capa del panel base. A continuación, ve a Edición > Transformación libre.

Mantén pulsada la tecla Mayúsculas y luego haz clic y arrastra el asa de redimensionamiento superior para dar a nuestro panel de Twitch menos altura. Es esencial que solo estamos cambiando la altura aquí, no la anchura.

Photoshop resizePhotoshop resizePhotoshop resize

Paso 11

Ya que podemos utilizar PNGs transparentes para nuestros paneles de Twitch, vamos a experimentar también con la transparencia.

Primero, cambiemos la Fuente para este panel a Calrose regular. Haz que el texto diga "Sobre mí". Elige un color que contraste; yo elegí un azul oscuro, como el borde del panel.

A continuación, utiliza la Herramienta Mover para situarla en la parte superior del panel, con parte de ella sobresaliendo del límite.

Photoshop Character PanelPhotoshop Character PanelPhotoshop Character Panel

Paso 12

Twitch puede tener un fondo claro u oscuro, por lo que es importante diseñar para ambas posibilidades. Vamos a añadir un trazo al texto aquí, para acomodar eso.

Ve a nuestra capa del panel de fondo, haz clic derecho en la PC o Comando-clic en la Mac, y selecciona Copiar Estilo de Capa.

A continuación, podemos hacer clic derecho en la PC o Control-clic en Mac, en nuestra capa de texto, y seleccionar Pegar estilo de capa. Ahora, nuestro texto tiene un trazo a juego.

Photoshop Text EffectsPhotoshop Text EffectsPhotoshop Text Effects

Paso 13

Puedes utilizar estas técnicas para crear tantos paneles personalizados de Twitch como quieras. ¡Prueba diferentes capturas de pantalla! Es una buena idea probar tu trabajo en un fondo oscuro también (utiliza la herramienta Cubo de pintura en la capa de fondo muy inferior para hacerlo).

Asegúrate de guardar tu trabajo, especialmente como un archivo PSD con capas. De esta manera, puedes volver y hacer más paneles de Twitch lindos de la plantilla que has hecho aquí, en cualquier momento que desees. Aquí hay una muestra de estos mismos diseños de plantillas con diferentes capturas de pantalla.

Cute Anime Twitch PanelsCute Anime Twitch PanelsCute Anime Twitch Panels
Capturas de pantalla de "Ponyo" de Studio Ghibli

3. Cómo guardar y exportar tus paneles de Twitch personalizados

Paso 1

Ahora, vamos a guardar tus paneles para poder subirlos a Twitch. Ten en cuenta que tendremos que exportar y guardar cada panel por separado, de uno en uno.

Cuando estés listo para exportar, haz clic derecho en PC o Control-clic en Mac en el grupo que contiene tu panel de Twitch. Selecciona Fusionar Grupo. Esto aplanará tu grupo en una sola capa, como se ve a continuación.

Ve a Seleccionar > Todo, en la parte superior del programa. A continuación, Editar > Copiar.

Merge Group PhotoshpMerge Group PhotoshpMerge Group Photoshp

Paso 2

Crea un Nuevo documento. Las dimensiones de tu contenido copiado ya deberían estar pegadas en la ventana de Nuevo Documento. Debe tener 320 píxeles de ancho.

Haz clic en Crear para crear este documento.

Photoshop New DocumentPhotoshop New DocumentPhotoshop New Document

Paso 3

A continuación, ve a Edición > Pegar. Tu panel de Twitch aplanado debería ser pegado en este espacio, en una nueva capa, como se muestra a continuación.

Photoshop paste layerPhotoshop paste layerPhotoshop paste layer

Paso 4

Hemos utilizado nuestro panel de Twitch acerca de mí, en este ejemplo, y debe tener la transparencia en la parte superior. Así que vamos a eliminar la capa de fondo aquí. Selecciona la capa de fondo y luego haz clic en el icono de la papelera, en la parte inferior del panel de capas.

Ahora, deberíamos ver un patrón de cuadros en la parte superior de nuestro panel de Twitch acerca de mí. Esto indica que es transparente, tal y como queremos.

Photoshop Delete layerPhotoshop Delete layerPhotoshop Delete layer

Paso 5

A continuación, vamos a Archivo > Guardar como para guardar nuestro trabajo. Elige PNG entre los tipos de archivo disponibles y ponle un nombre a tu archivo. PNG es una gran opción para la transparencia, como tenemos aquí. También puedes subir archivos JPG como paneles de Twitch, pero ten en cuenta que no admiten transparencias.

Repite este paso para guardar todos los paneles que quieras.

Save as PNG fileSave as PNG fileSave as PNG file

¡Y ahí lo tienes!

Hemos creado unos bonitos paneles para Twitch que puedes adaptar como quieras. ¿Qué capturas de pantalla o ilustraciones podrías probar? Diviértete y experimenta con todo tipo de ideas diferentes.

twitch anime panelstwitch anime panelstwitch anime panels
Capturas de pantalla de "Ponyo" de Studio Ghibli

Pero si no tienes Adobe Photoshop, o estás buscando una solución más rápida, puede que quieras probar un creador de paneles de Twitch. Vamos a echar un vistazo a un creador de paneles de Twitch en línea también.

Cómo hacer bonitos paneles de Twitch con un creador de paneles de Twitch online

Paso 1

Vamos a echar un vistazo a un creador de paneles de Twitch online llamado Placeit. Es una herramienta basada en el navegador, lo que significa que puedes diseñar y crear tus paneles de Twitch sin necesidad de ningún software.

La plantilla que utilizaremos en este tutorial es gratuita, es decir, puedes crearla, diseñarla y descargarla sin coste alguno.

Para ver Placeit, dirígete a la página web. Hay muchas plantillas de paneles de Twitch para elegir. Siéntete libre de elegir una. Nosotros usaremos esta, en esta demostración.

Online Twitch Panel MakerOnline Twitch Panel MakerOnline Twitch Panel Maker
PlaceIt es una herramienta en línea que puedes utilizar para crear tus propios paneles personalizados de Twitch en línea.

Paso 2

Una vez que hayamos seleccionado nuestro diseño, podemos entrar de lleno en la personalización. Por ejemplo, puedes hacer clic en los elementos de diseño existentes para seleccionarlos, y luego hacer clic y arrastrar para reorganizarlos en el diseño.

placeit online twitch panel makerplaceit online twitch panel makerplaceit online twitch panel maker

Paso 3

En el lado izquierdo, podemos modificar nuestro texto. Cambia lo que dice el texto escribiendo un nuevo contenido. Debajo del texto, podemos cambiar la fuente y el color de la misma. Pruébalo.

online twitch panel creatoronline twitch panel creatoronline twitch panel creator

Paso 4

También podemos cambiar fácilmente los colores y las imágenes. Echa un vistazo a las opciones de la derecha.

Cambia el color de fondo, los colores de los elementos de diseño y mucho más. También podemos cambiar y añadir imágenes aquí, incluyendo las imágenes ya proporcionadas dentro de Placeit.

Ahora parece un diseño completamente nuevo, ¿no?

cute twitch panels online makercute twitch panels online makercute twitch panels online maker

Paso 5

También podemos cargar imágenes personalizadas. Vamos a probarlo con algunas de las imágenes de Studio Ghibli que hemos utilizado anteriormente en este tutorial.

Lo único que tenemos que hacer es pulsar en Cargar imagen y seleccionar la imagen de nuestro ordenador, y luego Placeit nos permite recortar y ajustar la imagen en nuestro diseño, de la forma que queramos.

custom anime twitch panels onlinecustom anime twitch panels onlinecustom anime twitch panels online

Paso 6

Una vez que hayas creado un bonito panel de Twitch que te guste, es tan sencillo como hacer clic en Descargar para descargar tu trabajo. En este caso, esta plantilla de panel de Twitch personalizada es gratuita, siempre que no utilices ninguna de las imágenes de pago.

Con los contenidos premium, solo tienes que pagar si decides continuar y descargar. Además, el precio es una ganga. Paga a medida que avanzas o hazte con una suscripción para descargar un número ilimitado de diseños.

custom twitch panel makercustom twitch panel makercustom twitch panel maker

Echa un vistazo a estos paneles personalizados gratuitos de Twitch

¿Buscas más inspiración o paneles de Twitch gratuitos que puedas personalizar ahora mismo? Echa un vistazo a estos otros diseños de Placeit que puedes probar hoy mismo.

1. Plantilla de creación de paneles de Gaming Twitch

Twitch Panel MakerTwitch Panel MakerTwitch Panel Maker

Esta bonita plantilla de panel de Twitch utiliza un fondo degradado, pero puedes cambiarlo por cualquier color o fondo que prefieras. Es gratuita, así que ¿por qué no probarla hoy?

2. Plantilla creadora de paneles de Twitch en línea

Online Twitch Panel MakerOnline Twitch Panel MakerOnline Twitch Panel Maker

Aquí tienes otra plantilla de panel de Twitch gratuita que puedes probar ahora mismo. Cambia el tipo de letra, intercambia las imágenes y cambia completamente el diseño, si quieres.

3. Plantilla para paneles de Twitch de Doodle Artwork Cute

Twitch Panel Creator OnlineTwitch Panel Creator OnlineTwitch Panel Creator Online

¿No es bonito este garabato? Si estás buscando paneles bonitos para Twitch, esta puede ser una plantilla divertida para probar. Mezcla los colores o coloca tu información y úsala tal cual.

4. Plantilla para crear paneles de Twitch de Pride Cute

Cute Twitch Panel MakerCute Twitch Panel MakerCute Twitch Panel Maker

En Placeit hay una serie de paneles de Twitch con temática de orgullo que puedes probar. Este tiene un bonito globo arco iris y es gratuito.

5. Plantilla de creación de paneles de Twitch con temática de juegos

Gamer Twitch Panel MakerGamer Twitch Panel MakerGamer Twitch Panel Maker

Este panel de Twitch utiliza algunas imágenes conocidas de juegos, pero puedes elegirlas de la galería de Placeit o subir tus propias imágenes. Ponte manos a la obra y empieza a experimentar con este diseño en tu navegador.

¿Qué paneles personalizados de Twitch vas a crear?

Gracias por explicar hoy cómo crear bonitos paneles para Twitch. Espero que crees paneles maravillosos para tu transmisión en vivo, y que tu contenido tenga mucha participación y éxito. ¡Buena suerte!

¿Quieres aprender más sobre la creación de contenido para Twitch? Consulta estos tutoriales y artículos gratuitos de Envato Tuts+.

One subscription.
Unlimited Downloads.
Get unlimited downloads