Tutorial: Making iOS 10 Sticker Apps for Artists!

Art & Design Ideas Learning Sticker Apps
Date 8 May 2017
mia

I’m not a developer, but I’ve always been interested in app creation. A few years ago I took an app development class at Oven Bits here in Dallas…and I kind of forgot to continue learning 😉 Then after WWDC 2016 and the release of the iMessage stickers I made plans to get some done. I analyzed the market and looked for stickers I wanted to use myself, and made my first 3 packs.

Uploading them to the store was such an accomplishment and I wanted to share that joy and pride with other curious artists.

 


Making And Publishing An iOS 10 Sticker App V1, March 2017

For artists, illustrators, creators, or anyone without app creation experience.

Prerequisites

  • Mac OS computer
  • a current OS (Sierra or later)
  • access to an iPhone, iPad, or other device that can run the most recent version of iOS  for testing
  • A bit of graphics knowledge (Sketch App preferred)
  • Patience 😉

Caveat: Your mileage may vary; updates to this process between March 2017-now are not included here. Updates and efficiencies are introduced on a regular basis, and I hope they continue to be, but there’s no way I could ever hope to keep up with that. That said, some of the instructions may be out of date, but were valid in March 2017.

1. Create your sticker images.

I have a Sketch App file to share, for those of you who use Sketch that has artboards for all of these sizes and all of the app store screens (see grateful credits at the end of this post). There are also plenty of PSDs online to use. I’ve modified several peoples’ assets to create my own that makes the most sense to me as an artist.

These are the image dimensions that Apple recommends:

  • Small: 100 x 100 pt @3x scale (300 x 300 pixel image)
  • Medium: 136 x 136 pt @3x scale (378 x 378 pixel image)
  • Large: 206 x 206 pt @3x scale (618 x 618 pixel image)

For optimal results, just stick to one of these. I’ve made my stickers 2000×2000 and several other different sizes, but these are good for the first version.

Keep your file sizes to 500KB or less per sticker. Save them as a PNG or JPEG for static stickers, and GIF or APNG for animated stickers. If you don’t know whether to pick PNG or JPEG, just ask yourself, “does my sticker have any transparent areas?” If the answer is yes, use a PNG.

2. Compress the size of your sticker files.

If you’re starting with vector files exported from Illustrator or Sketch,it’s pretty rare that a compressor will remove any of the “weight” of each sticker. This step‘s optional, but users short on storage space on their phones (a LOT of people, actually) will appreciate it.

3. Create your sticker app icons.

These are the icons for your sticker app that will be displayed in the Messages App Store, iPhone, iPad and iPad Pro. The Sketch file I’ve provided has artboards for these, and Apple provides Template-iMessageAppIconsiOS. psd so you don’t have to figure out all the sizes.

4. Get your Developer stuff (first time only)

a. Create an iTunes Developer Account 

You can use your regular iTunes account to sign in if you already use Apple products. The developer account is what you will be using to upload your sticker app to the Messages App Store.

A developer account is required for submission to the App Store and distribution of the stickers, whether paid or free.

b. Download Xcode to your Mac

In your developer account, go to “Download Tools” and get the latest version NON-BETA version of Xcode. This is the software you will be using to create the sticker pack. Heads up — make sure you have at least 5GB available disk space before downloading.

c. Enroll as an individual in the Apple Developer Program

If you want to distribute your sticker app on the Messages App Store for other people to download and use, it will cost you $99+tax/year to enroll in the iTunes Developer Program. If you allow your membership to expire, your app will be removed from the Messages App Store.

If not sure of your marketing/brand strategy/target market, you can still make a sticker app — but only you will be able to use it.

5. Open Xcode and create a sticker pack project! (FINALLY)

  • On the next screen, name your sticker pack.
  • For team, select “Add Account” and use your Apple Developer account.
  • Add a * to the Bundle identifier field
  • You’re also going to need to put something as the organization name, so just make something up.
  • For organization identifier, put “com.[your organization name here]”.
  • Next it’s going to ask you where you want to save your Xcode project; anywhere accessible on your machine is fine.
  • Select “Create.”

6. Plug in your iPhone and set it as your test device in Xcode.*

Xcode will create your Provisioning Profile and Signing Certificate automatically when you do this (these are your developer credentials that the Messages App Store will use later).

7. Log into iTunes Connect in your browser.*

  • Go to https:// itunesconnect.apple.com/login. Log in and go to “My Apps”
  • Hit the ‘+’ button to add a “New App.”
  • Select iOS as the platform
  • Name: [The name of your app as it will appear on the App Store]
  • Primary Language: If localized app information isn’t available in an App Store territory, the information from your primary language will be used instead.
  • Bundle ID: from the dropdown select [XC Wildcard – *]
  • Add a SKU: A number ID for your app that’s not visible on the App Store. You can use letters, numbers, hyphens, periods, and underscores. The SKU can’t start with a hyphen, period, or underscore. (This number is, for all intents and purposes, just a number for you to track your “inventory” with, should you have multiple products in the App Store.)

9. Add your sticker images.

In the left hand navigator, select the “Stickers.xcstickers.” You’ll see an area where you can drag and drop your sticker images. In the right hand navigator, you can click on the Attributes inspector to change your sticker cell size. This affects the size of the stickers that the user sees when they are choosing a sticker from your sticker pack on their device.

10. Add your app icons.

This is right above the “Sticker Pack” folder.

11. Test your sticker pack.

You can select different devices to simulate and test in Xcode. Click the button that looks like “play” in the top-right to test your sticker pack on your phone. This puts the stickers on your phone, and you can start using them like any other sticker app, but not be able to “sell” them.

12. Create (up to 5) app iPhone and iPad screenshots for the Messages App Store.

  • You can take screenshots of your sticker pack when testing your sticker pack in Xcode Simulator by hitting Command+S
  • OR create something custom that will stand out in the Messages App Store. The Sketch file has these artboards as well.
  • If you’re not using my Sketch template, create the iPhone screenshots at 1242 x 2208px and iPad screenshots at 2732 x 2048px.
  • Save as a PNG or JPEG with no transparency (no alpha channel) – the Messages App Store does not support alpha channels.

13. If you don’t already have a website/domain name, create a website. (first time only)

Apple is going to ask you for a Support URL when you submit your sticker app. If you already have your own site, use that. But for people who don’t, using WordPress, squarespace, or some other vendor of free sites is the simplest way.

14. Upload your sticker app to iTunes Connect. (!!!!!!)

  • In Xcode, go to Product > Archive.
  • If there are problems with this process, go to Product > Clean or give your friend the developer beer and pizza to bail your butt out – I can’t help ya here…
  • Then “Upload to App Store…” (!!!)
  • Assuming nothing’s wrong and your build is clean, click on buttons that say “next” or take you on to the next step.
  • Assume the best and change nothing 😉 *
  • You’re almost there!

15. If you plan to charge for your app, set up your tax and banking information.

  • I have not done this step yet (so I have 0 advice to give) because I’m not selling anything just yet – my main goal was to just go through the process, get something out there, and refine it.

16. Fill out your App Store Information in iTunes Connect.

  • Select your app in iTunes Connect go to App Information.
  • Fill in Privacy Policy URL with the appropriate link to your website.
  • Select “Stickers” as the Category and choose sub-categories. This is highly recommended because the current UX of the iMessage store is JACKED UP, and discovery is practically nil.
  • In the Pricing and Availability Tab, set your sticker price. You can also add pricing tiers if you wish.

17. Prepare your app for submission.

  • Under Prepare for Submission, add your app screenshot(s) for iPhone and iPad.
  • Fill in your sticker app description.
  • For keywords, fill in search terms that you think describe your sticker app and would help other people find it.
  • Put your website or WordPress link for both the Support URL and Marketing URL.
  • Under Build add your current, most-recent build of the sticker app that you archived and uploaded to the App Store in previous steps.
  • Under General App Information, use the 1024 x 1024px app icon that you created earlier.
  • Add the copyright holder – YOU.
  • Select ratings for your stickers using the guidelines Apple gives you.
  • Under App Review Information, fill in your contact information.
  • Deselect Demo Account if it’s selected.

19. Pull the trigger and Submit your app.

  • Select “Submit for Review,” then answer “no” to the questions regarding Export Compliance, Content Rights, and Advertising Identifier if you haven’t done any of those things with this app.
  • Click the “Submit” button and finally you’re done!

After your app goes through the Apple approval process (typically ~4–5 days for new apps; ~2 days for updates to approved apps) your sticker app will available to download from the Messages App Store.

The actual process here is pretty opaque to me right now. Could be tiny Martians with magnanimous tempers reviewing your stickers, could be an algorithm. I haven’t tried to find out, either way.

Congrats, you’ve made your own sticker app!

The *s in this document show you the MANY MANY places where I jacked it all up because I didn’t RTFM. Or RTFM all the way through. Or understand what they were saying in TFM. I personally spent ten minutes building the app and DAYS banging through forums and developer-centric documentation trying to figure out WTH is going on here anyway…

Credits:

Share this article

Leave a comment