Some iOS Stickers, and the Magic You Don’t (Usually) Get to See

There’s a great This American Life episode about magic. The episode’s main idea is that you, the audience, is missing out on the best bit of the magic show. The audience gets to be amazed for a few minutes, but they miss the wonderful technical detail, the how-it-works. The audience gets the illusion, but don’t see the beautiful mechanisms, prototypes, and choreography from behind the scenes.

With that in mind, I wanted to share some of the process behind some iOS Stickers I recently made. I personally think they’re really beautiful. And because they’re used at a tiny scale on Messages, you rarely see the detail. (Buy them from here: Bright Butterfly Stickers for iOS.)

I wanted to share some close ups, and some technical information for those of you who might consider doing something similar.

Butterfly wings, drawn in Sketch

First up, I drew some wings using Sketch. I was inspired by real butterflies, mixing and matching properties of various wings. Then, I created a 3D animation tool in Quartz Composer that took these 2D wings and rendered them in some 3D planes. With some controls, I could easily animate set these to predefined positions.

Quartz Composer used to create a simple 3D model.

I made a shadow layer effect that emulated what this 3D shape might cast on a flat surface. And I took the opportunity to fake iridescence effects as the wings changed angle on some. With this I generated just a handful of frames, knowing that the App store had a limited size of 500KB for stickers.

Resulting frames from simple 2D transforms on the wings.

iOS stickers are based on the APNG standard, which is essentially a bunch of PNG images and timing data crammed into a single PNG file. PNG gets you crisp graphics and 8-bit alpha channel, which is needed when you want to overlay on images without a pixelated edge. However, PNG is an old and simple format. You need to work a bit to get rich images like these down into a suitable filesize.

A 17KB image, less than 1/3 of its original size as a regular PNG.

I used ImageOptim for PNG compression because it lets me control the lossy compression value. This let me get my filesizes to tiny. [“Lossy” means that the result is not a perfect copy of the original, but the resulting compressed file can be much, much smaller. MP3s are an example of this approach.] The Sticker format I made were 408 x 408, and some are as small as 9KB. Normally ‘flat’ sticker graphics compress to smaller files, but I was using rich gradients and other elements to make these butterflies really beautiful, and animated.

With my optimized frames in hand, I used APNG Animator to create APGs. Rather than wasting file space with many duplicate frames, I hand-crafted just this handful of frames’ timing to produce the desired effect. Putting a few butterflies on a message, with different timed wings, gives a lovely effect.

From there, it’s a lot less technical.

This guide and video walk you through dropping the assets into Xcode. Working out how to release something on the app store is more work than this step. But once I got that figured, I proudly present my first solo App store release!