Here on the HipChat team, we take emoticons seriously. It’s really weird to spend a healthy portion of your work day discussing the finer points on tiny pictures from the internet. But when we see how happy those tiny pictures make everyone, it’s all worth it. Today, we want to tell you about a few ways we’ve improved emoticons in HipChat.
Emoticons for (allthescreens)
All of our global emoticons are now built to support hi-res displays, like Apple Retina displays and the higher end of the Android pixel density spectrum. This change resolved the much voted-on UserVoice ticket that we’ve had on our list for a while.
For every new image, we created hi-res sizes up to 4x (because you never know what the future will bring), so they’ll look good on both your fancy high-res displays and that old monitor your work won’t upgrade for you. We’ve been rolling out these Retina emoticons over the last few weeks, and we’ll continue to tweak them every so often. Check out the big changelog below for details.
Sharing our favorites
Included in this latest release are a few of our favorite emoticons. Many, like (whoa) Keanu, were added because of your feedback. Others, like (disappear) and (salute), are ones we use so much around Atlassian that it didn’t feel right to keep them for ourselves.
Don’t forget that you can upload your very own custom emoticons just for your team. So next time you don’t have to wait for us to update the global set with (whoa) and can BYOK (Bring Your Own Keanu).
One size fits most
In addition to Retina-fying our global set, we improved our emoticon uploader. Now, admins can upload new, hi-res emoticons. And even better, we’ll automatically scale them for you. We suggest starting with an image around 120px (the new maximum). After the image goes through some emoticon uploader magic, you’ll end up with an effective 30px image after scaling.
We debated how to handle retina images. We chose this auto-scaling method because it’s far easier to upload new emoticons, or update an existing one, when you only have to create and maintain one size.
Protip: Keep in mind that whatever you upload is going to be scaled down 4 times, so a 1px stroke is going to be hard to see on a low-res monitor. We learned the hard way how much that can really effect line-drawing emoticons. That’s why you’ll see “beefed up stroke width” on a lot of the changelog below. It also helps if your image starts with dimensions that are multiples of 4 on both sides. For example: 116 px wide is great (116/4=29), but 115 px wide isn’t (115/4=28.75).
And now that you can’t stand to look at your old custom emoticons on your Retina monitor, you can re-upload any of your existing custom emoticons by deleting old ones and uploading a new, larger versions. We’ll continue to refine and add to our global emoticon set.
The other “emoticons”
We also updated our set of little faces. Similar to the situation with the Retina emoticons above, we needed higher resolution images than the current assets allowed. We also wanted a new set of our own.
We started looking at emoji sets for inspiration and pulled in little touches from our HipChat brand, like using the logo smile shape as often as possible, and we ended up with a set that we really like. As with everything else, we’ll be iterating on them here and there, and someday may bring full emoji support.
Oh, and the icy blue corpse thumb thing we did is dead and buried. Dig it out if you want: (corpsethumb). We’re replacing the re-colored Apple emoji thumbs-up and thumbs-down with a new pair of icons that don’t look at all like Facebook. (badpokerface)
Check out hipchat.com/emoticons to see all the new emoticons and try them out with your team! And keep the feedback coming at help.hipchat.com.
Changelog
Changes made to global emoticons
- (awyeah): beefed up stroke width
- (badass): beefed up stroke width
- (badjokeeel): added contrast and adjusted size
- (bumble): added contrast
- (caruso): adjusted size
- (challengeaccepted): beefed up stroke width
- (chewie): added contrast, brightened
- (chucknorris): brightened up to bring out the Chuck Norris
- (clarence): added contrast, brightened
- (derp): beefed up stroke width
- (dumb): enlarged to show face better
- (facepalm): added contrast, tightened crop to improve chest to face and palm ratio
- (fonzie): added contrast
- (freddie): beefed up stroke width
- (gangnamstyle): cleaned up gif
- (gates): adjusted a little to match (jobs)
- (goodnews): scaled up a little
- (haveaseat): added contrast
- (heart): updated to match smilies, adjusted crop
- (ilied): lightened up to bring out details
- (indeed): cropped to just face and highlighted monocle
- (itsatrap): added contrast, brightened up to bring out detail
- (jackie): beefed up stroke width
- (jobs): adjusted to match (gates), added contrast and brightened
- (joffrey): new image, fewer spoilers, more like the others (not shown above)
- (kennypowers): added contrast and brightened
- (krang): beefed up stroke width, reduced contrast between colors
- (lincoln): brightened to blow out noise
- (lolwut): added contrast and brightened, scaled up
- (notbad): beefed up stroke width
- (notsureif): replaced with (fry) to match
- (philosoraptor): brightened to bring out detail
- (present): added contrast and brightened
- (reddit): removed white fill from antenna shape
- (romney): added contrast and brightened
- (sadpanda): using a sadder, more forward-facing panda
- (samuel): added contrast and levels adjusted to stand out more on white
- (skyrim): added contrast and brightened
- (sweetjesus): crammed into (iseewhatyoudidthere)’s head shape to resolve weird corners
- (taft): cropped closer to face, mustache volume increased, mustache/face contrast increased
- (twss): added contrast and brightened
- (wtf): enlarged to show face better
- (yodawg): added contrast and brightened
- (yuno): resized because he was too small
- (zoidberg): resized because he was too small
New global emoticons
- (awesome)
- (aww)
- (awwyiss)
- (badtime)
- (bicepleft)
- (bicepright)
- (borat)
- (carl)
- (catchemall)
- (chef)
- (cookie)
- (corpsethumb)
- (disappear)
- (doh)
- (donotwant)
- (downvote)
- (drool)
- (evilburns)
- (excellent)
- (feelsbadman)
- (feelsgoodman)
- (finn)
- (ftfy)
- (giggity)
- (goldstar)
- (haha)
- (huehue)
- (hugefan)
- (jake)
- (meh)
- (motherofgod)
- (nice)
- (noidea)
- (notit)
- (ohmy)
- (paddlin)
- (rockon)
- (salute)
- (sap)
- (standup)
- (taco)
- (tayne)
- (thatthing)
- (theyregreat)
- (toodamnhigh)
- (unacceptable)
- (upvote)
- (waiting)
- (whoa)
- (yeah)
- (youdontsay)