Tuts+ Design & Illustration | Miss Chat*Z What You’ll Be Creating

You may have noticed that there is a craze for iMessage stickers since they were introduced with iOS 10. Today, you can now create and sell your very own digital stickers, instead of using the pre-installed emojis.

iMessage stickers are a cool and fun way to express your ideas and thoughts because you can peel, place, and stick them into your chats!!

If you’ve ever wondered what goes into making a sticker pack for iOS, in this tutorial, we will work from a sketch to design simple iMessage stickers in Adobe Illustrator using lines, shapes, and colors. Then will briefly shift to iTunes Connect and Xcode to launch our own iMessage sticker pack onto the App Store.

If you’re looking for emoticon inspiration for your own sticker designs, pop on over to GraphicRiver.

1. Come Up with a Concept and Prepare Your Sticker File in Adobe Illustrator

Step 1

I’ve been missing home for a while. No matter how much I enjoy the wonders of travel, my belly is
always filled with the scent of “home” food. So I decided to base my theme on “Lebanese food”. There is absolutely nothing
as rich and abundant with variety as Lebanese cuisine.

So let’s start by sketching out our food concept on paper or digitally.

I’ve sketched out 12 food “stickers” from the Lebanese table, and labelled their names in Lebanese, just for reference.

Generally it’s good to have about 24 designs for a sticker pack, but for the sake of this tutorial we are working on just 12.

Start by sketching out 12 items in a 4 x 3 grid form, as below.

After you have finished sketching, move the sketch into Adobe Illustrator.

Step 2

Launch Adobe Illustrator CC.

Open a New Document: File
> New (Command-N) and set up your Custom file:

Name: “Lebanese_Food_iMessage_Stickers”.

• Number of Artboards: 12 (respective to the number of stickers, as each sticker should have its own artboard)

You have three choices of sticker sizes to create.

• Small: 300 x 300 pixels
• Medium: 408 x 408 pixels
• Large: 618 x 618 pixels

I personally prefer working on 618 x 618. So adjust the New Document Settings:

• Columns: 4
• Width:
  618 px
• Height:
  618 px
• Units: Pixels
• Color Mode:
  RGB
• Click Create Document

Step 3

Use the Place shortcut (Command-Shift-P) to place the sketch onto the first Artboard. Drag the image to fill all the artboards, so your sketches fill all the artboards created.

Next, we need to create a layer for our line work. 

Open the Layers panel, Window > Layers.

Click
on the sub-menu of the Layers panel:

1. Name: Sketch
2. Select Lock
3. Dim Images to: 20%
4. OK

After locking the “Sketch” layer, Create New Layer, on top of the ‘Sketch‘, and name it ‘Linework’.

File > Save (Command-S), and save your Illustrator file.

2. How to Draw the Line Work

Step
1

Let us prepare to draw in our line work.

First, we need to create a “pressure” Calligraphic art brush. Open the Brushes panel: Window > Brushes.

Select the Ellipse Tool (L), with a black Fill, null Stroke, and draw in a small ellipse the size of the brush you want to draw with.

Step 2

With the ellipse selected, drag and drop it into the Brushes panel. 

A New Brush dialog box will pop open. Select
Art Brush, and OK.

The Art Brush Options dialog
box will open.

Note: If you have a digital pen tablet, it’s perfect to create an art brush that reacts to the pen pressure.

To create a brush to move with the pressure of the pen, in the Art Brush Options dialog
box, select:

• Width: Pressure
• Brush Scale Options: Stretch to Fit
  Stroke Length
• Colorization Method: Tints; this will enable us to customize the colors of our custom brush strokes later.
• Click OK.

Once the art brush is created, Delete the created ellipse.

Now we have a pressure-oriented art brush ready!

Step 3

Let’s start tracing the sketch.

1. Open the Stroke panel: Windows > Stroke.
2. From the Brushes panel, select the art brush we just created.
3. Choose the Paintbrush Tool (B), from the Tools panel.
4. In the Stroke panel, select a black Stroke of 0.5 pt, and Fill set to none.

Make sure your brush is not very smooth when you trace, so that it looks as if it’s hand drawn. To smooth out the art brush, double click the Paintbrush Tool (B), from the Tools panel, and the Paintbrush Tool Options dialog box will open.

Drop the Fidelity down a notch or two.

Step 4

Let’s start tracing with the Paintbrush Tool (B).

Follow the sketch and trace in the line work. It does not have to be perfect, as we want to give it a simple hand-drawn doodle effect.

Once all the line work is put in, Lock your “Linework” layer from the Layers panel.

Create New Layer, under ‘Linework“, and name it “Color“, so we can apply color below the line work.

Always Save your file. File > Save (Command-S).

3. How to Quickly Color the Artwork

Step 1

Let’s color!

From the Tools panel, select the Blob Brush Tool (Shift-B). The Blob Brush is similar to a marker, and it’s fun to use. 

Just select the Color Stroke swatch of your choice, with null fill,
and color in the food icons.

• A quick tip: To manage the Blob Brush Tool size, hold the left square bracket key ([) to decrease the
  brush size and the right square bracket (]) to enlarge.
• Along with the Blob Brush Tool (Shift-B), use the Eraser Tool (Shift-E), to erase any blob shapes you want to clean out.

The coloring doesn’t have to be perfect, as we need it to have an organic feel.

Start with the hummus.

As you see, you can achieve a lot with the Blob Brush Tool just by changing its size and colors. Plus it’s fast to use.

So have fun and color in the rest of the artwork!

Step 2

You need to arrange the blob shapes as you color along, so to Arrange objects, use these shortcuts to speed up the workflow:

• Arrange > Bring to Front (Command-Shift-])
• Arrange > Bring Forward (Command-])
• Arrange > Send Backward (Command-[)
• Arrange > Send to Back (Command-Shift-[)

Once you have arranged everything, you should have a nice colorful set of icons.

Step 3

Now let’s clean up our artboards.

1. Unlock the “Linework” layer from the Layers panel.
2. Delete the “Sketch” layer, by dragging
   it from the Layers panel to the
   trash icon on that panel.
3. Select the Selection Tool (V), and for each food icon, select the respective line work and color.
4. Group (Command-G) it together. Automatically, once you group the two layers, the new group moves into the “Linework” layer.
5. Center each icon to the center of the artboard by simply eyeing it.

6. Scale the grouped objects to fit within the artboard dimensions, and keeping a small space along the borders. To
maintain the object’s proportions, hold down Shift as you drag the bounding box handle until the object is the desired size.

7. Once all the food icons have been scaled, delete the “Color” layer, as it’s empty.

File > Save (Command-S).

4. How to Export and Create Our App Icons

Step 1

Export the art files, using the Export for Screens feature (File > Export > Export for Screens). 

1. Export as PNG.
2. Click the Advanced Settings icon, select which location to export your files to, and set Scale to 1x.
3. Set Background Color: Transparent.
4. Export Artboard.

Step 2

You have two choices. Either choose to use a secondary app Marketplace to launch the stickers, like LINE Creators Market, or build it yourself using the Apple Developers Account.

For this tutorial I will briefly guide you through opening an Apple Developers Account, which costs $100 a year. The application process is quite straightforward, and acceptance is quick. However, then you need to sign in to iTunes Connect and set up the administrative stuff like the Tax and Banking, if you’re planning to sell your stickers (This is not required for free sticker packs).

For more
details, go to the iTunes Connect Developer Guide, and take the time to familiarize yourself with it.

Step 3

To generate our stickers, we need to use Xcode.

Download the latest version of Xcode 8 direct from the Mac App Store and Install.

Step 4

Uploading the stickers to Xcode is easy; just follow the steps:

Open Xcode.

Make sure you are signed in to Xcode with your Apple ID.

Preference > Account > Select + > Sign in.

1. Create a New Xcode Project.
2. Select Sticker Pack Application.
3. Click Next.
4. Give the sticker bundle a Product Name to identify it: ‘Lebanese Food‘.
5. Then fill out the Team, Organization Name, and Identifier (com.yourcompany.ProductName), according to your details.
6. Click Next
7. Select Stickers.xcstickers > Sticker Pack folder, and upload the stickers, by dragging and dropping the images.

Step 5

Next upload the iMessage App Icons.

The folder is above the ‘Sticker Pack’ folder.

Chose one image from the food set that you want to use for the App Icon, and convert it into a JPG in Adobe Photoshop, so it has a white background. Rename the App Icon image: “Lebanese_Food_App_Icon.jpg“.

There are 12
icon images in total that you will need for Xcode, and 1 for iTunes Connect.
To generate the app icons easily, visit MakeAppIcon.

Upload the selected food icon onto the website, enter your Email, and it will generate all the various app icon file sizes for you.

You can Download them direct from your email.

Once you have downloaded the generated images, Upload into Xcode by dragging and dropping.

It should look something like this once you’ve uploaded to Xcode.

5. Configure and Register the Stickers

Step 1

Once you have uploaded the stickers, you need to ‘Test the Build‘ from Xcode, to see if the stickers in
action are good. You can do this through the
Xcode Simulator, or
you can run it on your own device. All you need to do is:

1. Select your mobile device, under Set the Active Scheme.
2. Click the Run button.

If a notification error is showing, make the requested changes, export and upload the corrected icons again.

Then test the stickers on the Xcode Simulator by clicking the Run icon. Looks fab!

If you need to adjust the display size of your stickers on iMessage, you can do so in the right panel, as seen below.

The sizes “Medium” or “Small” work well.

Once it’s done, we need to register an App ID for the stickers.

Step 2

Log in to your Apple Developer Account to register an App ID.

1. Enter Account > Identifiers > App ID > Select +
2. Fill in the details and Register.

Step 3

Now we can finally Export & Upload our “build” to iTunes Connect!

Go back to Xcode.

1. Select “Generic iOS device” under Set the Active Scheme.
2. Then select the ‘Stickers.xcstickers’ folder, and from the top main menu click Product > Archive, to Archive the build.
   

A new window should appear that will show the archived “Build“. You will see the stickers in the left panel.

Click Validate to see if all stickers are good to go. If there are
issues, Xcode will display a notification in red on the top menu bar.

If everything goes well with the “Build“, then you need to upload it to iTunes Connect for Review.

Click on Upload to App Store. This will upload the stickers to iTunes Connect. After it’s done uploading, it should appear on your iTunes Connect account. Give it a few minutes.

Step 4

Time to submit the stickers to the App Store!

In iTunes Connect:

1. Select My Apps.
2. Select + > New App, and select the ‘Build‘ we just uploaded for submission.

1. Select iOS platform.
2. Name: Lebanese Food.
3. Select Language and Bundle ID.
4. Create a unique SKU “eg.location.com.bundle_title”.
5. Create!

On the left menu panel, fill out the App information and Pricing & Availability. Here you can write the app description, language, categories, and price of the app. We will not get into all the details, as it’s quite straightforward, but it should look similar to this:

Step 5

In Adobe Photoshop, create some screenshots, using the Xcode Simulator, and upload them onto iTunes Connect, to create iMessage preview images for the screenshot displays. This might take some time. Create 5 screenshot dimensions: iPhone 5.5 inch display (1242 x 2208 px). The system will generate the rest of the sizes for you.

Once done, click Submit for Review.

And
that’s it!

Now all you’ve got to do is wait for the review process for a few days, to get approved.

While your stickers are in review, you can send out Test invitations to your fans through TestFlight, to try out the stickers free for 60 days. Or you can use the time to set up your taxes, agreements, certificates, and
bank details with Apple.

It’s a bit time-consuming, and you will face some errors along the way, but with some patience and help, you will get there.

Congratulations!
Our “Lebanese Food” iMessage Stickers Are Ready!

Wow, I hope
you’ve enjoyed this tutorial! Designing stickers is fun, especially if you can make some money out of it! 

Purchase the ‘Lebanesy Food’ sticker pack from iTunes.

I hope you found this tutorial useful! I would love to see what you create! Share your sticker designs with us.