Thursday, September 15, 2016

Creating a Sticker Pack for iOS 10

Sticker pack on iOS 10
Apple is at it again. Just like what they did to Spotify with Apple Music or online courses with iTunes U, they’re trying to wipe yet another company off the map. This time they’re gunning for messaging apps. So look out Facebook Messenger: iMessage is on the way.

Well maybe that’s an exaggeration, and it’s certainly not a bad thing – most countries still embrace capitalism, after all. But it’s quite an ambitious move on Apple’s part. Extending the App Store to iMessage creates a host of new opportunities for app developers and graphic designers alike. Other messaging platforms that don’t allow developers to make their own stickers will need to catch up.

The best part (or possibly the worst), is that it doesn’t require any coding to create your own sticker pack for iMessage. This post will show you just how simple it is.

As always, start by creating a new Xcode project. Under iOS, select “Sticker Pack Application”. Although iMessage is also available on Mac, it appears as though Apple decided to not to support stickers yet, so you’ll need to make it for iOS. You can obviously call it whatever you want, but for this example, I thought I’d assemble a pack of Godzilla characters.

After that, you should be presented with a blank project and a single asset catalog called Stickers.xcstickers. This contains a folder called “Sticker Pack” and a screen to add the pack’s icon. And just as we’d expect, we need to provide tons of different icon sizes.

Back to the stickers, adding them is fairly straightforward. I first did an image search for “Godzilla icon” and grabbed a few images. In real life, you’d need to make your own images, but this tutorial is merely for demonstrational purposes and will not be submitted to Apple. To test it out, here’s one of the icons I used.

Then just like with any other image, we drag it from Finder and drop it into the assets file. There’s not much else to it, though you can customize the size if you want, or add an accessibility title.

As for the app icon, it’s just like the icon for any normal app, except that the image dimensions are different. A site like can help speed up this process and resize the images for you. I used this image when creating the icon.

Once that’s done, you can just build and run the project. The simulator will launch straight into iMessage and you’ll be able to select the sticker pack from the icon that looks like an App Store logo.

Thankfully. sticker packs don’t leave a separate icon on the home screen. If you want to delete one, you can use the same tap and hold procedure on the menu for selecting a sticker pack. If you have an existing app and want to create a sticker for its logo (not that anyone would use it), you can add one directly into an existing Xcode project. Just go to File > New > Target to add a sticker pack extension. Or they can stand on their own like in this example.

Perhaps it won’t put Facebook Messenger out of business, but an Apple-sanctioned sticker marketplace is sure to have interesting implications. Some sticker packs even weigh in on the U.S. presidential race.

No comments:

Post a Comment