How to Create Khaleeji Woman Emoji iMessage Stickers in Adobe Illustrator

Love using emojis? Now you can learn to make your own!

We all use emoticons/emojis
(emotion icons) in our messenger chats, apps, and online comments. Emojis are a very fun way to show our feelings without words. Though many apps offer free emoticons, you should not feel limited to only
those. Create your own!

Today you’re going to learn, step by step, how to set up and design a small set of Khaleeji woman emojis. We’ll
work with basic Adobe Illustrator tools and shortcuts to create a female character with different expressions, and move on to using Xcode to export the images.

Check out GraphicRiver to get inspired by other emoticon designs.

1. How to Sketch & Set Up an Emoji Artboard

Step 1

First, we need to sketch out our character.

Common “beauty” features that Middle Eastern women are genetically blessed with, but not limited to, are:

• full eyebrows
• big kohl-contoured eyes, and curled lashes
• olive complexions
• plump lips
• thick hair

Keep those in mind and sketch out a “non-emotional” female face, and add a hijab to make her look “Khaleeji” (from the Gulf).

Then use the same basic face sketch and multiply it, to illustrate nine different emotions you might share with friends and family, such as happy, in love, surprised, crying, and so forth.

Fundamentally, you can change expressions by just changing the eyebrows, eyes, and mouth of the initial sketch. Check out how I altered my emoji emotions.

Step 2

Set up a New Document (Command-N): 

• Number of Artboards: 1
• Width: 618 px
• Height: 618 px
• Units: Pixels
• Color Mode: RGB

Step 3

Use the Place shortcut (Command-Shift-P), and place the sketch. Then Lock (Command-2) the sketch down, so we can start tracing on top.

2. How to Trace the Initial Emoji Design

Step 1

Let’s start tracing by drawing the eyes.

Select the Ellipse Tool (L), from the Tools panel.

1. Create the iris of the eye, a 60 x 60 px brown (#7C3722) fill circle, using the Ellipse Tool (L).
2. Draw the pupil of the eye, a 40 x 40 px brown (#351105) fill circle, and place it above the iris
3. Using the Ellipse Tool (L), create two eye reflection highlights: one rotated 26 x 17 px and a 14 x 14px (#FFFFFF) fill circle.

Then, with the Selection Tool (V), select all four ellipses and Group them together (Command-G).

Step 2

From the Tools panel, select the Pen Tool (P), and with a (#FFFFFF) white fill, draw in the “sclera”—the white of the eye.

1. Object > Arrange > Send Backward (Command-[), to position it behind the pupil shapes.
2. Then Copy (Command-C).
3. And Paste in Front (Command-F).
   
4. Object > Arrange > Bring Forward (Command-]), to position it in front of the pupil shapes.

What we need to do is create a clipping mask for the pupils.

With the Selection Tool (V), select the sclera + pupil group, Object > Clipping Mask > Make (Command-7).

Now the pupils are masked.

Step 3

Using the Pen Tool (P), draw in the upper/lower eyelids, eyeshadow, eyelashes, eyebrows, and cheek blush, with a black stroke and null fill.

Color fill:

• Eyebrows #893A28
• Eyeshadow & Lower Eyelid #CC6E4A
• Eyelashes #000000
• Eye Shading #B5D7EA
• Cheeks Shading #FFB7A6

You will need to Align the shapes to the Front or Back.

To move above or below, Object >
Arrange > Bring to Front(Shift-Command-]) or Object > Arrange >
Send to Back(Shift-Command-[).

For just one step to back or front, Object > Arrange > Send Backward(Command-[) or Forward
(Command‑]). Object > Arrange > Bring Forward.

Step 4

Open the Transparency panel: Window > Transparency.

Select the light blue eye shade shape, and give it a Multiply: Blending Mode from Transparency panel.

Then select the cheek shape and give it a Multiply: Blending Mode, too.

Effect > Stylize > Feather: Radius:13px.

Step 5

Group all eye shapes together (Command-G).

We need to create symmetrical eyes. Use the Selection Tool (V), and select the eye group, cheek shade, and eyebrows. Take the Reflect Tool (O) and set the blue center reference point above the nose; Option-Shift-Drag and release to mirror into position.

Step 6

Let’s illustrate the rest of the emoji features. Use the Pen Tool (P), and trace over the remaining parts of the sketch.

Then select each shape, give it a fill color of your choice, and arrange it in its proper order.

Remember, to move above or below, Object >
Arrange > Bring to Front(Shift-Command-]) or Object > Arrange >
Send to Back(Shift-Command-[), and just one step  back or front, Object > Arrange > Send Backward(Command-[) or Forward
(Command‑]).

Step 7

Object > UnlockAll (Command-Alt-2), and delete the sketch. Tweak and clean up the artwork with the Direct Selection Tool (A).

Select the face shape, Object > Path > Offset Path: Offset – 4px

Then select and give the outer face shape a darker skin color.

Step 8

Select the hijab shape, Object > Path > Offset Path: Offset 5 px and give the new outer shape a black fill.

Now we have our initial emoji set up.

File > Save (Command-S).

Step 9

Our next step is to duplicate the artboard to maintain the basic emoji features. Go to Window > Artboards. Select the drop-down menu and Duplicate Artboards. Duplicate it nine times.

Then, from the Artboards panel’s submenu, select Rearrange Artboards:

• Layout: Grid by Row
• Columns: 3
• Spacing: 20 px

3. How to Illustrate Emotions

Step 1

Now that our artboards are set, we can start drawing in the emotions.

The first artboard emotion is: “Oh!”

• Delete the lips and eyebrows.
• Then, select the Pen Tool (P), and draw in the “O” lips and slanted eyebrows of the emotion :O

Select each new shape with the Selection Tool (V), and use the Eyedropper Tool (I) to select its corresponding partner, to give it the same color.

The eyebrow color I had wasn’t strong enough in appearance, so replaced it with a darker color.

Select > Same > Fill Color and give them a fill color of  #4F2018.

Use the Selection Tool (V) to move the small beauty spot closer to the lips, and you are done with the first emoji!

Step 2

Artboard 2: “Upset” emoji.

1. Delete the eyebrows and lips.
2. Draw a new expression with the Pen Tool (P), and match the colors with Eyedropper Tool (I).
3. Use the Selection Tool (V) to move the beauty spot closer to the lips.

Step 3

Artboard 3: “Angry” emoji.

First, select the eyebrows with the Selection Tool (V) and rotate them inwards to show anger. Then, draw angry lips and anger sparks with the Pen Tool (P), 1 pt, black stroke.

Finish off by matching colors with the Eyedropper Tool (I), and giving the sparks a red color.

Step 4

Artboard 4: “Shock” emoji.

1. Delete the eyebrows and lips.
2. Draw highly arched and curved eyebrows and an open mouth, with the Pen Tool (P), and match the colors with the Eyedropper Tool (I).

Step 5

Artboard 5: “Cool” emoji.

Use the Pen Tool (P) to draw cool cat-eye sunglasses over the eyes, and add a white reflection.

Then, using the Direct Selection Tool (A), tweak the lips to look more “pouty”, and delete the dark center of the lips.

Step 6

Artboard 6: “Delighted” emoji.

1. Delete the eyes and the dark lip center.
2. Draw eyeshadow, and black filled “squinting” eyes with lashes, using the Pen Tool (P).
3. Use the Selection Tool (V) to lower the brows and slightly rotate them straighter.
4. Use the Eyedropper Tool (I), to match colors.

Step 7

Artboard 7: “Giggle” emoji.

1. Delete the eyes, brows, and lips.
2. Use the Pen Tool (P), to draw eyeshadow, arched squinting eyes with long lashes, a curved smile, and arched brows.
3. Use the Eyedropper Tool (I) to match colors.
4. Use the Selection Tool (V) to lift the cheek shadow upwards and move her beauty spot closer to the mouth.

Step 8

Artboard 8: “Cry Me a River” emoji.

1. Delete the eyes, brows, and lips
2. Use the Pen Tool (P) to draw inverted brows, water flowing eyes, lots of tears, and an open mouth.

Next, use the Eyedropper Tool (I) to match colors, and color fill the tears with shades of blue. Remember the shortcuts to arrange elements to the back/front. Move the beauty spot closer to the lips. Use the Pen Tool (P) with a dark skin shade, and draw a triangular shape below the tear flow to make the tears look as if they are flying out.

Step 9

Artboard 9: “In Love”  emoji.

1. Delete the eyes and lips.
2. Use the Selection Tool (V) to rotate the ends of the brows, and lower them slightly.
3. Use the Pen Tool (P) and draw two big hearts in place of the eyes, a shy smile, and hearts around the hijab.

Finally, use the Eyedropper Tool (I) to match colors.

Step 10

The last step is to go back through the set, clean up the artwork, make tweaks wherever you see fit, arrange objects in the proper order, and add reflections or extra elements to make each emoji pop, if needed.

File > Save (Command-S).

4. How to Export & Build an Emoji Keyboard

Step 1

File > Export As.

Format:  Select PNG, check Use Artboards, and Export.

The PNG dialog box will appear:

• Resolution: Screen (72 ppi)
• Background Color: Transparent
  
• Click OK

Step 2

Now to make our emoji keyboard.

Apple made it easy with Sticker Apps for Messages in iOS 10. Most apps today do not allow for custom emoji or stickers, so until they’re available, you need to build one.

The keyboard we will build with Xcode can
be used mixed with text you type and custom emoji that function
as stickers. You can actually peel
them off the keyboard and place them on top of other messages.

If you are just getting into creating sticker emojis, you can check out my
other tutorial How to Create iMessage Stickers for a more informative guide.

You will need to set up your Apple Developer account (USD99/year) and iTunes Connect. Plus download Xcode.

Step 3

We will go briefly through this process.

Sign in to Xcode with your Apple ID: Preference > Account > Select + > Sign in.

1. Create a New Xcode Project and select Sticker Pack Application, and click Next.
2. Give your emoji pack a Product Name: ‘Khaleeji Woman Emoji‘.
3. Fill out Team, Organization Name, and Identifier, according to your details, and click Next.

Step 4

Click on the blue
Stickers.xcstickers folder in the left navigation area and drag the emoji images into the editor area.

1. Under Set the Active Scheme, select your device model, e.g. iPhone7 Plus.
2. Run your build, to test the stickers on an iMessage simulator.

Test out the emojis on the simulator.

Step 5

If it’s all running well, then create the iMessage app icons, and you’re ready to archive and
submit to the App Store.

To create app icons, use MakeAppIcon.

Upload a 1536 x 1536 px version of the app image into the MakeAppIcon webpage, and it will email you all the sizes you need for all iOS devices.

Click on the blue
Stickers.xcstickers folder in the left navigation area, and select the iMessage App Icon folder, and upload all the icon images by dragging and dropping.

Step 6

Finally, Product > Archive.

• Window > Organizer. You will see your stickers in the left bar.
• Validate.
• If it’s all good, Upload to App Store, and it will appear on your iTunes Connect, and you can send it through to Review.

Once you’re ready, click Submit. And
that’s it!

Wait for the review process, which usually takes a few days, and your emoji keyboard will be ready!

Ready, Set, Text!

Great job! We’ve illustrated a custom Khaleeji Woman Emoji set, using basic Adobe Illustrator shortcuts and tools. We can use these simple techniques to draw a larger set of emojis to share and upload on our iMessage app.

Share and enjoy!