Advertisement

Create a Backlit, Elegant Female Portrait in Illustrator

by
This post is part of a series called Vector Portraits.
Create a Monochrome Portrait in Illustrator
Creating with Vector Blends In-Depth
This post is part of a series called Mastering Vector Portraits.
How to Create a Hair Braid Pattern Brush in Illustrator
Create an Art Nouveau Poster in Illustrator
Final product image
What You'll Be Creating
This tutorial was originally published in February 2011 as a Tuts+ Premium tutorial. It is now available free to view. Although this tutorial does not use the latest version of Adobe Illustrator, its techniques and process are still relevant. 

Today we're going to be using a stock image provided by the wonderful Tasastock as the perfect pose for this strikingly beautiful portrait.

There are two reasons why I have selected this stock image. The first is that the hair is tied away from the face, making it easier for me to create my own hairstyle. The second is that I'll be able to show you how to create even, soft shading from a reference image where the skin colors have been distorted.

1. Prepare Your Stock Image & Set Up Your File

Step 1

First, open the image in Photoshop so we can modify it. Drag and drop the "Background" layer onto the Create a New Layer icon to duplicate it.

I don't want to amend the contrast too much on the image as it will exaggerate the distorted and modified skin tones to the point where I am unable to see the "natural" shadows and highlights. So I'm going to lighten the tones a bit by going to Image > Adjustments > Curves and selecting "Lighter" from the drop-down menu.

Prepare Your Stock Image  Set Up Your File

Step 2

I tend to create a color palette for the skin by using the Eyedropper Tool (I) in Illustrator directly from the reference image. Often when getting a stock image, there might be tones in the skin from the lighting used in the photo. The way to "correct" this is to use the Color Balance (Command-B) options in Photoshop.

The color changes will be very subtle. If you want to aim for a realistic palette, avoid bold changes in color. Although the color changes are subtle, if you consider you're going to be using only a handful of colors for a large area, it then becomes an important step.

I've amended the color levels as follows from left to right:

  • Shadows: -5, -5, +5
  • Midtones: -10, +5, +5
  • Highlights: -5, 0, -5
Prepare Your Stock Image  Set Up Your File

Step 3

Once you've made these minor modifications, go to File > Save for Web & Devices and save it with a Height of about 800 px.

Open Adobe Illustrator and create a New Document in portrait. Go to File > Place and select your reference image to place on the canvas. Move the reference image slightly to the left to where you'd imagine the shoulder/arm on the right to be completed.

Prepare Your Stock Image  Set Up Your File

Step 4

Double-click on the layer folder containing the reference image and rename it "Reference". Then lock it. Create a New Layer and rename it "BG". Using the Rectangle Tool (M), draw a white fill rectangle over the canvas and change the Opacity to 30%. Lock it. Create a New Layer and rename it "Skin Base".

Prepare Your Stock Image  Set Up Your File

2. Skin Shading

Step 1

Using the Pen Tool (P) draw the base for the skin with a fill color of C=15, M=30, Y=35, K=0. As with any color you're using, drag and drop the color into the Swatches panel for later use.

Skin Shading

Step 2

Create a New Layer and rename it "Skin Shading". Using a fill color of C=25, M=45, Y=50, K=0, begin adding shapes for the skin shading that focus on the mid tones of the skin. Set the Opacity for the shapes to 10%.

Skin Shading
Skin Shading
Skin Shading
Skin Shading

Step 3

Select All of the shapes (Command-A) and then Group them (Command-G). Go into the "Skin Base" layer folder and Copy (Command-C) and Paste in Front (Command-F) the skin base shape. Drag and drop this in front of the group you've just created. Select both the group and the duplicated skin base and create a Clipping Mask (Command-7).

Skin Shading

Step 4

Using the fill color of C=35, M=60, Y=70, K=20 add further shading to the portrait. These are the darker areas of the skin. Set these shapes to Opacity of 5%.

Skin Shading
Skin Shading
Skin Shading

Once done, Group these shapes (Command-G), and then drag and drop the group into the Clipping Mask.

Skin Shading

Step 5

Create a transparent radial gradient with a lighter skin tone color (C=5, M=10, Y=15, K=0) and use this to add the highlights onto the skin. Set these shapes to Opacity 10%. Using gradients for highlights is a great way to help give the impression of soft skin.

When creating portraits of women—I can say this from a female perspective here—we don't like our fine lines, bumps and pores on show. So creating a soft matte look to the skin is important. As with all portraits, skin is only picked up on by the viewer if the skin looks bad! If you have flawless skin, rendered or in real life, people will rarely pick up on it. So when I create portraits, I probably spend more than half of my time rendering the skin.

Skin Shading
Skin Shading
Skin Shading

Group the shapes (Command-G), and then drag and drop the group into the Clipping Mask.

Skin Shading

Step 6

I'm going to add some further shines to the skin using shapes filled with the highlight color (non-gradient) set to Opacity 10%. Group these shapes (Command-G) and then move them to the Clipping Mask group.

Try to avoid too many highlights or extreme highlights on the skin. If a woman is wearing cosmetics, she's doing it to make her skin look as perfect as possible. This means avoiding any look of "oily" skin. Aim for the odd highlight to emphasis the tip of the nose, under the eyes and collar bones.

Skin Shading

Step 7

Just as I've added the highlights, I'm going to add further deep shadows. These are typically in the most dark areas such as around the nose, the arm pit and around the ear. I'm going to use a darker skin tone color (C=45, M=75, Y=75, K=55) set to Opacity 5%.

Skin Shading
Skin Shading

Then Group these shapes (Command-G) and move them to the Clipping Mask.

Skin Shading

Step 8

A quick way of modifying the tones in the skin is to use transparent radial gradients. If you're just wanting the edges to have a deeper shade, then using inverse gradients is a good quick fix. In this portrait, half of the reference is in shadow. Although I don't want it to be as deep as the reference, I still want to add depth by using two inverse radial gradients applied to the whole of the skin base.

Go into the "Skin Base" layer folder and duplicate the skin base shape twice. Apply a gradient with one of the tones used for skin shading (C=35, M=60, Y=70, K=20). Using the Gradient Tool (G) place and rescale the gradient. The first is set to a Blending Mode of Multiply and Opacity 40%. This is to darken the skin and add more desaturated tones to it.

Skin Shading

The second is set to Blending Mode of Color Burn and Opacity 10%. This adds more red/orange tones to the skin.

Skin Shading

Step 9

There are other areas of the portrait which will require a deeper shadow. These are under her ear, under the chin and where her arm and breast meet. I've used the same radial gradient, but not inverted; set to Blending Mode Multiply and Opacity 25%.

Skin Shading
Skin Shading
Skin Shading

Step 10

Further areas are added to the portrait with the same gradient, this time with Blending Mode Multiply and Opacity 50%. Once done, Group the shapes (Command-G) and add them to the Clipping Mask group.

Skin Shading
Skin Shading
Skin Shading

Step 11

The skin isn't all one color, and this is especially so towards the inner eye and on the cheek bone, although the cheek bone is usually enhanced with makeup. This is either to help give the impression of higher cheek bones or to try to reshape the face via implied shadows.

Sometimes when adding blush (aka cheek-bone shades) to a model, a transparent radial gradient will do the job, but in this case, as the cheeks are more angled in appearance, a blend will do the trick.

The below Blend is created with two shapes that have a fill color of C=10, M=100, Y=50, K=0. The larger shape is 0% Opacity and the smallest is 100%. The small shape needs to be on top of the larger shape. The Blend group will then have the Blending Mode Color Burn and Opacity 20%. The Blend will require settings shown in the reference image:

Skin Shading

Now I have used the same method with the fill color of a medium grey (C=0, M=0, Y=0, K=40) and with the Blend group set to Blending Mode Color and Opacity 20%.

Skin Shading

Once done, drag and drop the two blends into the Clipping Mask group.

Step 12

I like to add a subtle rose tone to the shoulders. These help to emphasize the soft appearance of the skin. I've used two transparent radial gradients with the same shade used for the cheeks (C=10, M=100, Y=50, K=0).

I've used the Ellipse Tool (L) to create the shapes required. Set the Blending Mode to Color and Opacity at 25%. Once done, add these shapes to the Clipping Mask group.

Skin Shading
Skin Shading

3. Create the Lips

Step 1

Create a New Layer and rename it "Lips". Using the same transparent radial gradient, create a shape for the lips and set it to Blending Mode Color Burn and Opacity 50%.

Create the Lips

Step 2

Then, using the same gradient, add further shapes to begin building up the lips and emphasizing the creases. Set these shapes to Blending Mode Multiply and Opacity 25%.

Create the Lips
Create the Lips

Step 3

Using the darkest skin tone (C=45, M=75, Y=75, K=55), add shapes to darken the lips, parting of the lips and creases. Set these shapes to Blending Mode Color Burn and Opacity 15%.

Create the Lips
Create the Lips
Create the Lips

If you see a close-up of the parting of the lips, stagger the shapes to give the impression that the shadow is gradual to show the curves in the lips.

Create the Lips

Step 4

You should still have the transparent radial gradient used to highlight the skin (C=5, M=10, Y=15, K=0). The shapes are to add highlights to the lips, focusing along the top of the lips and between the creases. Set these shapes to Blending Mode Color Dodge and Opacity 15%.

Create the Lips
Create the Lips

Step 5

Using the Ellipse Tool (L) and the highlighting transparent radial gradient, add circles around the lips to add sparkles to the lips, and it will also add texture. Set these shapes to Blending Mode Overlay and Opacity 25%.

Create the Lips

Step 6

Begin adding shapes in the parting of the lips to define the shadow in the mouth and between the teeth. Use the C=45, M=75, Y=75, K=55 color for this and set it to Blending Mode Color Burn and Opacity 20%.

Create the Lips
Create the Lips

Step 7

Back to using the highlighting transparent radial gradient to create the teeth in three layered shapes per tooth. Set these to Blending Mode Lighten and Opacity 15%.

Create the Lips
Create the Lips
Create the Lips

4. Work on the Eyes

Step 1

Often when I add areas of the portrait, such as the lips in this case, the intensity of the color doesn't match that of the skin shading. So I often add additional shading to help balance this out.

Create a New Layer above the "Lips" layer folder and rename it "Skin Shading 2". With the transparent radial gradient used for shadows in the skin shading (C=35, M=60, Y=70, K=20), add shading shapes set to Blending Mode Multiply and Opacity 15%. Make sure that some of these shapes overlap onto the lips.

Work on the Eyes
Work on the Eyes
Work on the Eyes

Step 2

Continue to add further shading using the same gradient, but with the Blending Mode of Darken and Opacity set to 50%. These shapes are more focused around the eyes and eyelid creases.

Work on the Eyes
Work on the Eyes

Step 3

Now use the highlighting skin transparent radial gradient (C=5, M=10, Y=15, K=0) to add further shine to the skin. This is more to highlight the brow bone and eyelids. Set these shapes to Blending Mode Overlay and Opacity 15%.

Work on the Eyes
Work on the Eyes

Step 4

Create a New Layer and rename it "Eyes". Using the pale highlighting color (C=5, M=10, Y=15, K=0), begin adding shapes for the eyes. There are four shapes used for each eye: one for the eyeball, another for the eyeball and inner eye, and then two shapes either side of the iris.

Set these shapes to Opacity 35%. Always try to avoid using white/bold pale colors for eyeballs, as the human eye is not bright white. Although this illustration is not life-like, it is highly detailed, so I want to keep to natural colors where possible. The exception is of course in more cartoon illustrations where bright white is acceptable.

Work on the Eyes

Step 5

I often refer back to the reference image in placing the iris in my illustrations. Here I'm using the Ellipse Tool (L) to create the initial circles for the iris. Note that the one on the left is slightly smaller.

Work on the Eyes

Copy (Command-C) and Paste in Front (Command-F) the circles. Then using the Free Transform Tool (E), shrink the circle slightly. This helps give a less crisp edge to the iris. Both circles have a dark green fill color (C=90, M=30, Y=95, K=30) with Opacity of 50%.

Work on the Eyes

Step 6

Group the two circles (Command-G) and then with the Pen Tool (P) create a shape where the iris is within the opening of the eye. Create a Clipping Mask for each of the irises (Command-7) and place the circle groups within.

Work on the Eyes

Step 7

Note: The screenshots I will show you from now on will focus on one eye. However, what I do with one eye, repeat as appropriate on the other. I'd advise doing them both at the same time to make sure the objects are consistent.

Using the double circle effect again, use the Ellipse Tool (L) with a dark brown fill color (C=40, M=75, Y=75, K=55) to create the pupils of the eye. Set these to Blending Mode Multiply and Opacity 50%. Then add the circles to their respective Clipping Mask groups.

Work on the Eyes

Step 8

Build on the shading for the iris and lash line by adding shapes with the mid skin shading tone (C=30, M=60, Y=70, K=20) with the Blending Mode Multiply and Opacity 50%.

Unlike in men, with women it's wise to put a lot of emphasis on the top lash line and the corner lashes of the eye. This helps exaggerate the thickness of the lashes. This is also a common cosmetic trick.

Work on the Eyes
Work on the Eyes
Work on the Eyes

Step 9

Add further shapes with the same fill color to increase the shading for the eyeball, around the lash line, on the top and bottom of the eyes, and the eyelid crease. Set the Blending Mode to Multiply and Opacity 20%.

Work on the Eyes
Work on the Eyes

Step 10

Using the Ellipse Tool (L), draw a circle slightly smaller than the size of the iris. Fill it with a transparent radial gradient with the mid skin shading tone used previously (C=30, M=60, Y=70, K=20).

Go to Effects > Distort & Transform > Zig Zag and use the settings below. Set the Blending Mode to Color Dodge and Opacity at 35%. Then drag and drop this shape into the Clipping Mask group for the relevant Clipping Mask group below the pupil circles.

Work on the Eyes

Step 11

Keep the same transparent radial gradient as the fill color; create another circle over the iris. Use the Gradient Tool (G) to reshape and size the gradient source to add a shine towards the bottom of the iris. Set the Blending Mode to Color Dodge and Opacity at 60%. Add this to the Clipping Mask group below the pupil circles.

Work on the Eyes

Step 12

Duplicate the circles just created and invert the gradient. Modify the source to create an arc of color around the top of the iris. Set the Blending Mode to Color Burn and Opacity to 60%.

Work on the Eyes

Step 13

Create shapes at the corner of the eye and along the lower lid with a fill color of the transparent radial gradient used for the pink tint of the lips/shoulders. Set the Blending Mode to Color Burn and Opacity to 45%.

Work on the Eyes

Step 14

Create a New Layer above the "Eyes" layer folder and rename it "Eyelashes". Using the Width Profile 1 brush on its default settings, with the Paintbrush Tool (B) draw "S" and "J" shapes to create eyelashes along the lash line. These will have the stroke color of a dark brown (C=40, M=75, Y=75, K=55) and a Blending Mode set to Multiply and Opacity at 45%. Once done, Group them (Command-G).

Slightly exaggerate the length and density of the lashes, as would be done with the use of mascara and eyeliner in cosmetics.

Work on the Eyes

Step 15

Do the same as the previous step for the lower lashes, but with a Blending Mode of Multiply and Opacity at 25%.

Work on the Eyes

Step 16

Back into the "Eyes" layer folder, I'm going to add shines and reflections to the eye. I've used the skin highlighting transparent radial gradient and shifted the source with the Gradient Tool (G) towards the bottom of the shapes.

I've used the Ellipse Tool (L) to create circles over the pupil and in the corner of the eyes. These shapes are set at Blending Mode Color Dodge and Opacity of 75%.

Work on the Eyes

5. Create the Hair

Step 1

Create a New Layer above the "Eyelashes" layer folder and rename it "Hair Sketch". Using the reference image as a guide, sketch the hair line and the area in which there would definitely need to be hair cover. This will be where the hair style is structured over. I sketch using the Paintbrush Tool (B) and the Width Profile 1 brush previously used. Group the strokes (Command-G) for easier use.

Create the Hair

Step 2

Reduce the Opacity of the initial sketch group to about 30% so you can still see it but it won't distract you from your hairstyle sketch. Although I want to make a feature of the hair, I don't wish it to be too distracting. I've chosen to have the hair tied back, but with it showing length.

I've done the sketch in sections to make it easier to construct an "up do." First draw the fringe/bangs at the front (green), and then the side pieces of hair to be gathered at the back (pink). 

You then need to decide how you'd like the hair on top between the sides to be like, whether to show a parting in the hair or not. I've opted to give the hair volume in a soft bump at the front (orange/red). 

Finally, although I want the rest of the hair to flow at the back, I want to give the impression of the length of the hair. Considering the length of hair required to keep the hair tied at the back, it would have to be just below shoulder length. This is represented by the lock draping over the shoulder/collar bone area (blue).

Create the Hair

Step 3

Lock the "Hair Sketch" layer folder for now. Create a New Layer above the "Hair Sketch" folder and rename it "Hair Bases Front". Then Create a New Layer above the "BG" folder and rename it "Hair Bases Back".

If you consider that the blue/back of the hair will need to be behind the skin shading, and the rest on top of the skin shading/features, adding these two hair base layer folders will help organize and ensure the hair looks perfect.

Create the Hair

Step 4

I'm going to use the Pen Tool (P) to create shapes for the bases of the hair within the respective hair base folders. However I'm going to color them slightly differently to distinguish the style of the hair.

Create the Hair
Create the Hair

The back of the hair and top portion of the hair will be C=20, M=90, Y=100, K=15 and the fringe/bangs and the side sections will be a lighter shade of C=15, M=85, Y=95, K=10. When I finished drawing these shapes I noticed my fringe/bangs were hiding the side section of the hair, so this was removed.

Create the Hair

Step 5

Duplicate the hair bases and then collate them as shown in the screenshot below. Create an inverse transparent radial using the darker auburn color and apply it to the duplicated bases. Using the Gradient Tool (G) position, resize and shift the source position so the gradients give the impression of shadow.

Create the Hair

However, with the back, invert the gradient again as the shadow would be coming from the neck rather than inwards. I then used a linear gradient from the roots down.

Create the Hair

Set all of these shapes to Blending Mode Multiply.

Create the Hair

Step 6

Create a New Layer and rename it "Hair 1". I'm going to use this to draw some strands of hair in the direction I want the hair to flow. Although I could jump in and begin adding many strands all together, I'd advise creating some strands first, otherwise you many find your strands too chaotic.

I've used the Pen Tool (P) to draw these with the "Width Profile 1" brush, and used the dark auburn shadow on Multiply at 25%. I drew each section of the strands and Grouped them (Command-G), and then organized them in the Hair Base folders as shown.

Create the Hair

Step 7

I can now use the Paintbrush Tool (B) with the same settings as above to draw more strands, using the initial lines to guide me. Don't worry if you don't cover the area completely or overlap your strands. This helps you create more organic areas of darker and lighter areas of hair and add texture.

Create the Hair

Again draw the strands in sections and Group them (Command-G).

Create the Hair

Step 8

Create new strands with the same brush to illustrate strands which are being caught by the light in front. Use the same settings as before, but change the Blending Mode to Color Dodge and Opacity to 50%.

Create the Hair

Step 9

Increase the Stroke Weight to 3 pt and begin drawing strands in the darker areas of the hair for each of the sections. Focus many strokes at the roots of the hair, as this is where it should be darker due to the length and tips of the hair being bleached by the sun.

I've used a different color to show you where I put the strokes for the top section, but I used the same dark auburn shade to do this. Setting the Blending Mode to Multiply and Opacity to 30%.

Create the Hair
Create the Hair

Step 10

I'm going to change the stroke color now to a light brown (C=25, M=40, Y=65, K=0) and use the same brush and weight to add highlights to the hair. These will be focused more to the right of the hair as this is the direction of the light.

Set these to Blending Mode Color Dodge and Opacity 20%. I've Grouped (Command-G) these strands and kept them in the "Hair 1" layer folder.

Create the Hair
Create the Hair

Step 11

As much as women would love their hair to be pencil straight and have no fly-away strands, in reality this isn't always possible. To add a hint of realism to the portrait, draw strands of hair around the outside of the bases and the curl of hair coming over the shoulder.

I've used a Stroke Weight of 1 pt and the dark auburn shade. However, I've changed the Opacity for the strands to 80% and even changed some of the strands Blending Mode to Multiply on the shoulder curl to make it look less flat. I've Grouped (Command-G) these strands and kept them in the "Hair 1" layer folder.

Create the Hair
Create the Hair

Step 12

I've added a slim base to the shoulder curl to give it more depth. Add a jagged tip to the start and end of the curl to make it more natural and blend better into the connecting hair. I've filled this with the dark auburn shade.

Create the Hair

Step 13

Create a New Layer above the "Eyelashes" layer folder and rename it "Eyebrows". Eyebrows are usually a little lighter in shade than the hair (if it's a natural hair color and not out of a bottle that is!), so I've used the lighter auburn shade to add strokes for the eyebrows with an Opacity of 60%. I then Group these strands (Command-G).

Create the Hair

To add texture to the eyebrows, I've added further strands with a Blending Mode of Multiply and Opacity of 50% on top.

Create the Hair

6. Create the Background

Step 1

Go into the "BG" layer folder and change the Opacity of the rectangle in there to 100% and fill it with a dark green (C=90, M=30, Y=95, K=30).

Using the Mesh Tool (U), add a point in the center of the shape with a pea green shade (C=50, M=0, Y=100, K=0). Then add a further four points as shown below.

Create the Background

Step 2

As I'm wanting to create a backlight effect, the fly-away strands of hair and much finer strands would pick up on the light. Create a New Layer below the "Hair 1" layer folder and rename it "Hair Highlights".

Using the Paintbrush Tool (B), add strokes around the hair and set these to Blending Mode Screen and Opacity 60%. Remember to add some strokes to the eyelashes on the left, as they would be caught slightly by the backlight. Group them once done (Command-G).

Create the Background

Step 3

Create a New Layer above the "BG" layer folder and rename it "Backlight". With the Pen Tool (P) to ensure a smooth shape, draw around the shoulders, hair and cheek. Due to any hairs and texture on the skin, this would catch the light slightly. So I'm going to add a faint outline to the portrait to represent this.

Create the Background

Duplicate the line three times and set the stroke color to a yellow with a green tint (C=5, M=0, Y=90, K=0) and Blending Mode Screen and Opacity 10%. Stagger the Stroke Weight of the lines from 2 pt to 4 pt, 8 pt and 16 pt to give the impression of a glow.

Create the Background

Step 4

Create a New Layer below the "Backlight" layer folder and rename it "Bokeh". Although this effect isn't strictly accurate in appearance of bokeh, it does give an impression of it. I find the quickest and least distracting method is to create a transparent radial gradient with the color fade near the edge of the shape with a thick stroke.

In this instance, I've used the previously used yellow with a green tint for the gradient and stroke color. I've set the Stroke Weight to 4 pt and used the Ellipse Tool (L) to create an even circle.

Create the Background

Draw different sized circles around the portrait, and set the Blending Mode to Screen and Opacity to 10%.

Create the Background

7. Finishing Touches

Step 1

To refine the skin shading, I'm going to add some highlighting and shading strokes. Go into the "Skin Shading 2" layer folder, and add strokes as shown below to enhance the light in front of the portrait. I've used the highlighting skin color for this (C=5, M=0, Y=15, K=0) and set the Blending Mode to Screen and Opacity to 30%. Although you can do this with the Paintbrush Tool (B), I would suggest the Pen Tool (P), again to ensure a smooth curve.

Finishing Touches

Step 2

Now add shading lines with the dark skin shading color (C=35, M=60, Y=70, K=20) set to Blending Mode Multiply and Opacity 40%.

Finishing Touches

Step 3

Finally, I always add to my portraits some freckles/moles! These are very easy to create by using a transparent radial gradient of the dark skin shading color. Use the Ellipse Tool (L) to create the first circle, and then duplicate and offset it slightly. Change the Blending Mode to Multiply and Opacity to 70%.

Position and rotate the two circles on the body to give the skin a bit more of a realistic charm!

Finishing Touches

Awesome Work, You're Now Done!

I'm going to be honest and say I'm of the opinion that women are great at producing female portraits as they know these makeup tricks and tips and can help illustrate a detailed portrait well! 

However, if you're not too good on makeup or would like to improve on flattering a female portrait, I highly recommend checking out cosmetic tutorial sites for tips on techniques to flatter the face. By converting makeup techniques into gradients and lines, you can create several flattering effects to enhance the skin and features.

Final result
Advertisement