How to Create a Chibi Lollipop and Lullaby Munchkin in Adobe Illustrator

Represent the Lollipop Guild and the Lullaby League with this cute illustration tutorial. We'll work together with a sketch, build up solid shapes, create line art, render our illustration, and create a simple background worthy of Oz itself. Journey over the rainbow for this super-cute chibi-style tutorial!

1. Start at the Top

Step 1

Let's start with the provided sketch, which you can download at the link to the right. I've opened it up in Adobe Illustrator CC and placed it on its own layer. It'll be used as a guideline for the rest of this tutorial. Alternatively, you can design your own characters and follow along with the techniques and steps outlined below to create a different, personalized design.

Step 2

Let's start with the Lullaby League girl's head!

1. On a New Layer, use the Ellipse Tool (L) to draw a circle in the skin tone of your choice.
2. Use the Direct Selection Tool (A) to pull down the bottom anchor point to form the chin.
3. Add two new anchor points in the lower half of the ellipse to form the jaw.
4. Adjust the handles of the anchor points as you see fit to give your character's head a cute but recognizable shape, as seen below.

Step 3

Let's draw some quick and easy ears and create outlines for the ears and head.

1. Draw an ellipse, as you did with the head.
2. Pull the bottom anchor point downward, more than was done with the head. Copy (Control-C) and Paste (Control-V) the ear.
3. Rotate (R) the ellipse to the left for the left ear and to the right for the right ear. Place each ear behind the head shape in the Layers panel.

For the outlines, either add dark brown strokes to each shape or Copy and Paste each shape and Align their corresponding object above them in the Layers panel.

Step 4

Let's focus a bit on the arms. Use the Pen Tool (P) or the Pencil Tool (N) (whichever you're more comfortable using) and trace each arm.

1. Since this character's arms are outstretched, I drew from the shoulder to the wrist as one shape.
2. The second shape, drawn with the Pencil Tool, was the hand. It's up to you whether your character has four fingers or five.
3. Copy, Paste, and Reflect the left arm to create the right arm. Group (Control-G) each arm's components together.

2. Draw the Dress

Step 1

I reduced the Opacity of the entire sketch layer in the Layers panel to about 40% or so. This makes it easier for me to trace my original sketch.

1. Using the Pencil Tool with Smoothing set to the middle or so, trace the ruffled collar of the dress.
2. Complete the shape, set the fill color to pink, and place it beneath the head but above the arms.

Step 2

I took the other dress parts in steps, all traced from the original sketch.

1. As we did above, the collar is below the head but above the arms.
2. The bodice of the dress is under the collar, but above the arms.
3. The top skirt is above the bodice but below the collar.
4. The bottom skirt is beneath the top skirt.

We'll better define these dress components in the next few steps.

Step 3

The ruffled side bits should be broken down into sections: top portions and undersides.

1. I drew a dark-pink shape and placed it beneath the skirt (as seen in the sketch itself). Starting with the top part of the side ruffle, I drew a shape that stopped at the first fold.
2. Repeat this process of drawing each shape up to where it stops at the fold, and use dark pink to indicate parts of the folded fabric that go beneath each ruffle.

Step 4

If you'd rather have a more symmetrical dress, you can do the following:

1. I deleted the right half of the skirt. You can do so by deleting nodes or placing another shape over each skirt component and hitting Minus Front in the Pathfinder panel. Group the left side together (do not include the collar and bodice).
2. Copy, Paste, and Reflect the group horizontally to create the right side. Align the group to the top edge of the left side.

Group together your dress parts for now and we'll get on to the legs.

3. Draw the Legs and Shoes

Step 1

1. Like many of the other components, trace the leg with the Pen Tool.
2. I did so in full and will draw the ballet shoe on top of it.

Step 2

For the shoe, I drew a large shape over the foot with the Pencil Tool.

1. I then selected the part of the pink blob that didn't intersect with the leg object with the Shape Builder Tool (Shift-M) and deleted it.
2. The ribbons of the ballet shoe were drawn with the Blob Brush Tool (Shift-B). You can draw them with whatever drawing tool you prefer, of course.

Group together all of your leg components.

Step 3

Copy, Paste, and Reflect the leg we drew in the previous step. Place it behind the first and place both legs beneath the dress components. I gave the arm group an outline as well by Uniting each arm's components and then Copying and Pasting the arms to create the outlines.

Step 4

The hair and the hat are more of the same: trace components of the design (hide the head so you can see the hair more easily and repeat with the hat).

1. For the hair, I decided to take it in sections: seven of them in total.
2. Each shape has a corresponding outline shape as well. I layered my objects in the following manner: outline, corresponding shape, next outline, next corresponding shape, etc.

Group together your hair components. 

Step 5

Let's take a look at the full body design and each of its sections. I Grouped together each of these seven sections, which are made up of the following components:

1. The hat is made up of three pieces: brim, hat, and ruffle at the top.
2. The hair is made up of seven pieces which we created in the previous step.
3. The head is made up of two ears and one head.
4. The arms are just the two arms.
5. The top of the dress is made up of the collar, and the bodice and top of the skirt have been United in the Pathfinder panel.
6. The bottom section of the skirt is comprised of two pink objects and six dark-pink sections.
7. And finally, the legs are two legs and four shoe components (each leg's ribbons were United in the Pathfinder panel).

Each section is layered in the order seen above within the Layers panel.

4. Detail the Head

Step 1

Since I'm using a pressure-sensitive graphic tablet, I'm prone to creating line art with the Blob Brush Tool. My settings for the tool are seen below: Smooth with Pressure Enabled at 6 pt in size. 

You are welcome to use the drawing tool of your choice and either trace the line art from the sketch, or create thick and thin lines with stroked paths and the Width Tool.

Step 2

I locked my body components layer for now and am working on a New Layer for line art. As we complete each section, I'll Group the line work together, place it within the main art layer we worked in previously, and then go back to the line art layer.

I placed the sketch layer above my body layer and set the Blending Mode to Multiply for the whole layer in the Transparency panel. Make sure the only unlocked layer is the line art layer while you work on creating line art.

You can see my layer order in the panel below.

Step 3

In the line art layer, begin to either trace the curls of the hair or draw your own.

1. Thicker lines belong on the outside of the hair and to define each hair section.
2. Work through each section one at a time.
3. I followed the contour of the bumpy curl shapes I created previously to add thin lines within the hair.
4. Group together all of your hair line art. Unlock the body layer and place the hair line art above the hair group.

Step 4

Let's take a look at my line art process in action. Working on the hat in the line art layer, I started with the thicker outline and then drew thin, curved lines in order to show how ruffled the brim of the hat is. Once again, Group together your hat line art and place the group above the hat group in the body layer.

Step 5

I kept the hat and hair visible in the body layer while I worked on the face. I outlined the head and ears again, giving the ears a bit more detail, and then set to work on the face itself, starting with the right eye.

Step 6

1. I filled in the eyes and drew some thick top lashes.
2. The mouth is a giant, open smile.
3. I drew the tongue with the Pencil Tool, allowing it to be a simply blob shape.
4. The teeth and the brown in the eyes were drawn on top of the other shapes, tracing the sketch layer with the Pen Tool and filling them in with their corresponding colors (white and brown respectively).

The nose is a single dot, and the eye's highlights are white hearts and circles. Group everything together and place it below the hair but above the head in the Layers panel.

5. Detail the Body

Step 1

1. Starting with the collar of the dress, I drew the bow in four pieces (two for the bow and two for the tails) and United them. 
2. Then, I outlined the bow, drew a couple details on it, and drew lines for pleats in the collar.

Place the bow components over the collar pleats. The pleats will go above the collar in the Layers panel, and the bow will go below the head.

Step 2

Working on the top of the dress, we want to define the folds and pleats in the dress itself.

1. The collar was very, very pleated. The folds extend from top to bottom within the shape.
2. The dress pleats are a bit different. Some start at the waist and head all the way down to the bottom of the skirt.
3. Others start at the bottom of the skirt and stop around the center of the skirt itself.

Vary the pleat styles for each section of the skirt, Group together your line art, and place it above the skirt group but below the collar group in the Layers panel.

Step 3

For the bottom of the skirt, consider the sections defined in the sketch:

1. Some folds fold over cleanly.
2. Other folds in the skirt show their underside. These were defined with dark pink shapes.

Each section has two or three fold lines in them. Place this group of line work below the first skirt group but above the second.

Step 4

The ribbons on the shoes are folded and wrapped around the legs. Some of the lines on the ribbons travel across them entirely, while others stop in the middle.

The shoe itself just needs a line to separate it from the leg and another to show the seam at the opening.

Step 5

Let's take a look at my completed line art. I added a couple of details to each arm as well as defining the toe edge of the ballet shoes. Each line art group sits above its corresponding body section in the Layers section.

6. Render With Gradients

Step 1

Let's take a look at the general styles of gradients I'll be using to render the lullaby character. 

All of the gradients go from 100% to 0% Opacity.

• For shadows, gradients are Linear with Blending Modes set to Multiply. Colors are a darker hue than the one they're overlapping.
• Blush is a Radial gradient also set to Multiply. Since it's blush, its color is pink.
• Highlight shapes are either Radial or Linear, depending on what works best (on the face I chose radial gradients for highlights and on clothes I used mostly Linear gradients) with the Blending Mode set to Screen.

I also played with the Opacity of the shapes themselves, depending on how dark or light I wanted a shape to be.

Step 2

Like the line art, each gradient section is worked on in its own layer and then placed within the main body layer, beneath the line art but above the body shapes.

For the face, I drew—with the Pen Tool and Pencil Tool, depending on the control I wanted to have—shadow shapes to help define the cast shadow from the hair. These shapes follow the contour of the hair itself.

I drew ovals for the blush under the eyes, on the cheeks. There is a small ellipse below the nose with a shadow gradient (tan to light tan) and there are highlight shapes drawn on top of the nose and chin (Radial gradients set to Screen).

Step 3

I drew shadows on each hair section, defining cast shadows from each overlapping section as well as some of the curls in the hair. The gradients are Linear and go from dark yellow to the yellow of the hair itself. Group together shadow components.

The highlights were drawn on each curl with Radial gradients set to Screen. You can either use light yellow or the same yellow used for the hair. Group together your highlight shapes. 

Place both groups above the hair but below the hair's line art in the Layers panel.

Step 4

The shadows on the body and clothes are fairly simple: they define cast shadows (like those on the arms) and folds (like those on the dress).

Work through each section creating groups of shadows and groups of highlights. Body shadows and highlights are hues of tan and peach (for my design) and the dress has various hues of pink. Take note of the direction of each gradient shape below. Use the Gradient Tool (G) to adjust your gradients' angles and radii, depending on the style of gradient you've created.

Step 5

Let's take a look at my gradient groups without the character's body.

1. The hair shows how the shadow shapes follow the contour of each hair section as well as some additional curls. The highlights show up as yellow versus light yellow when on white, so you can easily see them. Note how they stretch across the larger portions of each curl.
2. The face has shadow shapes behind the eyes, under the hair, on the ears, beneath the nose, and beneath the mouth. Blush appears on both cheeks and highlights appear on the nose and chin.
3. The top of the dress has shadow shapes that define the folds and pleats in the skirt as well as the cast shadow from the collar. Darker colors are closer to folds and objects that overlap. Highlights will be placed in the centers of folds to show the different in levels within the fabric.

Step 6

There isn't a ton of rendering to be done on this design. I added both shadows and highlights to the hat, showing how ruffly the top and brim are, as well as the curving shape of the hat itself. Layering transparent gradients is a great way to render an item quickly within an illustration.

The lower skirt shapes have more shadows on them since they're beneath the rest of the dress. Additionally, the legs have cast shadows from the dress and the shoes have stronger highlights than the other items, since ballet shoes tend to be made of satin.

Group together each of your gradient sections and place them above their body components and below their line art groups within the Layers panel.

7. Draw the Lollipop Guild Boy

Step 1

This process is a bit quicker, since we've done it previously. I'll be speeding up the tutorial, making note of alternate techniques, in order to complete the second character in fewer steps.

1. Copy and Paste the head from the Lullaby League girl.
2. Using the Direct Selection Tool, adjust the anchors and anchor handles to fit the head shape of the second character.
3. Alternatively, you can redraw the head, but I find it easiest to move the jaw and side of the head for a 3/4 view.

Step 2

The arms of this character benefit from being done in three pieces versus just two.

1. Firstly there are the hands drawn to the elbow. You can either draw them in one go or draw each hand and then the forearm, Uniting them in the Pathfinder panel after.
2. Give each section an outline (either adding a dark brown stroke to the objects or Copying and Pasting the objects and placing the stroked paths above the original object).

Step 3

Not every part of the arms shows in this design. Part of the character's right arm is covered by the giant lollipop stick and most of the body is covered by clothes.

1. I drew the shirt sleeves and shirt's body as three separate components with the Pen Tool and then United them.
2. The collar is comprised of two shapes, and the buttons are two circles as well. The shorts are a separate shape all their own too. 

For this character, I opted to create the initial outlines by simply adding a stroke to the filled object in the Stroke panel with Caps and Corners set to Rounded.

Step 4

Like the character before this one, the body is broken down into a variety of sections:

• Hair
• Head
• Lollipop Stick
• Arms
• Shirt
• Shorts
• Legs

To make sure the hand overlapped the lollipop stick, an additional hand shape was drawn over the stick, matching the first that is set in the group well below it.

8. Draw the Lollipop Guild Line Art

Step 1

Let's start up with the hair. Once again, you can follow along with the curls drawn in the sketch, or create your own. There are fewer sections (only three), so there's less to create this time around.

The hair curls up in the center and at the sides. Note the shorter lines drawn on the large section to the right, which shows the structure of the hair.

Step 2

The face is fairly simple as well. I'm using the Blob Brush Tool to draw all of these details, but you can use whatever drawing tool serves you best.

1. The eyes are kidney-like shapes with large half circles in the upper right corners.
2. The eyebrows are large check-mark shapes, and the mouth is a silly curve.
3. The blush is a pink scribble beneath the eyes.
4. Group together all of your face components and place them above the head in the Layers panel.

Step 3

Let's check out some of the clothing details:

1. The shirt has a couple lines drawn on the collar, details on the buttons, and some curves in the scallops of the shirt. You are welcome to draw the shirt's pattern and place it below the line art or keep your shirt a solid color.
2. The pants and socks have stitch-like details added to the right sides of each.

Step 4

Here's a quick shot of most of the line art isolated. I found it easiest to complete it all in one go and group it together so that when I created my gradient shapes they would go beneath the line art. You can use whichever technique for creating and ordering your line art within your Layers panel you like best.

Step 5

Here's a shot of the completed line art and completed body design with the sketch layer hidden. As you can see, I've added more details to the lollipop itself, including some sparkly stars, and some additional details on the shoes. From here, we're ready for this character's brief gradient section.

9. Render the Lollipop Guild Boy

Step 1

Focusing on the face first, I want to make sure the bald portion of the head is shiny with a highlight shape, and the hair is still casting a shadow on the right side of the face. The cheeks, nose, and chin are highlighted as well. Group your shadow and highlights from the face together and place them beneath the hair group and above the head group.

Step 2

Looking at the hair, notice how the highlights keep the hair looking shiny, as though this character smoothed it down and sculpted the curls with pomade. The shadows create depth between each section that's been defined by the line art.

Step 3

For the body, the shadows aren't as strong as the fold-filled dress worn by the Lullaby League girl.

1. Focus on the cast shadows from the head, collar, lollipop, and each section of clothing.
2. Emphasize the edges of the clothing, which is rougher in style than that of the ballerina, with shadow gradient shapes (note the sleeves).
3. The shadows and highlights on the shorts are brighter than the shirt. They're also grouped together and placed below the shirt components in the Layers panel.
4. The highlights on the shirt are mainly on the shoulder and chest portion of the shirt. If I placed a highlight on each scallop, it'd look more folded, which this design is not.

Continue with the shoes and legs, rendering it in the same manner as done with the character before this one.

10. Create the Background

Step 1

Each character is on its own locked layer. I've hidden the sketch layer and am working on a background layer beneath the two characters. Draw a large blue circle with the Ellipse Tool and four horizontal lines of varying lengths drawn with the Line Segment Tool (/).

Step 2

Draw several short, vertical lines between the horizontal ones to create bricks. Group the brick lines together and lock them in the Layers panel. Lock the blue background circle too.

Using the Pencil Tool or the Blob Brush Tool, draw a large, scribbly shape to create the base for the gold bricks.

Step 3

1. For sparkles, I used the Blob Brush Tool to draw circles, dots, and sparkle shapes in light yellow.
2. Next I layered some white sparkles above the light yellow ones.
3. Then, I used a medium yellow to complete the shiny, sparkling look of the bricks and Grouped all of these shapes together by selecting the entire section with the Selection Tool (V).

Place the sparkle group below the brick line art and unlock the other background components.

Step 4

To create a quick rainbow, draw six identical rectangles and set their colors to some version of a rainbow. Group the rectangles together and go to Effect > Warp > Arc with the following attributes:

• Horizontal
• Bend: 86%

Under Object, hit Expand Appearance.

Step 5

Rotate the rainbow and place it in the background of your design. I've hidden the characters for now so you can easily see my rainbow's placement.

Step 6

With your preferred drawing tool, draw a couple of white clouds on either side of your design.

Step 7

Draw circles, blobs, or half circles to create a series of green hills behind your characters. Add some little brown 'v's to create birds flying in the distance.

Step 8

Group together the blue circle, rainbow, birds, clouds, and hills. Copy and Paste the circle from the group and place it over the background group. Select both and Create a Clipping Mask (Control-7). Place the clipping group beneath the brick road components in the background layer.

Share Your Completed Design

Add some finishing touches of background line art and sparkles, or even go further and render your background with gradient shapes. Share your result from this tutorial or an illustration using the techniques of this tutorial in the comment section below!