Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 24, 2017 08:00 am

How to Create Khaleeji Woman Emoji iMessage Stickers in Adobe Illustrator

Final product image
What You'll Be Creating

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 goingto 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 GraphicRiverto 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.

Sketch Khaleeji woman emoji Expressions Miss Chatz

Step 2

Set up a New Document(Command-N):

  • Number of Artboards:1
  • Width: 618 px
  • Height:618 px
  • Units:Pixels
  • Color Mode:RGB
Create a New Document

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.

Place Shortcut Initial Sketch Emoji

2. How to Trace the Initial Emoji Design

Step 1

Let's start tracing by drawing the eyes.

Select the Ellipse Tool (L), from theTools 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.
Ellipse Tool Draw Iris Pupil Glare

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.

Pen tool Copy Paste Sclera bring forward send Back

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

Now the pupils are masked.

Clip Mask Pupil eyes Emoji

Step 3

Using thePen 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.

Color Fill Object Arrange Bring front Back

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.

Transparency panel blending mode multiply radius

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.

eye group mirror symmetrical reflect

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.

Pen tool Trace Emoji Illustration tutorial

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‑]).

color fill shapes khaleeji woman emoji

Step 7

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

Direct Selection Tool Tweak illustration

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

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

Object Offset Path emoji

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.

object offset path hijab black

File > Save (Command-S).

Step 9

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

window artboards duplicate artboard panel

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

  • Layout: Grid by Row
  • Columns: 3
  • Spacing: 20 px
rearrange artboards by column layout spacing

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
O Oh emotion emoji pen Tool illustration

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.

slection tool Eyedropper tool 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 theSelection Tool(V) to move the small beauty spot closer to the lips, and you are done with the first emoji!

Select Same Fill color Eyebrow fill change

Step 2

Artboard 2: "Upset" emoji.

  1. Delete theeyebrows and lips.
  2. Draw a new expression with thePen 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.
upset expression eyedropper pen tool selection

Step 3

Artboard 3: "Angry" emoji.

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

angry emoji rotate pent tool draw sparks lips

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

angry emoji color eyedropper tool

Step 4

Artboard 4: "Shock" emoji.

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

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.

cool emoji draw pen tool khaleeji

Step 6

Artboard 6: "Delighted" emoji.

  1. Delete theeyes 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.
Pen Selection tool draw rotate brows

Step 7

Artboard 7: "Giggle" emoji.

  1. Delete theeyes, 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.
pen selection eyedroper tool draw eyes brows giggle

Step 8

Artboard 8: "Cry Me a River" emoji.

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

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.

cry emoji shape pop

Step 9

Artboard 9: "In Love" emoji.

  1. Delete theeyes 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.
pen tool draw heart Love emoji

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

eyedropper tool color hearts love emoji

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.

Custom Khaleeji Woman emoji tutorial

File > Save (Command-S).

4. How to Export & Build an Emoji Keyboard

Step 1

File > Export As.

Format: Select PNG, check Use Artboards, andExport.

The PNG dialog box will appear:

  • Resolution: Screen (72 ppi)
  • Background Color: Transparent
  • Click OK
export emoji file Png Transparent Screen 72ppi


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.
create new project xcode sticker pack application
product name xcode identifier team organization

Step 4

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

Xcode sticker emoji pack upload
  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.
xcode set active scheme run build

Test out the emojis on the simulator.

test khaleeji emoji on 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 pxversionof 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.

Xcode upload app icon images MakeAppicon

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 customKhaleeji Woman Emojiset, 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!

Khaleeji woman Emoji Keyboard Tutorial

Original Link:

Share this article:    Share on Facebook
No Article Link

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code