Create a Set of Fun Chat Stickers in Adobe Illustrator

by Mary Winkler

• 58
• 147
• 6
• Share

What You'll Be Creating

In this intermediate tutorial we'll create a character from scratch in Adobe Illustrator CC 2014 and then make a small set of sticker designs, ready for chat, mobile, and blog use. We'll go through the process of keeping the design consistent, creating various facial expressions, and simplifying components of the design for use throughout a set of icons.

1. Creating the Basic Character Design

Step 1

For a project like this, I like to start with the face of my character. Since the majority of the design is just a head (for the sake of this tutorial), it's the best place to begin anyway.

1. Using the Ellipse Tool (L), draw a circle. This will form half of the head.
2. Use the Pen Tool (P) to draw the lower left half of the jaw. Note how the jawline curves around to the chin softly, but moves upward at a right angle.
3. Here you can see the placement of the lower left jaw. I often start a jaw on the left side of a circle, making sure it aligns with both the horizontal and vertical centers.
4. Copy (Control-C), Paste (Control-V), and Reflect the left jaw to create the right side.
5. After making sure each component of the head aligns as you'd like, Unite all three shapes in the Pathfinder panel. Delete any extraneous anchor points with the Delete Anchor Point Tool (-).

Step 2

The ear is a fairly simple process. You'll need two of these for your final design (unless hair or additional design elements obscure them completely, in which case feel free to skip this step).

• Draw a circle with the Ellipse Tool.
• Use the Direct Selection Tool (A) to pull the lower anchor point downward.
• Angle the lower anchor point to the right.
• Manipulate the anchor point's handles so the shape is rounded and looks more like an ear.
• Copy, Paste, and Reflect the ear so you have two. Align them on either side of the head.

Step 3

Much like the head and ear, the eye also begins with a simple circle.

1. Draw a circle with the Ellipse Tool.
2. Use the Pen Tool to draw a sharp point at the lower left of the circle (on the diagonal) and follow the contour of the circle to the center. Note how these shapes look a bit like a bird's head or a raindrop shape rotated on its side.
3. Unite the two shapes in the Pathfinder panel.
4. Draw your character's lash line or eye lashes, or simply outline the eye shape, depending on what details you'd like to add.
5. Open the Gradient panel to recreate the Linear gradient seen below: dark purple (#2a0551) to white to dark purple again.
6. Apply the gradient to the white of the eyes (the raindrop-like shape).
7. Draw a smaller dark purple circle for the eye's iris and place it beneath the lash line shapes in the Layers panel.

Step 4

Let's add in some details to each eye.

1. Group (Control-G) together your eye components.
2. With the Pen Tool, draw a half-moon shape over the top half of the eye in dark purple (#2a0551).
3. Reduce the Opacity to 50% or less in the Transparency panel. Place it over the iris and white of the eye in the Layers panel.
4. Set the iris's fill color to your eye color of choice. Draw a smaller circle in the iris to form the eye's pupil. With the Pencil Tool draw some additional shapes in white to create shiny highlights (circles, stars, or hearts).
5. Add additional details like little scallops (drawn with the Pen Tool or Pencil Tool) in the outer corner or define the eyelashes.
6. Draw some cute eyebrows. I chose little hearts rather than a traditional brow design. Once again, I used the Pencil Tool.

Repeat these steps for the other eye (or Copy, Paste, Reflect, and adjust the position of the pupil and iris).

Step 5

For the nose, a few simple shapes defining the nostrils and shadows do the trick.

1. Start with teardrop-like shapes drawn for each nostril.
2. The sides of the nostrils, drawn with the Pen Tool, are like peach-colored (#ff786b) parentheses.
3. The shadow below the nose outlines both nostrils and the philtrum above the mouth. The Linear Gradient goes from a rosy peach (#ff786b) to light peach (#ffde9e).
4. The highlight shape (a messily drawn teardrop) goes from light cream (#fff7d4) to light peach (#ffde9e).

Step 6

Let's complete the head.

1. Set the fill color of the head to a Linear gradient that goes from #ffae85 to#ffde9e to #ffbc8c. The ears are set to light peach (#ffde9e).
2. I added a stroke to the head shape of #ffae85. Group together all of the head components. Copy and Paste the head and go to Expand under Object. Make sure only Stroke is selected and hit OK. Unite these copied components in the Pathfinder panel. Set the fill color to dark purple and Align it behind the original head in the Layers panel. Set the Stroke width to 1–2 pt in the Strokepanel.

2. Drawing a Cute Hairstyle

Step 1

Now that we've got the basic head of our character done, let's create her main hairstyle. Double-click the Blob Brush Tool (Shift-B) to bring up its options. Set the Fidelity slider to the right (though not all the way over). As we'll simply be sketching with it, set the size to 1 pt.

Step 2

Make sure your head components are Grouped together. This will allow you to keep your Layers panel organized.

1. Using the Blob Brush Tool, start sketching out the character's hair. I've opted for choppy bangs (fringe).
2. Continue drawing the hair. Think of the hair as being defined by large sections versus strands.
3. Once you've completed the front portion of hair, Group together your sketched components and trace the hairstyle with the Pen Tool.
4. Delete the sketch so you're left with a single object for the hair. Set the fill color to something bright and fun. I chose purple (#6f28ba).

Step 3

My little character has a ponytail. As such, we'll be drawing the following hair components behind the rest of the head.

1. Start with drawing a shape that denotes the hair being pulled behind the head into the elastic of the ponytail.
2. The shape of the hair at this point is up to you: is it straight, curly, braided, or tied into a bun?
3. Repeat what we did previously with tracing the sketch.
4. Outline the hair components by placing stroked copies of them behind the original shape (as we did for the head) in the Layers panel.

Step 4

Now let's render the hair.

1. Using the Pencil Tool or the Pen Tool, draw gradient filled sections of hair that define shadows. Note how these shapes curve in such a way that mimics the contour of the ponytail. The gradient goes from purple to dark purple.
2. Further define the shadows and sections of the hair.
3. Note how the bangs have a shadow shape for each separation and what side they're on.
4. Play with additional shadow or highlight shapes in order to give your character's hair some fun variations. I drew an inverted scallop shape on the ponytail.
5. Reduce the Opacity of your shadow shapes in the Transparency panel to your liking. Add highlights or additional colors to your main hair design if you see fit. 

Step 5

Now let's add a cute little bow.

1. Draw a lumpy heart shape with the Pencil Tool, making sure your path is closed.
2. Repeat on the other side. Don't forget to draw a connecting shape in the center of the bow. Unite your bow components in the Pathfinder panel and set the fill color to something bright, like the fuchsia (#f01e8c) seen below.
3. Outline your bow in the same fashion as we outlined the head and hair. Use the Blob Brush Tool in order to draw details on the bow.
4. Use the Pen Tool to add a couple of shadow shapes to the bow beneath the details drawn previously. Set the fill color to dark purple and its Opacity to 50%or less.
5. Group together your bow components and place the hair accessory on top of your character's head.

Step 6

Finally, Expand (Object > Expand...) the strokes of your character so the sticker base is forever scalable without having to change the stroke size later. We'll be using this icon as the basis for each character sticker within the rest of this tutorial. Make several copies of the design as it is now (six in total).

3. Current Status: Playing Games

Step 1

Now we begin the fun! Let's start with a sticker for all of those times you want someone to know you're playing a game (or want to play a game with them!).

1. Starting with the mouth, I've used the Blob Brush Tool to draw a line curving upward.
2. Draw another, smaller line curving downward.
3. Fill in the center of the two curving lines with dark purple and the Pen Tool.
4. Draw the bottom lip. Note how it's a bit flat on the bottom edge.
5. Fill in the shape with peach (#fe8c82).
6. Draw the top lip. Mine has no pronounced Cupid's Bow, though perhaps your design has a different shape to it.
7. Fill in the top lip with a bright rose color (#ff305a).
8. Draw in the teeth. Note how they follow the contour of the top lip and curve a bit on the bottom.
9. Set the fill color to the same gradient as was used for the white of the eyes.

Step 2

1. The hands are cartoony and simple, consisting of only three fingers. I drew mine with the Pencil Tool, not bothered about them being too detailed.
2. Outline the hands.
3. Draw a rounded rectangle in gray and outlined in dark purple for the game controller.
4. Use the Blob Brush Tool to draw a small cord for the controller.
5. Group your design together and give it a thicker overall outline in the same manner as was done with the head and hair previously. Make sure to Expandany strokes before creating your outline. Then draw a brightly colored circle with the Ellipse Tool and place it behind the rest of the design.

This completes your first sticker.

4. Current Status: Watching a Movie

Step 1

Pass the popcorn! Next up is a chat sticker perfect for denoting something entertaining or letting others know you're viewing a fantastic film.

1. Draw two rectangles over the eyes with the Rectangle Tool (M). Set the fill color of the left one to teal (#00d1c5) and the right one to fuchsia (#f01e8c).
2. Draw two larger white rectangles behind the first two. Use the Direct Selection Tool to pull the Live Corners inward in order to round them out a bit. You can also adjust the corners' radii in the Transform panel.
3. Draw a thin horizontal rectangle for the bridge of the glasses.
4. Unite the white rectangles in the Pathfinder panel. Outline the glasses by adding dark purple strokes to the white object as we outlined the head previously in this tutorial.
5. Duplicate the white frames of the glasses, and set the fill color to dark purple and the Opacity to 40% in the Transparency panel. Place this shadow shape behind the glasses in the Layers panel, off to the lower right slightly.
6. Finally, draw a couple curved shapes in each lens in white with their Blend Mode set to Overlay in the Transparency panel. Group all of your 3D glasses components together.

Step 2

Now that she's got her 3D glasses on, our little chat sticker friend needs some popcorn. Let's start by drawing a container for it!

1. Use the Ellipse Tool to draw a thin ellipse. Use the Rectangle Tool to draw a rectangle the same width as the ellipse.
2. Align the ellipse to the bottom of the rectangle (I manually aligned the bottom of the rectangle to the center of the ellipse). Unite these shapes in the Pathfinder panel and clean up any extraneous anchor points.
3. Using the Direct Selection Tool, angle the bottom of the object inward. Repeat on the other side.
4. Use the Anchor Point Tool (Shift-C) to manipulate the handles of the top edge of the object so it curves downward slightly.
5. Draw white stripes over the shape, following its contour. Group these components together.
6. Copy and Paste two copies of the red base shape. The first copy will be set to a linear gradient that goes from dark purple at 100% to 0% to 100% with the opaque colors on the edges of the shape. Place this shape over the others. The second copy's fill color is set to dark purple with a stroke of 1–2 pt and set behind the other popcorn container shapes.
7. Group together your objects and adjust the overall shape as wanted.

Step 3

The popcorn will be made into a simple custom brush. Draw a puffy popcorn shape in light yellow with the Pencil Tool. Outline the shape and make sure to Expandyour strokes. In the Brushes panel, go to New Brush > Scatter Brush. Set the Rotation to Random and play with its angle as much as you need. Test out the brush with the Paintbrush Tool (B).

Step 4

1. The mouth on this sticker was created entirely with the Blob Brush Tool. Start with two curved lines for the puffy cheeks.
2. Set the cheek outline color to peach, the lips to rosy red, and the mouth opening to dark purple. Note the direction of each shape's curve.
3. Fill in the lips with peach and add highlight colors (light peach, cream, or white) as you see fit.

Step 5

Let's put it all together! Use the custom popcorn brush you made to draw a couple of squiggly lines of popcorn behind the popcorn box. Copy and Paste one of the hands from the previous sticker design so it looks as if she's chomping on the popcorn.

When you're satisfied with the placement of the popcorn brush, Expand the brush strokes and use the Magic Wand Tool (Y) to select the transparent boxes around the brush components to delete them. Give the final sticker design a thick outline to finish it.

5. Current Status: Sleeping

Step 1

For the sleeping status we begin again with the base head created earlier in this tutorial.

1. Using the Blob Brush Tool, I sketched out the basic look of the closed eye, which covers most of the current eye.
2. Trace the closed eye sketch with the Pen Tool on both sides. Set the fill color to peach. Draw thin, outline-like shapes that curve over the closed eye.
3. Set these shapes to the same rosy peach as used on the nose.
4. Redraw or adjust the eyelash shapes and place the newly drawn eye components under the hair in the Layers panel.

Step 2

1. Delete the ponytail from your design.
2. With the Pen Tool draw a top of a hat (it looks a bit like a beret at this point).
3. Behind the head, draw a cute curving shape. This forms the sleeping cap. It looks a bit like a ponytail. If it helps, sketch it out first before drawing with the Pen Tool.
4. Outline the top of the cap.
5. Outline the bottom of the cap.

Step 3

Use the Star Tool to draw a yellow (#ffbc04) star. Adjust the corner radii by pulling in the live corners with the Direct Selection Tool. In the Pattern Options panel create a New Pattern, setting the H Space and V Space to 5 px, and the Tile Typeto Brick by Column.

Step 4

Copy and Paste the main sleeping cap pieces and apply the star pattern to them. Draw a yellow circle for the pompom on the end of the sleeping cap.

Step 5

1. Draw a puffy pillow shape behind the sleeping head. Draw a simple closed mouth with the Pen Tool.
2. Set the fill color to white and the stroke color to dark purple.
3. Draw a cute teal shape (a bit like a curving teardrop) on the right side of the pillow. Add white or lighter teal stripes if you wish.

Step 6

Give your final sleepy sticker design a thicker outline as has been done previously. Don't forget to Expand any strokes before doing so. Additionally, you can draw little messages with the Blob Brush Tool or use a cute font with the Text Tool.

6. Current Status: In a Silly Mood

Step 1

Let's get weird. Copy and Paste the fuchsia bow. Reflect it over a vertical axis and place it on the right side of the head. Copy, Paste, and Reflect the ponytail so that the character has two pigtails. Rotate them around as you see fit.

Step 2

1. To draw smiling eyes, draw a half circle overlapping the lower half of the eye in light peach.
2. Draw a dark purple line outlining the top half of the half circle.
3. Repeat on the other side.

Step 3

1. Use the drawing tool of your choice to draw a smiley, pointed mouth.
2. Don't forget to add an upper and lower lip. I found it easiest to do so with the Blob Brush Tool.
3. Draw a small, three-fingered hand.
4. Make sure it overlaps the character's mouth a bit. Outline it and define the fingers slightly with dark purple lines. Apply the same linear gradient as was used on the head.

Step 4

1. Use the Blob Brush Tool, or a font you enjoy, to repeatedly draw lines of letters in whatever onomatopoeia your language may use for laughter.
2. Group together your laughing letters and draw a circle overlapping them.
3. With both the group and circle selected, Make a Clipping Mask (Control-7). 

Step 5

Place the clipping mask group behind the sticker design to finish it off.

7. Current Status: Listening to Music

Step 1

Let's create a simple set of headphones by embellishing a gray half circle.

1. Draw a circle and a rectangle. Let the rectangle overlap the circle slightly and hit Minus Front in the Pathfinder panel.
2. Overlap part of the right side of the newly cut circle with a pink rectangle.
3. Use the Shape Builder Tool (Shift-M) to select the non-intersecting component of the rectangle. Deselect and delete it.
4. Draw several rectangles over the pink shape to create stripes.
5. Delete them from the pink shape with the Shape Builder Tool.
6. Draw a star with the Star Tool over the left half of the headphone.
7. Use the Shape Builder Tool to delete it from the half circle. Change the stripes' colors to fuchsia and the pink shape to dark fuchsia.
8. Draw shadow and highlight shapes in a manner similar to what was done with the hair. Use Linear gradients of dark purple and light yellow for each. Use the Shape Builder Tool to delete extraneous portions of these shapes from the gray half circle.
9. Give the headphone a dark purple outline and group all of the components together.

Step 2

1. Copy and Paste the headphone group so you have one for either side of the character's head. Place them beneath the front portion of her hair in the Layers panel.
2. Draw a fuchsia shape on the top of her head to denote the band of the headphones.
3. Draw little teal music notes, hearts, and sparkles coming out of the right side of the headphones. Use the same mouth from one of the previous chat stickers, or draw a new one.

Step 3

Finally, give the entire design a thicker outline.

8. Current Status: Belting Out a Diva Number

Let's change up the final design by drawing a tiny, doll-like body for it.

Sketch over the design using the drawing tool of your choice. Denote the basic body shape in a simple gesture drawing as well as any props being held. This one has a simple wide stance with a microphone in one hand. Group together all sketch components.

Step 2

1. Draw a gray circle over the end of the microphone.
2. Using the Blob Brush Tool, I drew the top lip, curving in a half circle.
3. Draw the bottom lip and the inside of the mouth. I also used the same closed eye components from the sleeping chat sticker design created previously.

Step 3

The dress is a series of angles.

1. Start with the outline, drawing two peaks for the neck line, following the curve of the hips, and connecting at an asymmetrical angle.
2. Fill in the design with fuchsia.
3. Draw two little pointed legs coming out of the bottom of the dress.
4. Keep the neck a simple rectangle while the chest, at this point, is a triangle with a couple of curving lines denoting the character's bust.
5. You can hide the sketch in the Layers panel at this point.

Step 4

Use either the Ellipse Tool or one of the brush tools to draw a series of white dots in varying sizes all over the dress.

1. Group the dots together and set their Blend Mode to Overlay in theTransparency panel.
2. Layer additional dots over the others with varying Opacities and Blend Modesso the dress looks sparkly.
3. Group together the sparkle components, Copy and Paste the dress, and Create a Clipping Mask so the sparkles stay within the dress's boundaries.

Step 5

1. Outline the dress and body. Make sure, when creating a duplicate shape for the outline, that you've deleted the clipping mask in the copied shape.
2. Place the body beneath the head. Add tiny shoes if you wish and create a slightly more detailed microphone in the style of your choosing.
3. For additional sparkles, draw circles with the Ellipse Tool all over the design. Group them together and go to Effect > Transform & Distort > Pucker & Bloat and enter -78% into the slider. Expand your sparkles. 

Fantastic Job, You're Done!

Well done you! What other activities, moods, emotions, and silliness can you create in a chat sticker set? Kick the challenge up a notch and create a self portrait set of chat stickers. Share your creations in the comment section below. 

For similar tutorials like this one, check out these:

• How to Draw a Doll Base Body for a Dress-Up Game in Illustrator
• How to Create a Beautiful Set of Zodiac Portraits in Illustrator - Part One
• How to Create a Beautiful Set of Zodiac Portraits in Illustrator - Part Two
• How to Create Stylish Flat Space Icons in Adobe Photoshop