7 days of PS Actions, graphics, templates & fonts - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Design & Illustration
  2. Adobe Photoshop

Cómo Hacer Paneles para Twitch

Scroll to top
Read Time: 18 mins

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

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

¿Vas a configurar tu transmisión en vivo en Twitch? ¿Deseas crear paneles para Twitch para tu canal? Tus paneles para Twitch se encuentran debajo del stream, este es un espacio personalizable donde puedes agregar contenido para tu audiencia. 

En este tutorial Photoshop y tutorial Twitch explicaremos cómo hacer paneles para Twitch en Adobe Photoshop, así como los conceptos básicos para usarlos.  

Entonces, ¿por qué hacer plantillas para paneles de Twitch? ¿Para qué son? Bueno, el espacio debajo de tu stream o transmisión puede ser un gran lugar para compartir información adicional con tu audiencia, incluso cuando no estás en línea. Cosas como tu horario de transmisión, tus enlaces de redes sociales, las reglas de tu canal y más pueden ir en este espacio. 

¡Lo que es mejor para ti y tu canal va a depender en gran medida de tus objetivos! Dicho esto, decidir sobre la mejor dirección puede ser un poco abrumador.

paneles para Twitch en Placeitpaneles para Twitch en Placeitpaneles para Twitch en Placeit

Placeit se está convirtiendo rápidamente en uno de mis lugares favoritos para inspiración y maquetas de diseño rápido. También tiene un montón de contenido relacionado con Twitch, desde superposiciones para stream hasta paneles para Twitch. ¡Es genial para intercambiar ideas sobre paneles de Twitch! 

Puedes navegar por los diseños y personalizarlos, directamente en tu navegador, y no me refiero solo al texto, tampoco. Cambiar colores, mover partes del diseño, ¡y mucho más! ¡Si estás buscando un lugar para crear paneles para Twitch fácil, aquí tienes!

Y, de nuevo, esto no termina con paneles para Twitch. Placeit tiene una gran cantidad de divertidas, coloridas y llamativas plantillas para stream, perfectas para usar con tu iteración favorita de OBS. 

Si estás buscando inspiración para crear paneles para Twitch totalmente personalizables en línea, Placeit podría ser justo lo que estás buscando.

Twitch Overlay Maker PlaceitTwitch Overlay Maker PlaceitTwitch Overlay Maker Placeit

¡Pero primero, vamos a iniciar a hacer paneles para Twitch desde cero!

Lo que Necesitarás:

Los siguientes activos se utilizan en este tutorial Photoshop y tutorial Twitch:

Ten en cuenta que tus paneles para Twitch deben reflejar tu canal. ¿Qué tipo de estética se adapta mejor a tus objetivos?

1. Cómo Crear Gráficos Personalizables Para el Panel de Twitch

Paso 1

Vamos a empezar en Adobe Photoshop. Crea un nuevo documento.

Queremos que nuestro documento tenga 350 píxeles de ancho: el tamaño del panel de Twitch se escalará a 350 píxeles de ancho. Esto significa que, si creas o subes algo más grande, se ajustará a este tamaño. En mi opinión, a menudo es una mejor idea el solo trabajar con el tamaño dado, en este caso, 350 píxeles.

¡Sin embargo, esto también significa que tenemos cierta flexibilidad con la altura! Podríamos, por ejemplo, trabajar con una imagen más larga o algo corta. Todo depende de qué información te gustaría compartir y cómo te gustaría compartirla. 

En este ejemplo de cómo hacer paneles para Twitch, los paneles de información de Twitch podrían beneficiarse de imágenes más pequeñas y más texto. hHacer paneles para Twitch de donación podría beneficiarse de una imagen más grande. 

Voy a ir con 350 píxeles de ancho por 125 píxeles de altura para mis paneles de Twitch más pequeños. 

Selecciona Transparente como contenido de fondo. Una vez que estés satisfecho con tus selecciones, da clic en Crear.

Creating a New DocumentCreating a New DocumentCreating a New Document

Paso 2

Observa el fondo a cuadros gris en nuestro nuevo documento. Así es como Photoshop indica transparencia, así que, en este ejemplo de cómo hacer paneles para Twitch, si guardáramos esta imagen como un PNG transparente, este espacio a cuadros aparecería transparente y "vacío".

Voy a crear una forma que no llene todo nuestro lienzo, dejando algo de este espacio transparente.

Vamos a empezar creando una nueva capa. Ve al panel Capas. Si no ves este panel, ve a Ventana > Capas, en la parte superior de la pantalla.

Crea una Nueva Capa haciendo clic en el icono Nueva Capa, como se resalta a continuación.

Nota: puedes cambiar el nombre de las capas haciendo clic en el nombre de la capa en el panel Capas. ¡A menudo recomiendo esto, porque ayuda a mantener tu trabajo organizado, especialmente si terminas con diez, veinte, o más capas!

Creating a New LayerCreating a New LayerCreating a New Layer

Paso 3

Twitch tiene un tema a la vez claro y oscuro. Esto significa que cualquier imagen que utilicemos aquí necesita funcionar tanto en un fondo claro como en uno oscuro. Nuestros paneles para Twitch también pueden tener transparencia, por lo que, una vez más, es importante que la visibilidad sea fuerte tanto en fondos oscuros como claros. 

Me gusta empezar creando un fondo claro y un fondo oscuro, por lo que puedo alternar fácilmente entre los dos y probar mi trabajo. Para hacerlo, usemos nuestras dos capas. Renombré mis capas Fondo Claro y Fondo Oscuro.

Utilicé la herramienta Cubo de Pintura para rellenar cada capa con un color blanco diferente en la capa "Fondo Claro" y un gris oscuro en la capa "Fondo Oscuro". 

¿No estás seguro de cómo cambiar tus colores activos? Los colores de primer plano y de fondo se encuentran en el panel de herramientas. Simplemente haz clic en los bloques de colores para abrir el selector de color y elegir un nuevo color. 

Adding ColorAdding ColorAdding Color

Paso 4

Ahora, selecciona la herramienta de Rectángulo redondeado, en tus herramientas de forma. Si no ves la Herramienta de rectángulo redondeado, haz clic y mantén presionada la Herramienta de forma activa para expandir esta parte de tus Herramientas. ¡Verás que tienes muchas formas diferentes para elegir!

Con la herramienta seleccionada, echa un vistazo a tus Opciones en la parte superior de la pantalla. Allí, puedes ajustar el radio de esquina de tu rectángulo antes de dibujar. Así es como se redondeará el rectángulo. Elegí 25 píxeles.

Luego, haz clic y arrastra para dibujar una forma en nuestra nueva capa. Puedes hacer esta forma de cualquier color que prefieras que funcione con nuestro fondo claro y oscuro. ¡Fui con un azul claro!

Puedes ajustar tu forma usando la herramienta Mover (activa Mostrar controles de transformación, en tus opciones, para cambiar el tamaño).

Creating a RectangleCreating a RectangleCreating a Rectangle

Paso 5

Ahora, repitamos este proceso, pero con una elipse.

Crea una nueva capa. Luego, selecciona la herramienta Elipse. 

Haz clic y arrastra para crear una elipse. Colócala encima de nuestro rectángulo redondeado.

Adding an EllipseAdding an EllipseAdding an Ellipse

Paso 6

Quiero unir estas formas para que sean en gran parte una sola forma. 

Para hacerlo, selecciona las dos capas de forma: puedes hacer esto manteniendo presionado Control (en el PC) o Comando (en Mac) mientras haces clic, para seleccionar varias capas a la vez.

Una vez que hayas seleccionado ambas capas de forma, haz clic con el botón derecho (en el PC) o da clic en Control (en Mac). Selecciona Combinar formas de la lista resultante de opciones.

Merge ShapesMerge ShapesMerge Shapes

Paso 7

Después de hacerlo, nuestras formas se han combinado en una sola forma, como se ve a continuación.

Two Shapes Merged TogetherTwo Shapes Merged TogetherTwo Shapes Merged Together

Paso 8

Pensé que podría ser divertido probar un avatar aquí, ¡así que usé un creador de avatar para crear un personaje lindo! Puedes verlo aquí. Requiere Adobe Illustrator, pero es muy fácil de usar (¡y muy divertido!).

Una vez que había creado mi personaje, lo copié y lo pegué en mi documento. Es mi capa superior y está encima de las formas que creamos antes.El contenido gráfico es opcional, pero puede añadir mucho a la forma en que presentas tu canal.

¿Usarás algún tipo de logotipo? ¿Un avatar o personaje? ¿Qué asocias visualmente con tu canal y tu trabajo? 

Adding a characterAdding a characterAdding a character

Paso 9

Sin embargo, quería que el personaje se quedara dentro de la forma. ¡Las máscaras de recorte son justo lo que el médico ordenó para esto!

Para aplicar una máscara de recorte, selecciona la capa. Luego, da clic con el botón derecho (en el PC) o da clic en Control (en Mac). Selecciona Crear máscara de recorte en la lista de opciones resultante.

Ten en cuenta que el arte tiene que estar en la parte superior de la forma, queremos que la obra de arte se limite al espacio de la forma.

Adding a Clipping MaskAdding a Clipping MaskAdding a Clipping Mask

Paso 10

¡Voila! La ilustración se limita a la forma, como se muestra a continuación.

Clipping Mask AppliedClipping Mask AppliedClipping Mask Applied

Paso 11

A continuación, agreguemos algún tipo a nuestro panel para Twitch, usando la herramienta de texto. 

Con la herramienta de Texto seleccionada en el panel Herramientas, simplemente da clic en tu lienzo para comenzar a escribir. El texto se colocará automáticamente en una nueva capa. 

Usé la fuente Philadelphia Signature, y decidí hacer este un panel de Twitch About Me.

Adding TextAdding TextAdding Text

Paso 12

A continuación, agreguemos una sombra a nuestra forma combinada. 

Para ello, selecciona la capa que contiene nuestra forma azul claro. Luego, da clic en Agregar estilos de capa, en el panel Capas. En el menú resultante, selecciona Sombra.

Adding Layer StylesAdding Layer StylesAdding Layer Styles

Paso 13

Aquí están las opciones de estilo de capa y los valores que decidí usar. 

El modo de mezcla se establece en Normal: se muestra como un color normal y sólido.

La opacidad es del 100%

Ajusta el ángulo, la distancia, el diferencial y el tamaño a tu gusto. Elegí mantener mi distancia en 3, el diferencial en 100% y mi tamaño en 2.

Te recomiendo activar la opción Vista previa para que puedas previsualizar cómo afectan estos valores a tu trabajo. En mi opinión, esa es la mejor manera de aprender el impacto visual de estos valores en tu trabajo: ¡ve una vista previa en vivo y pruébala!

Layer Style OptionsLayer Style OptionsLayer Style Options

Paso 14

¡Y aquí está nuestra sombra, como se muestra a continuación!

Observa, en mis capas, vemos los "Efectos" y "Sombras" que se muestran bajo la capa donde se han aplicado estos efectos. Haz doble clic en esto para editar tu estilo de capa.

También podemos activar y desactivar su visibilidad haciendo clic en el símbolo del ojo al lado de cada palabra, al igual que podemos alternar la visibilidad en toda la capa.

Layer StylesLayer StylesLayer Styles

Paso 15

Vamos a tratar de añadir otro efecto a nuestro trabajo. Me gustaría añadir un gradiente sutil aquí.

Primero, voy a crear una máscara de recorte adicional. Puedes crear una nueva capa, luego seguir el mismo proceso que antes: haz clic con el botón derecho (en el PC) o da clic en Control (en Mac), luego selecciona Crear máscara de recorte.

Sin embargo, si tienes seleccionada la capa de forma y creas una nueva capa, automáticamente se convertirá en una máscara de recorte, intercalada entre nuestras otras máscaras de recorte. ¡Conveniente!

Create a New Clipping MaskCreate a New Clipping MaskCreate a New Clipping Mask

Paso 16

Selecciona los colores que te gustaría utilizar. Fui con un suave azul claro y un púrpura claro. Nuestro gradiente pasará gradualmente de este primer color al segundo. 

Luego, usé la herramienta de Degradado en nuestra nueva máscara de recorte. Observa cómo el degradado está confinado dentro de la forma.

Adding a GradientAdding a GradientAdding a Gradient

Paso 17

¡Como toque final, decidí cambiar el color de la camisa de mi avatar! Usé la herramienta de Cubo de pintura para llenar fácilmente este color.

Recuerda, al usar cualquier herramienta, ¡asegúrate de que tienes la capa correcta seleccionada!

Finishing touchesFinishing touchesFinishing touches

Paso 18

Una vez que estés satisfecho con tu trabajo, ¡recuerda Guardar

Recomiendo guardar una copia de tu trabajo, así, para que puedas hacer varias plantillas para paneles de Twitch, sin preocuparte de sobrescribir nuestro archivo original. 

En este ejemplo de cómo hacer paneles para Twitch, es posible que quieras un panel para Twitch de About Me, un panel de Discord Twitch, o tal vez algo para tu canal de YouTube. 

Esencialmente, podemos guardar nuestro original como una plantilla para paneles de Twitch y usarlo de nuevo para hacer paneles para Twitch diferentes. 

Algunos de tus paneles de Twitch podrían beneficiarse de verse uniformes. En este caso, crear plantillas para paneles de Twitch adicionales puede ser tan simple como editar su texto. ¡Vamos a empezar a crear paneles para Twitch por ahí!

Primero, copié mi capa de texto "Sobre mí". Puedes arrastrar la capa hacia abajo hasta el icono Nueva capa para duplicar fácilmente las capas, o hacer clic con el botón derecho (en el PC) o hacer clic en Control (en Mac), y luego seleccionar Duplicar capa

Para editar una capa de texto, simplemente da clic con la herramienta de Texto. Luego, reemplaza el texto. ¡Voila! Ahora tienes una segunda plantilla para paneles de Twitch. 

Editing the typeEditing the typeEditing the type

Paso 19

Pero algunos de tus paneles para Twitch podrían beneficiarse de más variación que una edición de texto. Tal vez quieras un panel de seguimiento de Twitch, o algo que anime a los espectadores a suscribirse a tu canal en otro lugar.

En este ejemplo de cómo hacer paneles para Twitch, he creado una variante de nuestro trabajo para un canal de YouTube. 

Puedes utilizar la herramienta Mover para mover y reorganizar fácilmente tus contenidos. Quería que este panel se destacara de los demás, así que usé un icono de redes sociales para comunicar visualmente que este streamer tiene presencia en YouTube. 

¡Recuerda guardar copias de tu trabajo, en lugar de sobrescribir el original!

Rearranging the LayoutRearranging the LayoutRearranging the Layout

Paso 20

Pero digamos que realmente queremos mezclar las cosas. Tal vez queremos tomar el panel de Twitch que hemos diseñado y hacer algo muy variado de él. No te olvides de guardar antes de continuar, de nuevo, ¡es una buena idea guardar una copia!

Ajustemos nuestro tamaño de lienzo. Para hacerlo, ve a Imagen > Tamaño de lienzo. Selecciona píxeles como unidad de medida (puedes, por ejemplo, ver pulgadas o centímetros, según la configuración predeterminada). 

Recuerda, las dimensiones de nuestro panel para Twitch se establecen deliberadamente en 350 píxeles de ancho, esto es lo que Twitch redimensionará nuestro trabajo. Así que dejemos el ancho en paz. Para la altura, sin embargo, demos más espacio a nuestro trabajo. Este panel de Twitch será más grande que los demás. Cambié la altura a 260 píxeles. 

Changing the Canvas SizeChanging the Canvas SizeChanging the Canvas Size

Paso 21

Con mi mayor tamaño de lienzo, reorganicé y revisé partes de mi diseño. En este ejemplo de cómo hacer paneles para Twitch, regresé y dejé mi elipse y mi rectángulo redondeado separados. Usé los mismos colores de degradado.

Dado que este panel variará más que mis otros, decidí usarlo para mi panel de donación de Twitch.

how to make a donation panel on twitchhow to make a donation panel on twitchhow to make a donation panel on twitch

Paso 22

¿Recuerdas nuestra sombra?

Esta vez decidí probar una Sombra Interior, este es otro Estilo de Capa, ¡y funciona casi de la misma manera! ¡Puedes encontrarlo en Agregar estilo de capa, en tu panel de Capas, como antes! 

Esta capa es un rectángulo redondeado blanco con el modo de fusión establecido en Color Burn. Esto crea una superposición que le da al interior de mi rectángulo de color esa sombra interior. ¡Inténtalo!

¿No estás familiarizado con los estilos de capa y quieres saber más? ¡Mira este tutorial Photoshop! Puedes hacer algunas cosas realmente interesantes con los estilos de capa.

Adding Layer StylesAdding Layer StylesAdding Layer Styles

Paso 23

Finalmente, quería algunos toques finales lindos. Diviértete con tus paneles para Twitch: considera agregar gráficos, fuentes y colores que mejor reflejen tu stream, tu personalidad y tu canal.

Utilicé estos iconos con temas de corazón y la fuente Knicknack para agregar algunos diseños extras al hacer paneles para Twitch. 

¡Una vez más, ten en cuenta que el fondo aquí será transparente! 

¡Asegúrate de elegir Guardar como, para guardar copias de tu trabajo! ¡No sobrescribas tu original o variantes de tu diseño!

Twitch Donation Panel Twitch Donation Panel Twitch Donation Panel

2. Cómo Guardar los Gráficos del Panel de Twitch

Paso 1

Ahora que hemos creado algunos paneles de Twitch, vamos a guardarlos y exportarlos, listos para cargarlos en nuestro canal de Twitch.

Lo primero es lo primero, tenemos que deshacernos de nuestras capas de fondo. 

Selecciona tus capas de fondo. Para seleccionar más de una capa a la vez, mantén presionado Control (en el PC) o Comando (en Mac) mientras haces clic, para seleccionar varias capas. 

Selecting LayersSelecting LayersSelecting Layers

Paso 2

Luego, da clic en el icono Papelera en la parte inferior del panel Capas para eliminar las capas seleccionadas. 

Así es como se ve mi trabajo con mis capas de fondo eliminadas. Una vez más, observa el patrón a cuadros: ¡así es como Photoshop indica visualmente la transparencia, y eso es lo que queremos! Queremos que el fondo sea transparente. 

Transparent backgroundTransparent backgroundTransparent background

Paso 3

¡Ahora es el momento de fusionar nuestro contenido!

De nuevo, selecciona todas las capas visibles. Si este proceso no está claro, vuelve al paso 1. Con todas las capas visibles seleccionadas, da clic con el botón derecho (en el PC) o da clic en Control (en Mac), y luego selecciona Combinar visible, como se muestra a continuación.

Merge VisibleMerge VisibleMerge Visible

Paso 4

Así es como se ve mi trabajo con todas mis capas fusionadas en una. Observa cómo ahora solo tengo una capa en mi panel de Capas, y el área alrededor de mi panel de Twitch se ve como un patrón a cuadros gris. Esto significa que el fondo es transparente. 

No vayas a Archivo > Guardar, ¡o sobrescribirá tu trabajo! Generalmente es una buena idea guardar una versión en capas de tu trabajo. De esta manera, si quieres volver atrás y hacer ediciones, puedes hacerlo fácilmente.

En su lugar, ve a Archivo > Guardar como para guardar una copia de tu trabajo. Queremos guardar esto como un archivo PNG, por lo que nuestra imagen PNG tiene esta transparencia. 

Merged ImageMerged ImageMerged Image

3. Cómo usar Paneles de Twitch

Paso 1

Ahora, vamos a investigar cómo configurar los paneles de Twitch.

Justo debajo de la parte de video de tu propio canal, verás un botón Editar paneles que puedes activar o desactivar. Cuando Editar paneles esté activo, verás el color púrpura y la marca de verificación.

Edit Twitch PanelsEdit Twitch PanelsEdit Twitch Panels

Step 2

Esto es lo que parece cuando agregamos un nuevo panel. Haz clic en el signo Más para agregar un panel.

Luego, da clic en Agregar un panel de texto o imagen, para agregar texto o imágenes. 

Add an Image Twitch PanelAdd an Image Twitch PanelAdd an Image Twitch Panel

Paso 3

Aquí están nuestras opciones de panel Twitch. 

Título del panel: este es un título de texto que podemos dar a nuestro panel. En este caso, deja esto en blanco. De lo contrario, habrá un texto de encabezado grande sobre nuestra imagen.

Añadir imagen: haz clic en este para agregar la imagen del panel de Twitch.

Link a: aquí va la URL asociada con el panel de Twitch. Así que, en este ejemplo de cómo hacer paneles para Twitch, si quieres que los espectadores hagan clic en el panel y los lleve a tu tienda o a tu canal de YouTube, pon esa URL aquí. 

Descripción: se trata de un texto que se mostrará en tu panel. Puedes usar Markdown para añadir formato a tu texto. 

Twitch PanelTwitch PanelTwitch Panel

Paso 4

¡Así que sigamos adelante y agreguemos una de nuestras imágenes del panel de Twitch! Decidí comenzar con mi panel de About Me. 

Haz clic en Agregar imagen para agregar tu imagen. Localiza el archivo en tu computadora y luego Twitch te dará una vista previa, como la que se muestra a continuación. Asegúrate de cambiar el tamaño del área activa para incluir toda la imagen.

Cuando estés satisfecho con la vista previa, da clic en Listo.

Adding an ImageAdding an ImageAdding an Image

Paso 5

Ahora, vemos una vista previa de nuestra imagen del panel de Twitch, como se muestra a continuación.

He decidido añadir un poco de texto aquí, aparecerá debajo de mi imagen del panel de Twitch. 

Aquí hay una hoja de trucos rápida, cuando se trata de un Markdown básico que puedes usar para formatear el texto en tus paneles de Twitch:

  • *Ejemplo* -un asterisco, a cada lado del texto, mostrará el texto en cursiva.
  • **Ejemplo** -dos asteriscos, a cada lado del texto, mostrarán el texto en negrita. 
  • Enlaces: para incluir un enlace de texto, formatea el texto de la siguiente manera: [Envato](https://envato.com).
  • Regla horizontal: incluye cinco asteriscos para agregar una regla horizontal
  • Listas desordenadas: usa +, -, o * para crear una lista desordenada de elementos. 

¡Y hay más! Echa un vistazo a los archivos de ayuda de Twitch para obtener más información sobre las formas en que puedes formatear tu texto.

Editing Twitch Panel InfoEditing Twitch Panel InfoEditing Twitch Panel Info

Paso 6

¡Aquí hay una vista previa de cómo se ve mi panel de About Me Twitch, tanto en el tema oscuro de Twitch y como en el tema claro!

Puedes alternar entre los temas en la configuración de Twitch.  

Preview of finalized panelsPreview of finalized panelsPreview of finalized panels

Paso 7

Sin embargo, ¡hay aún más que puedes hacer con tus paneles Twitch! 

En lugar de un panel de imagen o de texto, también puedes usar paneles de extensión, como se muestra a continuación. Agrega un panel de extensión requiere el Administrador de extensiones. No nos centraremos en esto, en este tutorial Photoshop y tutorial Twitch, ¡pero échale un vistazo! Hay mucho que probar, como una cuenta atrás para tu siguiente transmisión, tablas de líderes, ¡y mucho más! 

Extension Twitch PanelsExtension Twitch PanelsExtension Twitch Panels

¡Y Eso es Solo el Comienzo!

¡Gracias por acompañarme en este tutorial Twitch y tutorial Photoshop! ¡Espero que hayas aprendido algunos consejos y trucos que te ayudarán con tus propios paneles de canal de Twitch! Hay muchas formas diferentes en las que puedes crear paneles para Twitch, ¡y muchas cosas creativas que también puedes hacer al crear paneles para Twitch!

¡Buena suerte y feliz transmisión!

¿Buscas ayuda extra? ¿Necesitas ayuda de diseño? ¿Quizás una introducción o un outro para tu canal de Twitch? ¡Echa un vistazo a Placeit

PlaceIt TwitchPlaceIt TwitchPlaceIt Twitch

¡Si te ha gustado este tutorial Photoshop y tutorial Twitch, aquí hay algunos otros que te podrían gustar!

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.