by
Read Time:14 minsLanguages:

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

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

En este tutorial, aprenderás como crear emotes personalizados para Twitch en Adobe Photoshop. Crearemos un emote a partir de una foto de archivo y un emote desde cero. Cuando termines, podrás cargar tus emotes en tu panel de Twitch si tienes una cuenta de afiliado o socio.

Qué aprenderás en este tutorial de emojis de Twitch

  • Cómo utilizar la función Seleccionar sujeto en Photoshop
  • Cómo utilizar la Herramienta pluma en Photoshop
  • Cómo utilizar la función máscara para recortar fotos
  • Cómo hacer un pincel personalizado perfecto para dibujar en Photoshop
  • Cómo cambiar el tamaño de la ilustración para hacer emojis del chat de Twitch

Recursos del tutorial

Necesitarás los siguientes recursos para completar este proyecto:

¿Qué son los emotes de Twitch?

Puede que te estés preguntando, además de qué son, cómo agregar emojis a Twitch. Los emoticones de Twitch son pequeños iconos de chat que los canales de afiliados o socios pueden ofrecer a sus suscriptores como recompensa para usar en el chat de su canal. Son exclusivos para cada canal, por lo que tener emoticones personalizados es imprescindible si quieres un incentivo para que los espectadores se suscriban.

La mejor parte de crear tus propios emojis personalizados de Twitch es poder aportar algo especial a tus transmisiones. Ya sea que se trate de una broma interna para tus espectadores o simplemente de tu glorioso rostro, agrega ese sabor a tu canal y construye tu comunidad de transmisión.

¡Empecemos con cómo conseguir emoticones en Twitch!

1. Cómo preparar tu foto de archivo para los emotes del chat de Twitch

Paso 1

Abre tu foto de archivo en Adobe Photoshop. Guarda la foto como un archivo .PSD desde el principio para que tu trabajo no se pierda. Agarra la Herramienta Varita Mágica (W) y, en la Barra de Opciones, pulsa Seleccionar Sujeto.

Select your subject using the Select Subject OptionSelect your subject using the Select Subject OptionSelect your subject using the Select Subject Option

Esto no necesariamente seleccionará al sujeto a la perfección, pero en el caso de esta foto, hace que obtener el contorno de tu cabello sea muy fácil en comparación con cortarlo manualmente. En el panel Capas, presiona Añadir una máscara.

Hit Add a Mask to turn your selection into a Layer MaskHit Add a Mask to turn your selection into a Layer MaskHit Add a Mask to turn your selection into a Layer Mask

Paso 2

Con la Herramienta Pluma (P), dibuja una forma alrededor de la cabeza de tu sujeto, teniendo cuidado de delinear su barbilla. Este será el foco de tu emoji del chat de Twitch.

Use the Pen Tool to cut out your subjects headUse the Pen Tool to cut out your subjects headUse the Pen Tool to cut out your subjects head

Paso 3

Crea una carpeta en el panel Capas y arrastra tu capa de trabajo dentro ella. En el panel Trazados, pulsa cargar trazado como selección. Selecciona tu Grupo en el panel Capas y luego presiona agregar máscara de capa.

Apply the mask to the group to maintain image qualityApply the mask to the group to maintain image qualityApply the mask to the group to maintain image quality

Paso 4

A continuación, vas a duplicar tu capa original sosteniendo tu imagen de archivo. Elimina la máscara de capa en esta capa duplicada.

Utiliza la Herramienta Pluma para cortar con cuidado la mano de tu sujeto. Una vez más, cargar trazado como selección y enmascara tu capa.

Use the Pen Tool to carefully cut out your subjects handUse the Pen Tool to carefully cut out your subjects handUse the Pen Tool to carefully cut out your subjects hand

Paso 5

Ahora deberías tener una capa de mano enmascarada y una carpeta de grupo que contiene la capa de la cabeza. Usaremos este documento como base para nuestros emoticones de Twitch.

Now you should have one masked hand layer and one group folder containing the head layerNow you should have one masked hand layer and one group folder containing the head layerNow you should have one masked hand layer and one group folder containing the head layer

2. Cómo personalizar la composición de tu emote de Twitch

Paso 1

Ahora que tenemos nuestra foto de archivo preparada para nuestro emote de sonrisa de Twitch, podemos trabajar en la composición del emoticón. Crea un Nuevo Documento de 500 x 500 píxeles, 72 ppp y el Modo de color configurado en RGB. Asegúrate de que el documento tenga un fondo transparente.

Make a New Document for your twitch chat emoticonMake a New Document for your twitch chat emoticonMake a New Document for your twitch chat emoticon

Paso 2

Copia (Control-C) tu grupo de la cabeza y la capa de la mano de tu archivo de foto de trabajo y Pega (Control-V) en tu nuevo documento. Escala la cabeza y la mano hacia abajo para que quepan en tu composición de emoji de Twitch. Los escalé a aproximadamente el 33%.

Me gusta trabajar en un documento nuevo, de modo que si quiero hacer cambios en la foto del archivo original, no pierdo la calidad de la imagen y siempre puedo cambiar de opinión sobre cómo recorté las capas para el uso de emoticones.

Copy and Paste your head and hand layers into the new documentCopy and Paste your head and hand layers into the new documentCopy and Paste your head and hand layers into the new document

Paso 3

Rota la capa de tu cabeza para que se incline unos 45 ° hacia la mano. También asegúrate de que la capa de la mano esté por encima de la cabeza.

Paso 4

Agrupa (Control-G) tus capas en el panel Capas y haz Doble clic en el grupo para abrir las Opciones de fusión. Selecciona Sombra paralela y usa la siguiente configuración:

  • Modo de fusión: Multiplicar
  • Opacidad: 38%
  • Ángulo: 90 °
  • Distancia: 6 px
  • Extensión: 0%
  • Tamaño: 4 px

Presiona Aceptar cuando hayas aplicado todas estas configuraciones.

Apply a Drop Shadow to your Twitch EmojiApply a Drop Shadow to your Twitch EmojiApply a Drop Shadow to your Twitch Emoji

Paso 5

Guardar (Control-S) tus archivos de trabajo de los emotes. A partir de aquí, pasaremos a crear un emoticón personalizado desde cero, pero si solo te interesa trabajar con una foto de archivo, ¡puedes pasar a la Sección 5 de este tutorial para obtener consejos sobre el tamaño del emote de Twitch!

Save your working fileSave your working fileSave your working file

3. Cómo dibujar emotes personalizados para Twitch

Paso 1

Comencemos a crear nuestro emote personalizado de Twitch con algunas configuraciones de pincel. Siéntete libre de usar los pinceles que quieras para dibujar, pero este es mi favorito actual. En el panel Configuración de pincel, aplica la siguiente configuración:

Forma de la punta del pincel

  • Tamaño: Variable, empecé con 17 px
  • Ángulo: 34°
  • Redondez: 67%
  • Espaciado: 4%

Dinámicas de la forma

  • Variación del Tamaño: 0%
  • Control: presión de la pluma
  • Diámetro mínimo: 21%
  • Variación de redondez: 0%
  • Control: presión de la pluma
  • Redondez mínima: 1%

Transferencia: seleccionado, todo configurado en 0%

Concentración: Seleccionado

Suavizar: Seleccionado

Custom brush settingsCustom brush settingsCustom brush settings

Paso 2

En un Nuevo Documento, este también de 500 x 500 píxeles, crea una Nueva Capa. Toma la Herramienta Pincel (B) y dibuja tu composición básica del emote. Este será el mismo que el emoji de la foto de archivo, con una cara sonriente y una mano haciendo un signo de paz. Me gusta ser rápido y descuidado en mi boceto inicial.

Make a loose sketchMake a loose sketchMake a loose sketch

Paso 3

Reduce la Opacidad de tu capa de boceto inicial a un 30% más o menos y crea una Nueva Capa. Elige un marrón oscuro # 3b0600 o cualquier color oscuro que vayas a usar para tu arte lineal y ajusta tu boceto. Mi segundo boceto a continuación es demasiado detallado para un emote del chat de Twitch, ¡pero la idea básica está ahí!

Tighten up that sketchTighten up that sketchTighten up that sketch

Paso 4

Oculta tu capa del boceto inicial y reduce la Opacidad de tu capa del boceto de trabajo al 30%. Crea una Nueva Capa para tu arte lineal. Nota lo simples que se han vuelto los ojos. Personalmente, se necesitan un par de capas del boceto para que me sienta cómodo con el ajustado trabajo de línea.

Work up your line artWork up your line artWork up your line art

Paso 5

Oculta o elimina cualquier capa del boceto debajo de tu capa de trabajo del arte de línea. Ten en cuenta que el enfoque aquí es una cara grande, una expresión fácil de leer (en este caso muy feliz) y un lindo signo de la paz con la mano. Se perderán demasiados detalles con el tamaño final del emote.

Finalize your line artFinalize your line artFinalize your line art

4. Cómo colorear y completar tu emote de Twitch

Paso 1

En una Nueva Capa debajo de tu arte lineal, comienza a colorear tu trabajo. Me gusta usar el mismo pincel que mi capa de arte lineal, ya que es fácil de pintar con él.

start coloring in your workstart coloring in your workstart coloring in your work

Paso 2

Cuando trabajo en un ícono que eventualmente estará sobre un fondo transparente, encuentro más fácil usar un color muy brillante que no es parte de mi pieza para ayudar a determinar los límites del emote. He configurado mi fondo en verde neón #00ff00, aunque puedes probar con otro color si te funciona mejor.

Colorea la piel, la boca y los ojos con colores planos antes de añadir sombras o iluminaciones.

Fill in your design with flat colors firstFill in your design with flat colors firstFill in your design with flat colors first

Paso 3

Me gusta resaltar un poco el cabello agregando algunas formas divertidas de un color más claro. Ten en cuenta que he delineado la parte inferior de los ojos con un marrón más oscuro que el tono de piel y he hecho lo mismo debajo de la nariz y en las orejas. A menudo, al colorear un dibujo, coloco colores planos, sombras y luces en capas separadas para facilitar la edición.

Adding shadows and highlightsAdding shadows and highlightsAdding shadows and highlights

Paso 4

No pongas demasiados detalles en las sombras o los reflejos para tu emote del chat de Twitch. Perderás muchos de estos detalles cuando se cambie el tamaño para usarlos en el chat de tu canal, pero crear un dibujo más grande significa que puedes usarlo y reutilizarlo de varias formas fuera de los emojis.

Twitch chat emote with coloring finishedTwitch chat emote with coloring finishedTwitch chat emote with coloring finished

5. Cómo hacer que tu emote de Twitch tenga el tamaño correcto

Paso 1

El tamaño del emote de Twitch es bastante importante. En su mayoría, aparecen bastante pequeños dentro de la ventana del chat, y querrás que los usuarios sepan lo que han seleccionado y que otros sepan lo que están tratando de comunicar.

Twitch especifica tres tamaños de emoji:

  • 112 px para plataformas más grandes
  • 56 px para pantallas retina
  • 28 px para web

Con uno de tus archivos de emoticones del chat de trabajo abierto, ve a Archivo> Exportar> Exportar como. Utiliza la siguiente configuración de archivo para tu primera exportación:

Configuración del archivo:

  • Formato: PNG
  • Transparencia: Seleccionada

Tamaño de la imagen

  • Ancho: 112
  • Alto: 112
  • Volver a muestrear: bicúbico más nítido (esto es mejor para la reducción)

Repite estos pasos en los otros tamaños para cada uno de tus íconos de modo que tengas tres archivos PNG separados para cada diseño de ícono.

Save your Twitch emote in 3 separate sizesSave your Twitch emote in 3 separate sizesSave your Twitch emote in 3 separate sizes

Paso 2

¡Observa lo pequeño que es el emote de 28 píxeles! Es difícil de ver, pero incluso con este tamaño, ¡podemos distinguir claramente la sonrisa del emote de Twitch y la mano! Experimenta con otras expresiones o composiciones y prueba el tamaño en este menú Exportar.

Al exportar, asegúrate de darle a cada emote de Twitch un nombre único para que puedas encontrarlos fácilmente mientras lo subes a tu canal.

Check out how small this Twitch emote isCheck out how small this Twitch emote isCheck out how small this Twitch emote is

6. Cómo subir emotes en Twitch

Paso 1

¡Lo has hecho! Ahora para responder a la pregunta de cómo obtener emotes en Twitch. Como se indicó anteriormente, si eres un afiliado, todo lo que necesitas hacer es preparar tus emoticones en el tamaño correcto, como hicimos anteriormente.

Paso 2

Simplemente dirígete al Panel de control de tu canal para cargarlos dentro de tus preferencias de Afiliado o Socio. Encontrarás la guía de Twitch sobre emotes increíblemente útil para esta parte.

Depende de ti si cargas tres tamaños separados de emoticones de Twitch en su modo avanzado o dejas que el sitio comprima un solo archivo más grande en modo simple. También encontrarás respuestas a preguntas comunes como "¿Cuántos emotes puedo tener en Twitch?" o "¿Cuánto tiempo lleva aprobar Emotes en Twitch?"

¡Buen trabajo, has terminado!

¡Ahora sabes cómo crear tus propios emotes de chat de Twitch personalizados! Ya sea que estés trabajando con una foto o creando tu emote desde cero, ¡tienes lo básico para crear un conjunto divertido de emojis de chat como incentivos como suscriptor para tu canal!

Finished Twitch chat emotesFinished Twitch chat emotesFinished Twitch chat emotes

5 increíbles paquetes de emojis para usar en Twitch

Si prefieres usar algunos emotes del chat de Twitch prefabricados, Envato Elements te tiene cubierto con estos fantásticos conjuntos:

30 iconos emojis

30 emoji icons Set of 30 Emoji Icons30 emoji icons Set of 30 Emoji Icons30 emoji icons Set of 30 Emoji Icons

Este conjunto de emojis es atrevido, simple y divertido, con una variedad de emoticones de sonrisa de Twitch en una variedad de expresiones.

Paquete de 100 Emojis y Smiley paquete Vol 1

100 Smiley Emojis100 Smiley Emojis100 Smiley Emojis

Este conjunto de emoticones es lindo, simple, lleno de divertidos colores brillantes que se destacan fácilmente en un mar de comentarios. Las expresiones son fáciles de leer, lo que hace que este conjunto sea perfecto para chatear.

Emoticones más comúnmente utilizados

48 Emoji Bundle of Icons48 Emoji Bundle of Icons48 Emoji Bundle of Icons

Este paquete de iconos tiene un diseño muy variado. Va mucho más allá de una variedad de caras sonrientes, ¡brindando a sus usuarios mucho de qué hablar!

30 iconos de avatar y emoción - estilo plano

30 Avatar and Emotion Icons30 Avatar and Emotion Icons30 Avatar and Emotion Icons

Rompe con la simplicidad total con algunos avatares perfectos para hacer tu chat un poco más personal.

Comida rápida - Vector de conjunto de caracteres

Fast Food vector chat iconsFast Food vector chat iconsFast Food vector chat icons

¡Vuélvete raro y salvaje con algunos divertidos íconos de comida rápida para tu chat de Twitch! ¡Especialmente útil si transmites algo como Cooking Mama o Burger Time!

One subscription.
Unlimited Downloads.
Get unlimited downloads