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.
1. Come Up with a Concept and Prepare Your Sticker File in Adobe Illustrator
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.
Launch Adobe Illustrator CC.
Open a New Document: File
> New (Command-N) and set up your Custom file:
- 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
- Units: Pixels
- Color Mode:
- Click Create Document
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.
on the sub-menu of the Layers panel:
- Name: Sketch
- Select Lock
- Dim Images to: 20%
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
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.
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
- Width: Pressure
- Brush Scale Options: Stretch to Fit
- 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!
Let’s start tracing the sketch.
- Open the Stroke panel: Windows > Stroke.
- From the Brushes panel, select the art brush we just created.
- Choose the Paintbrush Tool (B), from the Tools panel.
- 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.
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
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 (