() translation by (you can also view the original English article)
¿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.
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.
¡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:
- Constructor de Personajes y Avatars
- Fuente Philadelphia Signature
- Fuente Knicknack
- 20 iconos temáticos de corazón
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.
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!
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.
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).
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.
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.
Paso 7
Después de hacerlo, nuestras formas se han combinado en una sola forma, como se ve a continuación.
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?
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.
Paso 10
¡Voila! La ilustración se limita a la forma, como se muestra a continuación.
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.
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.
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!
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.
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!
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.
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!
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.
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!
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
¡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!
¡Si te ha gustado este tutorial Photoshop y tutorial Twitch, aquí hay algunos otros que te podrían gustar!
31 mejores banners para Twitch hechos con un creador (+ banners offline)
Cómo diseñar banners con un creador de banners para Twitch
¿Estás pensando ingresar en la transmisión de video en vivo? Aquí puedes empezar
Cómo hacer un banner
Cómo elaborar un banner de galaxia para YouTube (con un creador online)
