How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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!!

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 andXcode 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

Step 2

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

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

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 theArt 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 theTools panel.
  4. In theStroke panel, select a black Stroke of 0.5 pt, and Fillset 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 theTools panel, and the Paintbrush Tool Options dialog box will open.

Drop the Fidelity down a notch or two.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 theEraser 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

As you see, you can achieve a lot with the Blob Brush Tooljust 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

Step 3

Now let’s clean up our artboards.

  1. Unlock the “Linework” layer from theLayers 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 desiredsize.

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

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

File > Save (Command-S).

4.How to Export and Create Our App Icons

Step 1

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

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

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

Step 2

You have two choices. Either choose to use a secondary app Marketplace to launch the stickers, likeLINE Creators Market, or build it yourself using theApple 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 Connectand set up the administrative stuff like theTax and Banking, if you’re planning to sell your stickers (This is not required for free sticker packs).

For more details, go to theiTunes 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 StoreandInstall.

Step 4

Uploading the stickers to Xcodeis 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 theApp 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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!

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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

Step 2

Log in to yourApple Developer Account to register an App ID.

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

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 toiTunes Connect. After it’s done uploading, it should appear on youriTunes Connectaccount. Give it a few minutes.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

Step 4

Time to submit the stickers to the AppStore!

In iTunes Connect:

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

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

  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!

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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:

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!

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 throughTestFlight, 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.

How to Create iMessage Stickers in Adobe Illustrator and Make Extra Cash!