Publishing a Sticker Pack App for iMessage: A how-to guide from start to finish
With iOS 10, Apple made it easy for non-programmers (like myself) to create sticker packs for iMessage. I’m late to the game with iOS 11, but it’s fun regardless and a great way for an average-joe like me to get my work on a universal messaging platform. It only takes an idea, an Apple Developer account, Xcode, and some patience. The following is my process from drawing to release of my first sticker pack, Clyde Stickers. I’ve separated the steps into 2 sections: creating and publishing.
Section one — Create
First you want to create a cohesive set of images to use for your stickers. You can make as many or as few as you’d like, and you can always add to them after. You’ll need to create a set of sticker images and a set of icons for the app.
I used my sketchbook, a scanner app on my phone called Scanner Pro by Readdle to get the images on the computer, and Illustrator to finalize the designs. Sketch is another popular program for this if you don’t have Photoshop or Illustrator.
Keep these production guidelines in mind when setting up your workspace:
Artboard Size — stickers are only generated in 3 different sizes, so it’s smart to know which size you want up front and set your artboards accordingly. Each sticker should have it’s own artboard. I used the medium size.
Small — 300 x 300px
Medium — 408 x 408px
Large — 618 x 618px
File type — .png, .gif, .jpg. (jpegs do not allow for transparent backgrounds)
Naming Conventions — Do not use special characters or underscores when naming your files. Mine look like this: clydehappy.gif
Transparent backgrounds — make sure your images have a transparent background when exporting, unless you want the image to take up the full artboard.
I used Sketch to build my app icons with a handy Sketch template created by Michael Lee. The template was recommended in another sticker pack tutorial by Adelyn Tam — her tutorial really helped me out. Here’s what my sketch icon file looks like:
If you’re not using the template, I’ve listed each icon size below:
iPhone-settings-29pt@2x — 58 x 58 pt
iPhone-Settings-29pt@3x — 87 x 87 pt
Messages-iPhone-60x45pt@2x — 120 x 90 pt
Messages-iPhone-60x45pt@3x — 180 x 135 pt
Messages-iPad-67x50pt@2x — 134 x 100 pt
Messages-iPad-Pro-74x55pt@2x — 148 x 110 pt
iPad-Settings-29pt@2x — 58 x 58 pt
Messages27x20pt@2x — 54 x 40 pt
Messages27x20pt@3x — 81 x 60 pt
Messages32x24pt@2x — 64 x 48 pt
Messages32x24pt@3x — 96 x 72 pt
Messages-App-Store-1024x768pt— 1024 x 768 pt
App store — 1024 x 1024 px (to be used later in iTunes Connect)
Section two — Publish.
You’ve created a cohesive set of stickers! Congrats!
This next part is publishing your stickers to the iMessage App Store for the anyone to use. It requires becoming a member of the Apple Developer program, which costs $99 a year. If you’re not interested in buying the membership, you can still upload your stickers on Xcode and test them out on a simulator, but you won’t be able to publish them. The rest of this article is for those interested in publishing. Here’s a short breakdown of the steps involved in publishing:
- Become a member of the Apple Developer Program.
2. Register an App ID in you Developer account.
3. Download Xcode and set up your sticker project in Xcode.
4. Archive your sticker project.
5. Submit your app in iTunes Connect.
1. Become a member of the Apple Developer program.
Go to developer.apple.com and click “account” to create an Apple Developer account. This will cost an annual fee of $99.
2. Register an App ID in your Developer account.
Click the Certificates, Identifiers, & Profiles, and click App IDs under Identifiers in the left navigator. The App ID is specific to your sticker pack, any new sticker pack you create will have its own App ID. Hit the + in the upper right hand corner and fill in the necessary info.
3. Download Xcode and set up a new project for your stickers
If you’re new to this like me, you’ll need to download and install Xcode from the app store. Xcode is free.
Here’s a great tutorial that walks you through the process of creating your project. It shows you how to set up the project, add stickers, add icons, and even test the stickers. This is what my project looks like:
You’ll also want to add your phone to the test devices for this project. This allows for “automatic signing” in the next step. Add your phone under Window > Devices and Simulators.
4. Archiving your sticker project in Xcode
First, make sure you’re signed into your developer account in Xcode. Do this by going to Xcode > Preferences > Accounts > click the + to add your account.
Second, check your info under the “general” tab and fill out the display name, version, and build. Be sure to do this for both the application target and the extension pack target. The bundle ID should be automatically filled in.
Third, archive the project. The archive function can be found under Product > Archive. In order for your project to archive, the Active Scheme at the top needs to be set to “generic iOS device.”
You can find archived projects in Window > Organizer. There, you’ll see the name of the archived build and a button on the left that says “upload to app store.” Click that button! It feels good. It does not submit the app to the store (yet!) it just sends it to your Developer account.
5. Preparing to submit your app in iTunes Connect
Sooo close! The next step is building the project in iTunes Connect. Log back into your Apple Developer account and click iTunes Connect. Once in iTunes Connect, go to My Apps, and click the + to create your app.
The main things you’ll need here are:
• A description
• A website to use for support
• Up to 5 screenshots for iphone and ipad. The dimensions are:
iPhone — 1242 x 2208px (5.5 iPhone display)
iPad — 2048 x 2732 px
• The app store icon created earlier (1024 x 1024pt)
The archived build you created earlier should show up in the build portion of this page. Once the build is added, and all of the information is filled out, you’re ready to submit your app!
Apple will send you emails on the status of your app, but it will also show you the status in “My Apps” in iTunes Connect. It took 2 days for Apple to review my product. While you’re waiting, check out the features iTunes Connect offers to track and manage your app. It’s also a good idea to fill out any tax and banking requirements (which can also be found in iTunes Connect) before your app goes live.
I hope this tutorial helped! Thank you for following with me until the end — I know this is a long post. I’d love to hear from you, post below with a link to your sticker pack, share, and check Clyde out. He loves the spotlight. I should also mention that I had some other awesome tutorials to help me out in my process. They’re Karen Liu’s sticker pack tutorial and Adelyn Tam’s sticker pack tutorial.
I’m new to this process so any feedback is appreciated. Happy sticker-ing!