Part 3: Creating a Hand-lettered Sticker Pack for iMessage

Creating-a-HandLettered-Sticker-Pack-for-iMessageArtboard-1.jpg

Disclaimer: Since I am not an iOS developer, I have partnered with a friend (who we'll call JP) who handled the technical details of the sticker submission to the App Store. For more information on the technical requirements in submitting the sticker pack to the App Store, please refer to this page: https://developer.apple.com/stickers/

To see the rest of the stickers in the pack, and to support our work, you can download Nasty Christmas from the App Store.

We are now in Part 3 of this series:

After inking the pieces, I will show you a quick and easy way to get your drawings digitized. Since the goal is to have a rough- hand-lettered feel, this is one of the simplest ways to get the final output.

Part 3: Digitizing and Preparing the Submission-Ready Files

After refining the sketch on paper, the images will be scanned and touched up on a computer.

Scanning

Scan the images into the computer then load Illustrator. (I am using Adobe Illustrator CC). Create a new document. At this point, I chose a Web 1440 x 900 layout for the initial refining. Later on, I created a new document to prepare the final outputs for export. I will share more later.

illustrator - create new document
illustrator - create new document

In Illustrator, import the images or drag it onto the artboard.

Image Trace

Make sure that the Image Trace window is active. If it is not active, select Window > Image Trace.

illustrator image trace
illustrator image trace

Select the imported image. Choose the Black and White mode and make sure that the Preview checkbox is selected. You can drag the Threshold slider left or right and see the output updated on the screen. This slider adjusts the strokes and the fills of the shapes in the image. It also adjusts the amount of noise. When you are happy with how it looks, you can now convert the scanned image into vector form. From the header menu, there is an Image Trace menu. From there, click Expand. This will expand the shapes into paths in Illustrator.

illustrator image trace - expand
illustrator image trace - expand

After expanding, it will look something like this.

illustrator image trace - expand selected
illustrator image trace - expand selected

Editing and Refining

At this point, I created a new file and prepared 20 artboards with 408 x 408 px each. You can choose among the different available sizes that iMessage is supporting (300 x 300 px, 408 x 408 px, 618 x 618 px). Open the Artboard window (Window > Artboards) and click the New icon at the bottom of the Artboard window.

illustrator artboards -1
illustrator artboards -1
illustrator artboards
illustrator artboards

Once the artboards are prepared, you can cut each of the sticker groups and paste them into the artboards. You can edit the stickers on the artboards. Note that after the image trace, all the paths are grouped together. So you may need to ungroup them first, or double click to get to the layer you want to work on.

illustrator copy
illustrator copy

You can add colors, change the angles, add various accents, and delete unwanted elements. Repeat this for all the stickers. For this set of stickers, I made sure to make all of them transparent.

illustrator edits
illustrator edits

Once you have finished editing, you should have something that looks like this.

illustrator final artboards
illustrator final artboards

Preparing the Submission-Ready Files

illustrator export for screens
illustrator export for screens

After preparing each of the stickers on their respective artboards, you can export them easily. Go to File > Export > Export for Screens... then set the export folder and click Export Artboard. After this, you should have all your stickers ready for upload.

As part of the process, you also need to create some application icons by using the template. Using the template is simple. Open the file in Photoshop.

appicon template screenshot
appicon template screenshot

After you open, expand the layers and double click on the icon layer. Then, a new document will open where you can center your App Icon design.

appicon icon - layer
appicon icon - layer
appicon icon
appicon icon

After saving the document and closing it, your design will automatically be on all sizes.

appicon finished
appicon finished

All you need to do is to export the icons by selecting File > Generate > Image Assets to export assets.

That's it! You are now ready to send your stickers for submission!