I’m going to show you how you can easily create an iMessage sticker pack with your own photos, photos of your pets, hand drawings, or illustrations! I’ve also included my own Figma template to make it easy for you, so be sure to read on.
Why I wrote this article
I once created an iMessage sticker with a picture of a cat.
The thing that people ask me the most about is how to make these iMessage stickers, rather than iOS app development.
Many people ask me if they can make them with their own dog or cat, or if they can make them with their own drawings, so I’ve summarized the process of creating a new iMessage sticker with my own illustrations.
You can download my previous tuxedo cat emoji sticker for free at the link below 😃
Before you start
To create an iMessage sticker pack, you’ll need a few things.
A MacBook or Mac running macOS, Xcode, and a developer account.
- Sign up for an Apple Developer Account membership (129,000 won per year)
- Check your Xcode version (14 is recommended)
I recommend 14 because the current Xcode version, 15.3, doesn’t show the emoji sticker in the simulator and the settings for the sticker are missing from the inspector window in Xcode.
You can download previous version Xcode here.
https://xcodereleases.com/
As I wrote above, I currently have both 15.3 and 14.3 versions of Xcode.
The iMessage sticker pack was much easier to work with in Xcode 14.3, so I recommend version 14.
1. Create a project
1) Click [Create New Project… ] to create a project.
2) Select [Sticker Pack App] from the iOS tab.
3) Set the project options
- Product Name: The name of your product, not the name that appears in the actual app store.
- Team: Your Apple developer account
- Organization Identifier: The identifier for your organization.
The identifier for the bundle, which is a combination of the product name and organization identifier.
2. Add a sticker image
Check specifications — Sticker Image Size
- Small. 100 x 100 points @3x (300 x 300 pixels).
- Medium. 136 x 136 points @3x (408 x 408 pixels).
- Large. 206 x 206 points @3x (618 x 618 pixels).
See also: Human Interface Guidelines
The sizes listed above are three times the size of the actual image. The runtime will automatically create 1x and 2x sizes for you.
Add the image to the desired size.
Check specifications — Formats
PNG, APNG, GIF, JPEG, HEIC, and HEICS are accepted as sticker images.
Setting sticker images
Static stickers
Static stickers are stickers that are made of simple images without animation.
Inside the [Sticker Pack] folder, drag and drop the images you want to use as stickers.
Animated Stickers
You can add a sequence of stickers by pressing the [+] button at the bottom of Xcode.
This means you can create animated stickers by adding images that become animated frames.
You can preview it by pressing the play▶️ button like this.
3. Preview in the simulator
At the top of Xcode, select your iPhone simulator model, Click the ▶️ button on the top left to see the sticker in the simulator.
You can preview the stickers in the actual iMessage app within the iPhone simulator, as shown below.
4. Add App Icons and Appstore Screenshots
Add an icon for the app and a screenshot for the app store for uploading to the app store.
Add App Icons
You will need to create icons of different proportions and sizes.
Create an icon for each of the specified sizes and drag and drop it into the right place.
If it doesn’t fit, you’ll see a yellow exclamation point icon.
If it fits, it should look like this.
Add Appstore Screenshots
For iPhone —
- 6.7" : 1290 x 2796 pixels
- 6.5" : 1284 x 2778 pixels
- 5.5" : 1242 x 2208 pixels
For iPad —
- 12.9" : 2048 x 2732 pixels
As with a typical app, you will need to upload screenshot images for iPhone 6.5" (or 6.7") , iPhone 5.5" display, and iPad Pro 6th Gen 12.9", 2nd Gen 12.9" inch only.
You can see more screenshot specs in the links below.
5. Upload to the app store
1) From the app menu, click [Product] > [Archive].
2) When the archive is completed, a list of archives appears as shown below, select the desired archive and click the [Distribute App] button on the right.
3) A pop-up will appear, select the [App Store Connect] option and tap the [Next] button.
4) Once deployed, access App Store Connect with your Apple developer account. The build may not go up immediately, so if you log in to App Store Connect and don’t see the sticker app information, wait a while.
Once deployed, you should see your new iMessage sticker app in the [Apps] menu in App Store Connect, as shown below. Click the app.
5) In the Build section, press [Add Build].
6) In the [Select Build] pop-up, select a build. The build with the higher number is the most recent build.
After you add a build, click [Missing Compliance] to fill it in.
7) Now upload your app’s privacy policy, support page, encryption, app info, screenshots page, etc. and you’re ready to submit your app.
I created the privacy policy and support page using Notion and attached the links. You can fill in the rest as you see fit.
8. Submit your app by tapping the [Submit to App Review] button in the top right corner of the page, and you’ll see a screen like the one below, indicating that your app is ready for review.
Now wait for your app to be reviewed, and if it passes the review with flying colors, your app will be published on the App Store.
# iMessage Sticker Pack 무료 피그마 템플릿 제공
I’ve created a Figma template to help you easily create iMessage sticker images, app icons, and screenshots.
Feel free to copy it from the link below and give it a try!
End
I’ve released the iMessage sticker pack I showed in my tutorial. If you found my post helpful, I hope you’ll download and enjoy it!
Also, if you’ve created your own iMessage sticker pack using my Figma template, please let me know in the comments.
I’d be happy to see it!
See Also
You can read the article in Korean at the link below.
