How to easily make Slack emojis with a Mac + Chrome

emoji-creation.md

Some coworkers wanted to know how I made the majority of our over 2100 custom emojis at Intel, so I thought I'd write down how I did this :) First, Slack emojis are required to be 128X128 pixels, and no larger than 128KB, so you'll want to make sure your image/gif is either really large < 1000 px in either height or width, because you'll be shrinking it way down. 256x256 images usually work the best.

HOW TO FIND EMOJIS

1. If it's a company/place/idea then often googling {name} {icon|logo|symbol} works just fine, like hp logo to get the logo.
2. Sometimes image files will be in .svg format, and I use https://ezgif.com/svg-to-png to convert these to png after downloading them.
3. Click on the first image you see in the top search section of your Google search result. This will take you to Google's images section.
4. Find the image you want and click on it. This will open it in the right-side column.
5. Right-click the image/gif on the right, and click save image as.... This will save it and you'll see it in the bottom of your browser.

IMAGES (png/jpg)

1. Preview is your friend. Click on your image at the bottom of your browser and it'll open in Preview.
2. Drag a box around the pic if you want to crop it; it doesn't have to be exact because after the box is made you can drag each side however you'd like.
3. Once you're happy with the cropping, hit cmd k to crop.
4. Sometimes a pic will have excess stuff around it and I use the little pen icon at the top of Preview to color it out, usually in white.
5. Once that's done, go to Tools --> Adjust size.
6. Enter 128 + enter in for whichever is bigger out of Width and Height, and Preview will scale proportionally by default.
7. cmd s to save, and your image is ready for Slack import!
8. Go to https://{teamname}.slack.com/customize/emoji and hit the Add Custom Emoji button, or you can do this from the emoji options within your Slack app itself (hitting the happy face followed by the Add Emoji button)
9. Select your downloaded image in the Upload Image section, then give your emoji a name and you're done.

GIFS

1. To resize/shrink/rotate gifs I go to http://gifgifs.com/ . You can do cool stuff like play with the coloring, remove frames, etc. Then you can download your new gif and import it to Slack.

TO CHANGE THE DIRECTION OF EMOJIS

1. For images, cmd l or cmd r will rotate left and right in Preview, and then just hit cmd s to save after.
2. For gifs, this will work as well (you gotta click on every individual pic that makes up the gif and roate though) but could break your gifs, so I recommend going to http://gifgifs.com/ and using Rotate Gif on the left-hand side.

NOTES

1. Don't ever let Slack resize your emoji for you. They'll add black lines to each side rather than resizing it fully.
2. Once you get creating emojis down, it can take < 30 seconds to create a new one. So if you're waiting for some test to run or code to compile for a few minutes, why not create a custom emoji in the meantime!
3. If you ever wanna download your emojis, I wrote https://github.com/s1113950/slack-emoji-stats which uses Slack's legacy api token + emoji api to download them for you. It also makes aliases :)
4. If you wanna be really fancy, I've used Imagemagick (https://imagemagick.org/script/convert.php) to do everything from the command-line before.