Articles, Blog

How to Design EMOTES for TWITCH [CC]

November 9, 2019


Hey Dreamchasers, it’s Jacey. So today I want to talk to you about how to
design an emote. I’ve gotten some really nice feedback about
my emotes. So I thought I’d share with you guys a little
bit about my thought process and sort of what goes into making them. There’s honestly a lot more to it than I
would have even guessed starting out. At first glance emotes seem like really simple
art work—and they are! But there’s a lot of thought that goes into
making something that is recognizable and clear at such a small size. So anyway, let’s dive in! I guess the first thing to figure out is what
kind of emote you want for your channel. This really depends on your channel, so I
can’t answer that for you. I have some thoughts on what subject matter
makes a good emote, but I’m gonna save it for another video. This video is just gonna focus on the technical
art and design aspects. Before you even start your emote, you need
to know how big it should be, what file type–al that stuff.. When you’re uploading an emote to Twitch,
they ask you for a png in 3 sizes: 112×112, 56×56 and 28×28. Personally, when I start making an emote I
make it 500×500 pixels at 72 DPI. Technically this size is large enough to make
a sticker out of it, but it’s small enough that it will shrink down it will still look
okay. If you work too large and you shrink it down,
you’re gonna lose all this detail that you wasted time on. But working a little larger has the benefit
of when you shrink you art it’s gonna look a little better. Some of the mistakes you made aren’t going
to be as visible. My first piece of advice is keep it simple. It’s really tempting when you design an
emote to fill it with tons of details and beautiful shading, but that’s not always
a great idea. I know it’s like “oh I’m gonna be the
emote artist that makes the most beautiful, elaborate emotes. But really, look at other arists and see what
they do. A lot of them keep it really simple. Once you shrink down your artwork to the sizes
it will appear in chat, all those details will be lost. Not only is it a waste of time, those details
will actually make your emote look muddy and not read as well. My second piece of advice is fill the box. Since emotes are so small, it helps to fill
up as much of the space you have to work with as possible. If you have dead space around the sides or
the top of your emote, see if you can’t increase the size of your artwork a bit to
have it read better. Fill that space as much as possible.. Sometimes that means cropping and cutting
something off, or getting creative with how you place things. But it’ll be worth it because your emote
is gonna read so much better. Most emotes are like emoji’s right? With a character and an expression. You want to exaggerate those expressions. Don’t be afraid to get really cartoony. Big eyes and mouths on your emote characters
really sell the expression. Noses don’t read well when resized, so I
usually don’t bother. Basically you want to design a chibi or an
emoji. Sometimes when I’m trying to figure out
how to draw a specific expression I’ll just google “chibi expressions” or “emoji
expressions” to get ideas. You don’t want to copy or trace anyone else’s,
but you can use them to get an idea of how to convey emotions as simply as possible. By the way, another thing that can help with
expressions is the angle of the head. A head tilted to the side might seem friendly
or confused, as where a head thrown back might mean the character is upset or excited. My next tip is add contract. Contrast is so important in emotes because
when they’re shrunken down, your eye is only really making out basic shapes. If you’re relying too heavily on your linework
then your emotes will look like monochromatic blobs at the smaller sizes. If you’re not sure if you added another
contrast, look at your emote in greyscale. If all of the colors suddenly look like the
same shade of grey, you need more contrast. Mouths are especially easy to do this with
accidentally. Make sure you use a darker pink/red for the
mouth so it stands out when you shrink it down. This is a personal preference, but I really
prefer colored linework. I think colored linework looks better than
black lines on emotes. When you resize your emotes to make them smaller,
the lines become kind of blurry and hard to make out. It’s also hard to tell different things
apart, like where the face is and where the hair is. The different line colors will help separate
each section and makes it easier to read at a small size. Speaking of linework, don’t be afraid to
make it thick. Go a little thicker than you think they need
to be. A lot of the time when you’re working larger
and you shrink your art, the lines kind of get lost. Play around with it until it looks right to
you. Test your emote on Black and White
Because people can choose between light and dark mode, your emotes have to look good on
both white, and dark gray backgrounds. That can be tricky depending on the colors
you’ve chosen. If your emote is dark and blends in with a
dark background you can try a white outline around your emote, but personally I think
that just looks distracting. I’ve experimented a lot with this and generally
I like to make sure all of the colors in my emote are at least slightly lighter than the
dark background. Text is tricky to pull off in emotes. I’ve never really designed emotes that were
all text, but I’ve added text to a few. As a general rule, I’d say try to keep it
to 4 or 5 letters at most. I obviously broke that rule with my No Chill
emote, but it was my first emote and I struggled with it a lot. I edited the text a million times before I
got it to a point where you can read it… kinda. And lastly, Test, Test, Test! Your emote might look great in your art program,
but it’s not the same as seeing it in chat. Obviously getting your emotes approved on
Twitch can take a while, but you can upload them to a discord server and see how they
look there. I have a private discord server just for testing
emotes. Make sure you also use them in a sentence
and as reactions so you can see them at all the different sizes. Pay special attention to details like hands,
glasses or anything that might not read very well at a small size. That’s it for this video! I’m planning to do a part 2 where I answer
some frequently asked questions I get about emotes. If you have a question for me, PLEASE let
me know in the comments and I’ll try to answer it in an upcoming video. Thanks you so much for watching! Until next time, chase your dreams!

100 Comments

  • Reply Basel May 10, 2018 at 10:29 pm

    Thanks !

  • Reply Jennifer Charlee Art May 10, 2018 at 11:53 pm

    Yeeeeeeeesssss! I need this!!a

  • Reply Olivia Oltmanns May 11, 2018 at 3:35 pm

    Here's a tool for testing emotes 🙂 https://twitch-contrast.firebaseapp.com/

  • Reply Kanjiidesu May 15, 2018 at 10:35 am

    thanks! this helped me a lot! 😀

  • Reply BenjaC 92 May 16, 2018 at 10:03 pm

    is there any way that you can help me create some emotes

  • Reply Shiny guy May 28, 2018 at 2:43 am

    ty

  • Reply Lillen Art May 28, 2018 at 3:02 pm

    I started making emotes about a year ago but the small size 28 x 28 was just so frustrating. These are really good tips that are going to save people a lot of struggle.

  • Reply Dullemaren June 22, 2018 at 6:03 am

    Great video! I do know a tool that might be easier to use, when you test your emotes. I use this: https://twitch-contrast.firebaseapp.com/ – You can test badges too 🙂

  • Reply KevJac June 23, 2018 at 11:54 am

    so good.. thank you very much!!! https://prnt.sc/jye30z

  • Reply Roxancs June 30, 2018 at 11:43 am

    OMG THANK YOU VERY MUCH!!!!! <3

  • Reply justforcomment1 July 7, 2018 at 10:28 pm

    FINALLY! A video with great tips and advice, and NOT just someone recording themselves drawing/making an emote. Thanks for this.

  • Reply Taylor B July 13, 2018 at 5:56 am

    This was so helpful thank you <3 you are my saving grace 😥

  • Reply Christian Jude Baclig July 18, 2018 at 4:20 pm

    What program are you using to draw emotes with?

  • Reply Synthetic Synesthete July 22, 2018 at 2:56 am

    that testing idea is amazing. thanks so much for that. Hopefully one day i soon i get shill for emotes

  • Reply Celtic Surfer Gaming July 27, 2018 at 9:53 pm

    The mermaid/wave heart emote is really nice looking. Thanks for creating this video. I appreciate it!

  • Reply chloeinheels August 1, 2018 at 9:05 pm

    Subscribable!

  • Reply rina August 3, 2018 at 1:59 am

    this was super helpful, thanks so much!

  • Reply Kescarte DeJudica August 4, 2018 at 5:29 pm

    Your voice reminds me of Dory in Finding Nemo.

  • Reply foreverandaday2012 August 5, 2018 at 8:37 pm

    I peep a HalfPint tweet 😏😏

  • Reply Jose Requena August 9, 2018 at 7:03 pm

    excellent video, just what I was looking for. my emotes of 28×28 px always come out blurred, do you know any solution for that? : c

  • Reply Moozih August 10, 2018 at 6:09 am

    Just now trying to make these, They seem pretty simple, but that could change as i'm using a mouse, Any tips for drawing with a mouse?

  • Reply Camie Pie August 13, 2018 at 10:43 pm

    Hi I have a question. When I was creating emotes I found it easier to shrink and keep detail by using a higher dpi, I went 300. Is there a reason to have it at 70?
    BTW great vid.

  • Reply GlowingMist September 11, 2018 at 12:10 am

    So helpful, much appreciated video 🙂 thank you!

  • Reply Sir Kamistress September 12, 2018 at 1:16 am

    So I have a question, what canvas size do you set it to when you first start drawing the whole thing?

  • Reply Britta Dallas September 15, 2018 at 3:14 pm

    What brushes do you use in Photoshop to draw these?

  • Reply Ivy Brooke September 17, 2018 at 6:28 pm

    oooo your emotes are SO cute!! I love them! 🙂 I really like the tablet with a face! haha

  • Reply HyperHacks September 22, 2018 at 2:08 pm

    Do you think i can add a 2d emote from the gorillaz or will i get copyright?

  • Reply RuiX95 September 23, 2018 at 11:54 am

    Great video. On discord, should I test with the 28×28 to get the absolute worst outcome possible? Thanks 🙂

  • Reply Louis Mai September 26, 2018 at 4:51 am

    What website do you use to create/draw your emote?

  • Reply Yumi October 1, 2018 at 12:07 am

    this is an awesome video! thank you so much for the help.
    i was wondering, how do you correctly resize the emote to the twitch dimensions?

  • Reply adrawer4ever October 9, 2018 at 6:19 pm

    Super informative and you've got such a cute style ta boot! Thanks for sharing

  • Reply GamingFurry October 11, 2018 at 1:56 am

    Can I ask how you keep the quality of the image while shrinking it? I can't figure out how to not get a blurry image

  • Reply AURORA October 15, 2018 at 3:34 pm

    What "gadgets" do u use to draw them? Pls don't tell me u only use ur mouse xD

  • Reply CatzuZ October 17, 2018 at 4:45 pm

    How do you not make it pixely?

  • Reply DVOxMDot21 October 18, 2018 at 2:22 pm

    are you guys using photoshop to make this

  • Reply twitch.tv/niepokonanyq123 October 27, 2018 at 9:39 pm

    what is a program

  • Reply 1Click2Play October 29, 2018 at 9:59 pm

    Somoane wanna make my emotes? I could pay a little bit

  • Reply Fizza October 29, 2018 at 10:11 pm

    Thank you so much for these tips

  • Reply Ame thyst November 7, 2018 at 2:29 pm

    Finally I find a good video ! Thank you so much !" I've gotten tired of being let down by multiple emote artists so I decided to take it in my own hands and this was exactly what I needed ! Generally I can draw but the only thing that kept me from doing my own emotes was these tips on how to do it on the computer since I've never done digital art, thank you so much once again !

  • Reply dinorino November 10, 2018 at 1:04 pm

    Thanks, I’m going to use this for discord.

  • Reply Amy Perrella November 15, 2018 at 1:47 pm

    It has taken me forever to find a useful video on this for a noob such as myself… praise be to jacey chase! 🙏🏽💫 (thank you)

  • Reply Ghaleon Games November 16, 2018 at 12:49 am

    The rules about the size/resolution start etc… May work as well with Subs BAdges? I can't find a single tutorial about sub badges :S
    I tried to make one but on chat it was horrible ! hihi 🙁

  • Reply Z3ROxC00L November 21, 2018 at 1:06 am

    Nice tutorial

  • Reply Evan Tomaro November 21, 2018 at 3:15 pm

    What app or website can I use to create cartoon emotes of myself? I can’t seem to find the site you are using online

  • Reply TrintTooDankTV November 23, 2018 at 3:02 pm

    Just got a intuos 5 touch, I’m getting into graphic design, it’s hard but I can do it, I made a rose yesterday

  • Reply KawaiiSatan November 24, 2018 at 11:57 pm

    Will having the emotes at 300DPI affect the outcome at all?

  • Reply invisionist DFS December 4, 2018 at 2:26 am

    how did you upload them on discord so easily? like emote style

  • Reply Death December 8, 2018 at 1:26 am

    O KRL BOTA LEGENDA DESGRACA

  • Reply MeVive December 17, 2018 at 10:00 pm

    Really great tips in this video. Well done!!!

  • Reply PHNX December 19, 2018 at 4:08 pm

    This is a really well done video! Thanks for the emote tips!

  • Reply Basvra December 24, 2018 at 11:17 pm

    Very helpful, I’ve been doodling a bit and wanted to make custom emojis for discord but didnt know where to begin. Now I can atleast approach it knowing more than just what I typically do :’)

  • Reply The Farts and Craps Show December 28, 2018 at 3:12 am

    Thank you so much. I know very, very little about this.

  • Reply Octix December 28, 2018 at 10:19 am

    Hey, what digital pen do you use?

  • Reply Graceful Slumber January 4, 2019 at 8:10 am

    Thank you so much!!! This will help me so much! A MILLION thanks!

  • Reply Hotchiliwrap January 7, 2019 at 9:12 am

    You can also use https://twitch-contrast.firebaseapp.com/ to test out your emotes, what I personally use and other emote artists I know do too.

  • Reply Petite Bubbles January 8, 2019 at 1:38 am

    As an upcoming streamer i just reached the wonderful world of affiliation, and with that comes creating my own emotes. My mistake was doing the 28×28 size and not being able to draw anything because it was so darn pixalated. But this video made it simple and easy – thank you!

  • Reply BL January 8, 2019 at 7:49 am

    Can u make me emotes

  • Reply Jesse Woodward January 15, 2019 at 10:46 am

    I wanna make my emotes as a dog…..

  • Reply Emmelie M January 19, 2019 at 1:36 pm

    what program is that

  • Reply GoobNoob January 30, 2019 at 2:16 am

    No tutorial

  • Reply SiccoModeLiam February 5, 2019 at 1:40 pm

    BTTV Upload emote feature helps with showing how it’ll look in chat

  • Reply Ms. W February 10, 2019 at 11:18 pm

    Hello! I'm sorry, could you (or someone) tell me how to get the background out of the emote?
    If that makes any sense. I'm new to Twitch, and I've never done this kind of work before (I'm still learning how to use my Cintiq)

  • Reply Marzia Rahman February 12, 2019 at 6:23 am

    how you tested them? any software?

  • Reply KnifeTaMeetYou February 25, 2019 at 12:59 pm

    Loved the video! I was hoping to find a second installment but I couldn’t find one. I’d watch 10 more of these covering the emotes you make and your decision changes along the way

  • Reply Elvann February 28, 2019 at 8:52 am

    There's also "Contrast-tool" that's a website that allows you to test emotes and sub badges ^^ That's what I use to design mine and for commissions ^.^ It's REALLY practical seriously!

    Those were really great tips! And your emotes look gorgeous!

  • Reply Gabriele Hu March 2, 2019 at 2:00 pm

    JUST MAKE THEM BIGGER AND PUT A "W" AT THE END OMEGALUL

  • Reply xcelr8live March 14, 2019 at 10:58 am

    such great tips in such a short and well made video, and your emotes are INSANE!!!

  • Reply Harley Quinn March 30, 2019 at 5:50 am

    do u sell twitch emotes?

  • Reply Encoder Fashion March 31, 2019 at 4:54 pm

    Thanks Jacey your video is very helpful. I just became a twitch affiliate and I am so excited to create emotes for my subscribers!

  • Reply Justin Melo April 1, 2019 at 4:01 pm

    Beautiful job on the emotes. TY for the lurk emote.

  • Reply Timey Lives April 5, 2019 at 3:38 am

    Thank you so much This helped me so much to fix the emotes I was making myself Ty ty ty

  • Reply TheGoatAzazel April 6, 2019 at 7:38 pm

    what photo shop plan do you use or does it not matter??

  • Reply Activemotionpictures April 16, 2019 at 3:10 am

    Wow! Thank you very much for this in-depth review!

  • Reply Jefferson Jimenez April 26, 2019 at 2:16 am

    Can I pay you to make me an emote ?

  • Reply Silvana Rezmerita May 2, 2019 at 6:05 pm

    Man! Why didn't I find this the first time I started try-harding for my own emotes >..< Might as well put this in practice for my boyfriend's channel <3 and well.. one day if I'm not too lazy to change my babies xD [ I'm not good with photoshop and it took me the whole day for them T^T ]

  • Reply TD Playz May 2, 2019 at 11:45 pm

    Thank you! And thank you for the Fiverr link 🙂

  • Reply ❤TwightHeart❤ May 5, 2019 at 12:26 am

    Thank you for these tips! I just got into drawing, and want to make my own emotes for my twitch. I use my iPad to draw ever since I got an apple pencil.

  • Reply Scorched Script May 5, 2019 at 1:12 am

    Totally just found this video. Totally didn't realize how much I needed this video. So here I am a year later, thanking our savior Jacey for making this super awesome video. As a fairly new streamer, this helped, A LOT.

  • Reply Windows 95Hotline May 7, 2019 at 9:58 pm

    Can you make these on paint sai tool?

  • Reply Sonic Spins May 8, 2019 at 5:15 am

    I've watched alot of tutorials. And this is by far the best one

  • Reply Mi00ky Arts May 8, 2019 at 11:27 am

    Thanks for these tips. For me the colored lines tip was the most helpful, bc I mostly love my black outlines, but it seems colored outlines don't struggle with dark background that much and keep the picture more recognizable at small size. Thank you 🙂

  • Reply ViciouSx May 16, 2019 at 11:32 pm

    This video was amazing thank you so much!!! I’ve struggled with my own emotes and have been meaning to redo them. This gave me a better basis of where to start and where to go. Subbed for future content! ❤️

  • Reply Jay _1 May 21, 2019 at 7:24 am

    Just hit affiliate, thanks for the vid

  • Reply Malastrome June 7, 2019 at 6:49 am

    I dabble in making my emotes for fun here and there, and I've always struggled with adding too much detail.
    This video certainly helped. Much obliged! o7

  • Reply meg bair July 2, 2019 at 7:12 pm

    this is amazing! Thank you so much. I'm just starting out making emotes for my husbands twitch and this is perfect.

  • Reply KinxFTW July 10, 2019 at 4:11 pm

    Everything I wanted to know on this video was a suggestion about what program is better to use, but everything I watched in this video actually helped me a lot to imagine lots of things to work with.

  • Reply Qamar Amin July 15, 2019 at 6:46 am

    Very useful video

  • Reply zonge July 31, 2019 at 12:18 pm

    So underrated

  • Reply zonge July 31, 2019 at 8:11 pm

    How do u do the templates?

  • Reply Akira August 3, 2019 at 4:18 am

    Thanks this became really helpful dropped a like and and a positive comment keep grinding 😁👍

  • Reply Marzy August 5, 2019 at 12:12 pm

    Thank you so much for this! I've been having trouble making emotes (especially getting them to look clear when sized down) and this was super helpful!

  • Reply Zyphiria August 16, 2019 at 7:51 am

    Hey, what's up? I don't know if you're still around, Jacey but I would love to chat about emotes? If that's okay? Where would I be able to contact, you?

  • Reply TeamMeiVR August 24, 2019 at 10:00 pm

    I need someone do emotes for me XD
    anyone wanna do commissions for me
    discord me

    https://discord.gg/qaNTkCD

  • Reply RigidyDigityDog Gaming October 2, 2019 at 6:27 am

    What programs or apps do you use to make the emotes?

  • Reply MoeMentum Beats October 4, 2019 at 3:54 am

    great vid

  • Reply Jacey Chase October 4, 2019 at 9:42 pm

    Looking to hire someone to design your emotes? Check out the Twitch Store on Fiverr (Affiliate link): https://track.fiverr.com/visit/?bta=39990&brand=fiverrcpa&utm_campaign=&landingPage=https://www.fiverr.com/stores/twitch

    I made a part 2 to this video with Frequently Asked Questions and more tips! Watch it here: https://www.youtube.com/watch?v=ABqmhHq9V2o

  • Reply Sondra Sebald October 5, 2019 at 3:46 am

    You’re so talented!

  • Reply Stevie Petet October 17, 2019 at 6:42 pm

    How much should I charge for emotes as an artist?

  • Reply Lucas Liam October 21, 2019 at 8:13 pm

    You know when you’re learning to make emotes for your twitch and the video is made just for you:

    Hi JC

    Dats what they call me on twitch. Dang.

  • Reply Freya The Shaman November 8, 2019 at 11:03 am

    Thank you for making this video! I've wanted to make my own emotes but they all went full potato. But this helps me get a better idea of what I should look out for!

  • Leave a Reply