How to Create a Beauty-Inspired Illustration in Adobe Illustrator

What can be more fun than helping Frenchy learn hair and makeup skills? In this tutorial we'll create icon assets and a cute portrait bust illustration perfect for a spa and makeup mobile app inspired by one of the cutest characters from Grease!

We'll build each asset with the help of a provided sketch and learn to render colorful designs quickly in Adobe Illustrator CC. Then, we'll create the final portrait and bring the design together in a completed illustration. As always, you can punch up your design with additional vector assets from Envato Market to make something unique. If you'd like to speed your process up, you can purchase makeup icons or a portrait base from the market while following this tutorial.

1. Make Some Cute Hair Accessories

Step 1

Let's start by preparing our document. Create a New Document in Adobe Illustrator CC and import the sketch seen below, which you can download to the right of this tutorial. My final design size was around 8 inches by 10 inches, though you are welcome to work with whatever size suits your design needs.

Additionally, you're welcome to sketch out your own design and use this tutorial as a technique guide. Lock the sketch object in your Layers panel and let's get creating!

Step 2

Starting with the cute purple comb icon, draw two overlapping rectangles with the Rectangle Tool (M). I've set the fill color to purple and the stroke color to null. Then, I selected each corner of the rectangles with the Direct Selection Tool (A) and pulled their Live Corners toward the center to round the corners out to my liking. You can see that result below!

Step 3

Unite the two rounded rectangles in the Pathfinder panel. Draw seven identical rectangles with the Rectangle Tool and overlap the comb with them. Unite the seven rectangles and hit Back Minus Front in the Pathfinder panel. Then, select the comb with the Direct Selection Tool and manipulate the Live Corners so the comb has rounded edges like the one shown below.

Step 4

Add a thick stroke in a dark color to your comb object. I chose brown. Dark purples or magentas look fantastic as well. Apply simple linear gradients to overlapping rectangles. My gradient goes from purple at 100% to 0% Opacity. Adjust the Opacity of a gradient in the Gradient panel.

Use the Shape Builder Tool(Shift-M) to delete overlapping shapes from each other. Select the gradient rectangle and the comb, then select the non-overlapping shape with the Shape Builder Tool. Finally, deselect and delete the extraneous shape. It's a simple technique I use often for rendering objects like this. Group (Control-G) all of your comb components together.

Step 5

To create that adorable heart on the comb (and several hearts throughout this tutorial), let's use the following technique:

1. Draw a circle with the Ellipse Tool (L).
2. Hold down Alt and drag the circle to Duplicate it. Place them side by side, slightly overlapping.
3. Unite the circles in the Pathfinder panel.
4. Delete the three bottom anchor points with the Delete Anchor Point Tool (-).
5. Add a new anchor point to the center of the bottom edge and pull it downward with the Direct Selection Tool.
6. Convert the bottom anchor point to a sharp point and adjust the handles of the side anchor points so the heart's sides are nice and rounded.

Now that you've made a fantastically perfect heart you can Copy (Control-C) and Paste (Control-V) it every time you need a heart within this design!

Step 6

The final hair accessory is the bobby pin! I've used my sketch as a guide to draw a wiggly pin shape with the Pencil Tool (N). Set the Caps and Corners to Rounded in the Stroke panel. With the Width Tool (Shift-W), adjust the width of the top edge of the bobby pin so it has a larger, bulbous end.

Convert the stroke to an object by going to Object > Expand, and give the bobby pin a stroke matching its fill color of 1-2 pt with Rounded Caps and Corners.

Alternatively you can draw the bobby pin with the Blob Brush Tool (Shift-B) with pressure enabled to get the variation seen below.

2. Create a Cute Makeup Set, Part One

Step 1

There's a lot of makeup in this design, so let's get going on the first half of the full set! To start, we have the cute little eyeshadow applicator:

1. Draw a long, thin rectangle. Overlap it with a short and thick rectangle.
2. Round out the corners of both shapes by manipulating their Live Corners.
3. Apply a Radial Gradient to the applicator tip that goes from light pink to white to show that it's been used to apply makeup. Adjust the gradient's placement with the Gradient Tool (G).

Add a thick outline outside of the object by Copying and Pasting the applicator design, Uniting it in the Pathfinder panel, and Aligning it behind the original applicator. Group your applicator components together.

Step 2

Next we have the eyeshadow compact!

1. Draw two rectangles: one white and one blue.
2. Optionally, you can draw a smaller rectangle within the blue one to show an indentation on the lid.
3. Round out the outer corners of the rectangles and draw two small rectangles between them to create a hinge for the compact.

Step 3

Now it's time to fill up the compact! Draw rounded rectangles for each eyeshadow pan and add a color-coordinated heart, drawn earlier, to each. For the reflections on the compact lid, draw three diagonal rectangles with the Pen Tool (P) and apply a linear gradient to each going from white at 100% to 0% Opacity.

Use the Shape Builder Tool to delete the extraneous portion of the shapes from the rounded rectangle lid. Select and Group all of your eyeshadow components together to complete the icon.

Step 4

We'll need some blush with that eyeshadow! 

1. Draw two golden yellow circles with the Ellipse Tool.
2. Offset the circles' paths by going to Object > Path > Offset Path. I've entered in -0.1389 inches in order to get two perfect inner circles. Your offset amount will vary depending on the size of your original circles. Hit Preview to help you decide what size to make your circles, and hit OK when satisfied.
3. Draw a small rectangle overlapping the circles to create the hinge.

Step 5

Now let's complete the compact:

1. Set the fill colors of the inner circles to blue and pink. Add a cute heart in the center of the pink circle.
2. Draw darker yellow rectangles on either side of the hinge shape to add a small shadow. The highlights on the mirror are made the same way as the highlights on the eyeshadow compact lid.
3. For the shiny metallic bits of the compact, draw several orange and yellow diagonal rectangles and delete them from the compact circles using the Shape Builder Tool. Place them under the smaller circles in the Layers panel.
4. Draw highlights on the hinge that match the colors from the rest of the golden compact. Group everything together to complete the compact. 

Step 6

Next, let's create a mascara wand:

1. Draw a small ellipse to form the bottom of the mascara wand.
2. Draw a rectangle that matches the ellipse's width.
3. Unite the rectangle and the ellipse in the Pathfinder panel. Draw a long rectangle to form the length of the wand itself.
4. Place the long rectangle behind the purple object. Apply a Linear Gradient that goes from dark purple to light purple and back to dark purple to keep the wand cap from looking flat. Draw a bubbly, fluffy object with the Pencil Tool to form the mascara wand's spoolie-like end.

Step 7

To round out the first part of our makeup icon creation section, we'll create a fluffy powder puff:

1. Draw two identical ellipses.
2. Draw a rectangle between the two ellipses.
3. Copy and Paste the top ellipse to create the top edge. Unite the other three shapes to create a disc object.
4. Draw a half circle whose bottom edge is slightly flattened out with the Pen Tool. Copy, Paste and Scale the shape down and delete it from the half circle to create a handle.
5. Place the handle shape beneath the disc object in the Layer panel.

Step 8

Now we need the powder puff itself:

1. Draw a fluffy cloud shape with the Pencil Tool and set the fill color to a light cream.
2. Use the Pencil Tool to draw some scallop shapes within the cloud puff to further accentuate how fluffy it is. Add a thicker outline to the entire object by Copying, Pasting and uniting the copy in the Pathfinder panel. Set the stroke weight to 2-4 pt, or so, and Align it behind the main powder-puff object.
3. Draw hearts, stars, dots, and sparkles on the puff.
4. Add a Linear Gradient to the puff base that varies between dark, medium, and light blues.

3. Create a Cute Makeup Set, Part Two

Step 1

To start our second makeup section, we'll work on creating a cute lipstick.

1. Draw a rectangle and fill it with a Linear Gradient much like the mascara wand has.
2. Draw a smaller, horizontal rectangle to overlap the first.
3. Draw an ellipse that matches the width of the bottom rectangle and Unite the two shapes in the Pathfinder panel. This rounds out the lipstick's container and makes it look less flat.
4. Draw another ellipse at the top of the lipstick container. Group these components together.

Step 2

Let's create the lipstick itself:

1. Draw a small ellipse in the top of the lipstick base.
2. Draw a rectangle that matches the ellipse's width. Draw a second ellipse and Rotate it so it cuts across the top of the ellipse on the diagonal.
3. Unite the bottom ellipse and the rectangle in the Pathfinder panel. Use the Shape Builder Tool to delete the upper left corner of the rectangle by selecting the diagonal ellipse and the rectangle, selecting the corner, deselecting, and then deleting the extraneous corner shape.
4. Select the top right corner with the Direct Selection Tool and pull the Live Corner toward to center to round off and complete the lipstick.
5. Set the top ellipse to a darker pink than the lipstick itself.

Step 3

Before we complete the lipstick, let's create a fun sparkling design behind it! Draw a bright yellow circle with the Ellipse Tool. Go to Effects > Distort & Transform > Zip & Zag and enter in either the following attributes or similar ones:

• Size: 0.08 inches
• Absolute
• Ridges per Segment: 5
• Points: Corner

Step 4

Place the Zig & Zagged circle behind the lipstick and add an outline with the thickness of your choice. Additionally, you can draw a highlight shape in the center of the lipstick if you wish.

To complete the lipstick, draw a series of white circles along the base to create cute little pearls on the lipstick container. Group everything together once you're satisfied with your design.

Step 5

Our final icon design is the little container of face cream.

1. Draw two identical ellipses, just like we did for the powder puff base.
2. Also like we did for the powder puff base, Copy and Paste the top ellipse and then Unite the other three shapes in order to create the full cap shape. Begin the container shape with a small cream-colored ellipse.
3. Using the Pen Tool, draw one half of the container design. Note how three sides are straight lines and the left side is curved.
4. Copy, Paste, and Reflect the left half of the container and Align it to the horizontal center of the left to create the right side. 
5. Unite all three cream-colored objects together in the Pathfinder panel.

Step 6

Next we'll need to draw a rose. I used the Blob Brush Tool without pressure settings, but you are welcome to use whatever drawing tool you enjoy most.

Start with a rounded triangle and build petals around each side. Continue adding petals, rounded and pointy ones, between the last ring of Petals in order to draw a larger and larger flower. Note how the larger petals have points, dips, and curves in them. In total I drew six rounds of petals.

Group everything together and let's complete the face cream container.

Step 7

Draw a large pink shape beneath the rose group to fill it in. You can add tiny red and light pink shapes around the rose to shade and highlight it too. Place the rose in the center of the face-cream container.

Add shadow and highlight shapes to the face cream itself. I also added a thicker outline to the larger shape group to complete it and then Grouped everything together.

4. Draw the Portrait Base

Step 1

We're going to take a break from working with the cute makeup icons to create the portrait of Frenchy, the cutest character from Grease. Create a New Layer in the Layers panel so your document is organized and you can focus on creating a portrait. Let's start with the head:

• Draw a circle.
• Pull the lower anchor point downward to create a head-like shape.
• Add two anchor points on either side of the jar and adjust the chin so it's more like the head shape below!

Step 2

Beneath your head shape, use the Pen Tool to start drawing the left half of the neck, shoulders, and bust. Copy, Paste, and Reflect the left half of the body to form the right side. You may need to adjust the center anchor points so the two objects overlap a bit more. Once satisfied with their placement, Unite the two objects in the Pathfinder panel.

5. Create a Lovely Face

Step 1

It's time to refer to the sketch again. Really, you may want to do so during the entirety of this tutorial, but that's up to you.

1. Use the Pen Tool to trace the right eye. Draw a couple paths for the eyelid.
2. I like to use the Pencil Tool to draw layers of eyelashes. Since this design is intended for a makeup and beauty themed poster or game, I think her lashes should be huge and quite full.
3. Add a Linear Gradient to the eye itself going from brown to white and back to brown. Use the Gradient Tool to adjust the color placement. You want darker colors at the corners of the eyes.
4. Draw additional transparent brown shapes over the corners and edges of the eyes to add more depth. Adjust the Opacity of objects in either the Appearance or the Transparency panels.

Group all of these elements together to keep your Layers panel organized.

Step 2

I Copied and Pasted the right eye and Reflected it over a vertical axis to create the left eye. The nostrils of the nose are two little teardrops, just like the original sketch design.

The mouth was traced from the sketch using the Pen Tool. The teeth are the same gradient as the eyes, with little teardrops creating the corners of the mouth. The lips are like curving half circles that have Radial Gradients applied to them going from the base skin tone to a sweet, bright pink.

Step 3

I added a couple of dark brown circles to begin the eyes. Then, I drew shadow shapes similar to those drawn in the eyes to define the sides and bottom of the nose and the bottom of the mouth.

Step 4

For now, I hid the head and body in the Layers panel so I could trace the eyebrows and place the eyeshadow in the same spot as I did in the sketch. The eyeshadow is a rounded shape, drawn with the Pen Tool, set behind the eyes, with a Linear Gradient applied that goes from blue at 100% to 0% Opacity toward the outer edges.

I also added some sparkle shapes to the lips. I'll be adding a lot of sparkles to the final design as well.

Step 5

Set the fill color of the eyes to brown and the stroke color to dark brown. Place the circles beneath some of the eyelash objects in the Layers panel. It'll be easier to see in the final design, but I added light peach shapes to the corners of the mouth and chin to create simple highlights on the face.

Step 6

For the detail in the eyes, I drew a couple of small dark brown circles for the pupils and added some more transparent dark brown shadow shapes to the eyes to create more depth. Additionally, I drew some highlight shapes on the nose and in the corners of the eyes and added larger blush shapes on either cheek that match the gradient used on the lips but are a bit more transparent and lighter.

Step 7

Finally, I drew a couple of lighter-brown curved shapes on the bottoms of the irises and added sparkles to the eyeshadow. Group together all of your face components and Unhide the head and body so you can check out how cute the face you just created really is!

6. Draw Frenchy's Pink Hair

Step 1

Once again I've hidden the face and body. This is so we can focus fully on the hair and recreating it from the sketch.

1. Draw the hair in sections using the Pen Tool, starting with the middle of the bangs or fringe.
2. Work up sections on the left side focusing on the front portion of the hair.
3. Once the left half of the front is complete, start drawing those cute flippy bits of the back of the hair.
4. Copy, Paste, and Reflect the left half to create the right half as we've done countless times throughout this tutorial in order to speed up our design process.

Step 2

Place the non-bang or fringe sections of hair behind the head in the Layers panel. Now she no longer has pink facial hair!

I drew a shape in the top center of the hair and added a Radial Gradient that goes from dark pink to medium pink to start showing some depth in her hair.

Step 3

I've hidden the back of her hair so we can focus on the front section first.

1. Each section of her bangs/fringe has a Linear Gradient added to it in order to add a subtle sense of depth and shape to a relatively flat design.
2. I added an outline to the entire front section of hair in the same manner we've done previously.
3. Draw dark pink shadow shapes with transparent Linear Gradients to help define each section of hair. Try to focus these shadow shapes between sections or where parts of the hair indent.
4. Create shadow shapes on both sides and Group your hair components together.

Step 4

Repeat the previous step's process on the back section of hair. Define sections, some strands, and even some highlights in the hair with a lighter pink. Because I love glitter and glamour I've added sparkles to her hair, but may not keep them within the final design.

7. Create Some Cute Clothes

Step 1

Using the sketch as a guide, trace the shirt in two halves, as we did with the shoulders and bust. Unite the shapes in the Pathfinder panel.

1. Set the fill color to pink and the outline color can be brown or pink, depending on what you're using for outlines within the rest of the design.
2. I also used triangles for the collar shapes, which was drawn with the Pen Tool and follows the sketch itself.
3. Render the shirt in the same manner you did the hair: dark pink gradients for shadow shapes and light pink gradients for highlight shapes. Consider cast shadows from the collar and shadows to help define the puffy little sleeves of the shirt. Repeat for the other side.

Step 2

I changed the outline color to brown to match the rest of my design.

1. Draw a few white circles with brown strokes for her necklace.
2. I also added a bunch of sparkles to the design, but this is entirely optional. It's possible you're not as into sparkles and glitter as I am, and that's quite alright.

Step 3

Here's a quick look at the design so far. We need to create the banner and background, and bring it all together with the icons created earlier in order to complete the design. Group the entire bust portrait design together, and let's finish this up!

8. Complete the Design

Step 1

The banner has quite a simple design process. Draw a rectangle and Arc it by going to Effect > Warp > Arc. I've applied a Horizontal bend of -46% to my rectangle. How curved your shape will be is entirely up to you. Go to Object > Expand Appearance to expand the boundaries of the warp effect.

Step 2

For the fold and tails of the banner, draw a small rectangle the same height as the rectangle you drew in the previous step. Add an anchor point to the center of the rectangle's left side and move it inward with the Direct Selection Tool.

For the banner's fold, draw a triangle that connects to the inner top corner of the little flag shape and the outer top corner of the banner.

Repeat for the right side so you have a cute banner like the one seen below. Note that the triangle and flag shape are behind the curving banner shape in the Layers panel.

Step 3

Use the Type Tool (T) to write out a fun phrase or title for your design to be placed on the banner in a script font of some sort. Check out Fabulous, Zaila, or Melancolie from Envato Market.

Apply the same Arc to the type as you did to the banner's original rectangle and Expand its Appearance under Object.

Step 4

Draw a large light blue rectangle behind the design, over the Artboard in order to create the background for the design. Move, Rotate, and Scale your makeup and accessory icons around the portrait and banner to help fill up the space within the Artboard.

Great Job, You're Done!

At long last, we're ready to go back to high school! Or rather complete our design of this Beauty School cutie. I added a Radial Gradient to the background rectangle and moved the various icons outward from the portrait to give Frenchy lots of space within the design. Finally, I added a lot of sparkles and some additional details to the hair and face.

Share your completed design in the comment section below! What other cute characters can you create from Grease? Let's imagine a whole series of beauty and spa games featuring the movie's full cast of fun characters!

If you'd like to use other icons for your design, you can purchase them as stock assets from Envato Market:

• Set of Flat Beauty and Makeup Icons
• Hairstyling and Makeup Flat Icons