Create a Backlit, Elegant Female Portrait in Illustrator

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 usinga stock image provided by the wonderful 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.

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

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.

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".

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.

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%.

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

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%.

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

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 softskin.

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 willrarelypick up on it. So when I create portraits, I probably spend more than half of my time rendering the skin.

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

Step 6

I'm going to add some further shines to the skin using shapes filled with the highlight color (non-gradient) set toOpacity 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.

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%.

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

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.

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

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 Opacity25%.

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.

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 iseitherto 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:

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 Opacity20%.

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.

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%.

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%.

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%.

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.

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%.

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%.

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%.

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%.

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.

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.

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 Overlayand Opacity 15%.

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.

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.

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) withOpacity of 50%.

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.

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.

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.

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%.

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.

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.

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%.

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%.

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.

Step 15

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

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%.

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.

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

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.

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.

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.

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.

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.

Set all of these shapes to Blending Mode Multiply.

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.

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.

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

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%.

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%.

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.

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.

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.

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

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

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.

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 ModeScreen and Opacity60%. 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).

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.

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 ptto 4 pt, 8 pt and 16 pt to give the impression of a glow.

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.

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

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.

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%.

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!

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.