Part 3: Creating a Hand-lettered Sticker Pack for iMessage
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:
- Part 1: Tools, Planning and Research
- Part 2: Sketching and Refining
- Part 3: Digitizing and Preparing the Submission-Ready Files
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.
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.
In Illustrator, import the images or drag it onto the artboard.
Make sure that the Image Trace window is active. If it is not active, select Window > 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.
After expanding, it will look something like this.
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.
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.
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.
Once you have finished editing, you should have something that looks like this.
Preparing the Submission-Ready Files
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.
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.
After saving the document and closing it, your design will automatically be on all sizes.
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!