How To Create iMessage Stickers for Designers

Tuesday December 19th, 2017
How to make imessage sticker for designers

To create an iMessage sticker does not require any programming skills at all. You just need to change the size of the sticker based on Apple’s guidelines, make app icons and the most important. You need a Mac with XCode installed to create and publish stickers.

XCode is a MacOS application for iOS, Mac application development and now also used to create sticker packs. XCode user interface may be intimidating to designers alike. But don’t let the complex user interface scared you, making a sticker pack only takes a few steps drag-n-drop files.

Before we dive into XCode, let’s discuss iMessage stickers guideline. iMessage sticker size is different from the LINE sticker, you have to resize your sticker to a standard size that matches the guidelines of Apple.

There are 3 iMessage sticker sizes supported by the Messages app on iOS. The smallest size is 300 x 300 pixels, medium 408 x 408 pixels, and the largest 618 x 618 pixels. For static stickers we recommend using size 618 x 618 pixels, the largest size will make your stickers sharp on the device such as iPhone plus and iPad pro. For the animated icon, we recommend using either 300 x 300 or 408 x 408 pixels. The static and animated sticker must be smaller than 500 KB. XCode will reject file size bigger than 500 KB.

Apple does not limit the minimum or maximum total sticker per pack. But, we recommend using a multiple of 8 which is also used by LINE. Each pack sticker contains 8, 16, 24, 32 or 40 stickers.

In addition to stickers, you need to make App Store icons for your sticker pack. Download icon template provided by Apple.

After the icon and sticker are ready, we can start making sticker application with XCode. If you do not have XCode yet, download it via Mac App Store.

When you first open XCode, will be presented with a screen like this. Click create a new XCode Project.

Welcome Window XCode Project

On the next pop-up screen select the Sticker Pack App to create an iMessage sticker pack.

Select Sticker App Project

In the next step, enter the name Sticker Pack in Product Name form. Sticker Pack name must be less than 30 characters. Since WWDC 2017, Apple changed the limit of application name letters from 50 letters to 30 letters. Although Product name will be overruled by App Name in iTunes Connect, for best practice we advise to Product Name to less than 30 characters.

Project Option

Fill in the name of the organization to your liking. Organization Identifier is a unique identification company, use the code name that is easy to remember. The format is like a reverse website domain name, start with com. then followed by the name of the company/developer. Bundle identifier will automatically generated based on the product name or sticker pack that you filled above.

Next, XCode will ask you where do you want to save your Sticker Pack project files.

XCode will display a screen like this. If you want to publish the iMessage Sticker Pack to the App Store, note the name of the Bundle Identifier that will be required when registering the app on iTunes Connect which we will explain in the next article.

Bundle Identifier

Now we put sticker into XCode. On the left, choose Stickers.xcstickers, in the middle column you will see the iMessage App Icon and the Sticker Pack folder. Choose the Sticker Pack folder, drag-n-drop the sticker file into the box that says Sticker Pack. You can set the order of manual stickers.

Drag sticker files to XCode

The next step includes the icons into the iMessage App Icon section. You can create application icons using templates from Apple.

Drag Icon Files to XCode

Now, you can test your sticker pack using Simulator. Choose an iPhone, iPod or iPad device from the various available. Click the Play button to start the testing process. In the simulator, your sticker can be tested using the Messages app, and immediately available in the sticker drawer.

Testing Sticker with Emulator

That’s all you need to make a sticker pack for iMessage. It was easy, right? In the next article, we will discuss how to upload sticker pack to App Store with iTunes Connect.