Creating your own sticker pack — WhatsApp and Gboard

Vera Martins
8 min readDec 2, 2020

--

My goal here is to share my learnings, resources and some tips from my experience creating my own sticker packs for WhatsApp and Gboard that I hope will help you as well.

some beverage stickers showing up on a yellow background and in the middle is written: Beverage Club”
Beverage Club stickers

Stickers are commonly used as a way of enhancing written communication.
Some people use them as a way to add something to what they just typed, or… just don’t type at all and communicate entirely with stickers! 🙋‍♀️

For some knowledge about the evolution of emojis on our conversations take a look at Elsma Ramirez’s article.

As creatives, we can contribute to this 💪

Yellow background, as per brand. Two smartphones showing a conversation with the stickers designed by me
looking good in conversations

Find yourself a theme

I love hot beverages! So I decided to create my sticker packs around that.

Then I proceeded to make a list of my favourite beverages and a list of the most used emojis in the conversations between me and my family/friends.

Make it relatable

I started to mix emojis and beverages, creating contexts and stories.

Try to make them reflect some commonalities, can be worldwide or more regional.

For example:

cartoon white mug where you read “Good Morn…”. The mug is not happy to be up this early and is full of coffee
anatomy of a sticker
  1. Good morning is something that everyone (should) says in the morning, being it to loved ones, colleagues, friends, …
  2. Having a coffee in the morning to wake up is something that everyone can identify, even if you personally don’t do it. Maybe your colleagues at work do it, your parents do it, people on the TV do it 🙂
  3. That morning face…you get it, right? 🙃

This doesn’t reflect my own experience, I don’t drink black coffee and usually, I wake up, dress whatever is close by and go for a walk with my dog and zombie boyfriend. And I can talk a lot…usually only with my dog 😅 💚 🐶

But like I said before, what’s important is that your stickers are relatable to your target-audience increasing the chances of them being used.

The specs

Here you’ll have to make a decision: what messaging platforms you want to make your stickers available on? The choice can be quite daunting due to the massive number of possibilities, between WhatsApp, Viber, Instagram, Facebook Messenger, WeChat, Telegram… you name it.

Based on my usage and popularity, I knew WhatsApp had to be one of the options, but I decided to support a substantial amount of alternatives and audience by targeting Gboard, the keyboard app by Google.

I personally made them available on both of these platforms. Another reason why I wanted to make a version for Gboard is that I’m an Android user and a proud Google Pixel owner. This means that by having the stickers available on Gboard I can send them everywhere I’m typing, regardless of the app. OK…not on the Instagram chat…But I can use my stickers on the stories!

Gboard is also available for iOS users, so the benefits are the same as described for Android.

Making them only for WhatsApp means that they will only be available on WhatsApp, of course.

Pro tip: If you’re undecided about which platform(s) to target, choose a reasonably big density and resolution, in case you change your mind halfway into it, you’ll always have more options :)

Create your canvas

I created mine with 300 DPI. When exported, this density doesn’t lead to undesired visual artefacts on the maximum resolution recommended by WhatsApp, so that’s good. And, as stated before, this gave me more room to explore other possibilities of use.

For the platforms I decided to target, these were the design constraints:

WhatsApp: 512px square webp image. See WhatsApp detailed guidelines.

Gboard: 320px square or 500px square

  • For both, it’s recommended to leave a small margin between the image/drawing and the edge of the canvas. I used 16 px for both WhatsApp and Gboard stickers;
  • It’s also recommended to add a white outline to your stickers as people on the receiving end might have their phones on dark mode or using a patterned background. Let’s think about everyone 💞;
  • Export your stickers with a transparent background.
all-around a 16px margin is needed
your canvas

Have fun drawing your stickers!

I draw mine directly on Procreate, but you do you 😀. Draw them on paper then digitize them, use Adobe Fresco, Photoshop, Illustrator, Affinity Designer, … Do whatever feels more natural to you and makes you comfortable. As they say, the world is your oyster!

all the stickers that are part of the “Beverage Club — Winter Edition”
so pretty ♥️

Making them available

There are two ways in which you can make your stickers available to the World: via the official stores (Google Play Store and App Store) or third-party applications dedicated to sticker integration.

Via the Stores

This is easily the most stress-free way to deliver your sticker from an end-user perspective, as they only need to download the app from the official store of their platform, but not without a price for the creative. This option involves creating a mini-app for your stickers and there are some pros and cons to this.

Let me come clean; my boyfriend is a software engineer and a very good one ❤️ so he was able to make an Android app integrating the WhatsApp and Gboard implementation. Most recently I designed a second sticker pack based on beverages, which he was also able to include on the same app, so here, we have two or three “apps” in one.

Some things to know about the stores:

  • Google Play Store: create an account for 25 USD, this is a one-time payment, upload your app, wait for the review.
  • App Store: create an account for 99 USD per year, upload your app, wait for the review. Keep in mind that the App Store Review Guidelines are stricter than Google’s.

One more thing before jumping to the resources, developing for Gboard can be quite a handful, unfortunately. WhatsApp provides a ready-to-go sample app where you really just need to add the content (your stickers) to, but Gboard works very differently, requiring some technical knowledge. Also, Android releases don’t seem to be fully in-sync with Gboard releases.

Resources:

Third-party applications

I’ll be talking about Sticker.ly but if you find another app please let us know in the comments 🤓

On Sticker.ly you create a free account, upload your stickers and share them with your friends so they can download the pack and start using them! Your stickers will be available on WhatsApp (Android and iOS) and iMessage.

The advantage is that it’s very straightforward for anyone designing sticker packs, the disadvantage, in my opinion, is for Android users Sticker.ly only provides integration with WhatsApp. It’s also a bit annoying that for every sticker pack you need to share a new link. It would be nice to have a link pointing to a kind of profile and then all your sticker packs would be there 🤷‍♀️

Conclusions & Lessons Learned:

We first launched “Beverage Club” as an Android mini-app, so the stickers would be available on WhatsApp and Gboard, after installed, as previously explained. And everything worked just fine, with zero complaints from people using it.

When I shared this project on social media I got some requests from iOS friends and colleagues that wanted to use the stickers but since the app was only available on the Google Play Store, they couldn’t.

Developing something for iOS was out of the question because we were making this just for fun and to learn something along the way. So paying $99 every year was not an option for us, especially because the stickers were going to be free.

After some research I found Sticker.ly, so via that app, we were able to make the stickers available for iOS fans. Also for Android to be honest, but only for WhatsApp.

I had the idea to create a “Beverage Club — Winter version” to celebrate the cold. We decided to add these stickers to the previous app because it’s part of the Beverage Club idea and context and also an update would make them available. When putting the app live the stickers for WhatsApp worked straight away, but for the Gboard…well…not the same story.

On Gboard the stickers appeared as black squares. We had some weird behaviours like for eg, people who updated would get to extra black squares, apart from the regular “Beverage Club”. Others got four even five black squares. We couldn’t pinpoint these issues: on my Pixel everything worked just fine, my boyfriend having the same Android and Gboard versions as my mom got very different errors. So yeah…we were lost.

What finally solved it, three or four weeks later of testing and bothering every Android friend and family member that we knew, was hosting the images on the internet, and changing all the names to avoid any potential weird cache. This was not the initially desired place to have the Gboard sticker files since the WhatsApp WebP ones were included in the application bundle itself. But since the problem seemed related to any extra image processing or compressing that was happening when generating a “release” version of the app we decided to go the extra maintenance-mile and store them on Firebase Storage.

My stickers are available on Sticker.ly, (Beverage Club and Beverage Club Winter Edition) for iOS and Android fans.

Now go and make some stickers! 🤓

Update: We had more issues with Gboard that we could not reproduce or find the main cause of the error. And with updates on Gboard and no documentation anywhere, it became impossible for us to support the app in an efficient way. So we took the app out of production.

--

--

Vera Martins
Vera Martins

Written by Vera Martins

Trying to convert companies to join the Inclusive and Accessible design side

Responses (1)