In this tutorial you'll learn how to create a blood elf inspired portrait from a photo. We'll cover some photo manipulation tips, vectoring a portrait in Illustrator and even some theory on hair style.
You can find the source files in the directory labeled 'source' that came in the files that you downloaded. You may wish to look through them briefly before we begin.
Introduction
The 7th of December 2010 was the release of the third expansion for the largest massive multiplayer online role playing game (MMORPG), World of Warcraft: Cataclysm. To celebrate the release, today I'm going to show you how to create your own blood elf inspired portrait from a reference image. Also I'll be giving some hairstyle design theory which you can apply to any future projects, ideal if you like to give your portraits a unique look.
If you'd like to see a blood elf in action, this is one of my all time favorite is machinima's. The female ninja jumping around is a blood elf and will give you a fair idea of the character that inspires this tutorial.
I'm going to use stock by Jessica Truscott, specifically this image. The reason being is that her ear is exposed so I can show you how to create an elf like ear.
Step 1
Open up the stock image in Photoshop and duplicate the "Background" layer by drag and dropping it on the Create a new layer icon in the layer palette.
Blood elves have green glowing eyes, however they aren't so big. For my spin on a blood elf I want the eyes to be a bit of a focal point, therefore I'm going to enlarge the eyes. Using the Lasso Tool (L) with a 10px feather, draw around each of the eyes and then enlarge them by using the Move Tool (V).
Step 2
I'm going to enlarge the iris's using the same method, of selecting the area and using the Move Tool (V) to enlarge. Use the Eraser Tool (E) to clean up the edges and then go to Layer > Merge Visible.
Step 3
Duplicate the background layer again by drag and dropping the layer on the Create a new layer icon.
Blood elves have unnaturally slim faces, so I'm going to use the Lasso Tool (L) to select around the face and shoulders, then use the Move Tool (V) to shrink. I've chosen to not select around part of the face. This is because although I want the face to be a lot slimmer, I still want it to retain some of the curves from the cheekbones.
Use the Eraser Tool (E) to clean up the edges and then go to Layer > Merge Visible. Once done, I'll use the Crop Tool (C) to trim the canvas.
Step 4
Duplicate the "background" layer again by drag and dropping the layer onto the Create a new layer icon. I'm going to slim down the nose to make it less prominent. Firstly, I'm going to select and resize the tip of the nose. Then Merge Visible layers and duplicate the "background" layer again.
Then select the rest of the nose and select and resize that portion. Use the Eraser Tool (E) to clean up the edges and then go to Layer > Merge Visible.
Step 5
I'm going to give a rough idea of how to create the elf like ears. I'm going to need a guide for this. I want to add a curve to the ears but I'm unable to do so successfully with Photoshop, so I'm going to take this element over to Illustrator.
So select around the ear and then Copy (Command + C) it. Open up Illustrator and Paste (Command + V) this element on the canvas.
While the object is selected go to Object > Envelope Distort > Make With Mesh and use the settings below.
Using the Direct Selection Tool (A) and the Free Transform Tool (E), modify the ear to make it more elf like. I've kept the lower section of the ear intact, focusing on the tip of the ear.
Step 6
I Copy (Command + C) the whole mesh and Paste (Command + V) it on the photo manipulation in Photoshop. Placing it as a pixel layer as I want to modify this shape straight away. Use the Eraser Tool (E) to clean up the edges, then the Smudge Tool to clean the curve of the ear and to fill in the side of the ear.
Now merge the layers and Save for Web & Devices at 800px width ready to be used as a reference in Illustrator.
Step 7
Create a new document for print. It really doesn't matter if it's landscape or portrait at this point as I can modify that at a later stage. Go to File > Place... and locate the photo manipulation. Use the Free Transform Tool (E) to resize it. Double-click on the "Layer 1" layer folder and rename it "Reference," then click on Ok.
Create a New Layer and rename this "BG." Using the Rectangle Tool (M), draw a white fill rectangle to cover the canvas and reduce its Opacity to 30%. Create a New Layer and rename it "Bases." Lock the "BG" and "Reference" layer folders and you should have the image below.
Step 8
Using the Pen Tool (P) I'm going to draw the skin base for the elf, to include the chest/shoulders, ear and face. I'm using a skin color of C=15, M=30, Y=30, K=0. If you Toggle Visibility by Command-clicking on the eye icon in the layer palette, it's easier to draw around this shape and makes it more accurate.
Step 9
Create a New Layer and rename it Skin Shading. Toggle Visibility on the "Bases" layer folder to make it easier to use the reference image for a guide in the shading.
Using the Pen Tool (P) with a darker skin color as the fill (C=25, M=40, Y=45, K=0), begin adding shapes for the shaded areas of the skin. It's worth noting, that for the eyebrow area, don't draw around the full eyebrow, as blood elves have long pointed hairs coming from the start of the brow bone.
Step 10
Select All (Command + A) of the shapes and reduce the Opacity to 15% and then Group them (Command + G).
Go into the "Bases" layer folder and Copy (Command + C) and Paste in Front (Command + V) the skin base shape. Drag and drop this shape above the group you've created in the "Skin Shading" layer folder. Select the group and the skin base shape and create a Clipping Mask (Command + 7).
Step 11
Lock the clipping mask group. Begin adding darker shadow shapes on the portrait using the Pen Tool (P) with a darker skin color fill (C=35, M=70, Y=75, K=30).
Now Select All (Command + A) and reduce the Opacity to 5%. Group the shapes (Command + G) and drag and drop them into the clipping mask group. The rest of the skin shading is shown below.
Step 12
I'm going to begin adding highlights to the skin. I'm doing this with a transparent radial gradient with a lighter skin shade (C=5, M=15, Y=15, K=0).
Then Select All (Command + A) and reduce the opacity to 15% and change the Blending Mode to Overlay. Then Group the shapes (Command + G) and drag and drop them into the clipping mask group with the other skin shading.
Step 13
I'm going to start to add further tones to the skin. This can be done with using the colors you already have in your swatch palette saved and just changing the blending mode.
Firstly, I want to add further shadow to the skin, to give the neck to face area more definition. A great way to do this is by using a gradient. So make a transparent radial gradient using the darker skin shading color (C=35, M=70, Y=75, K=30). Now draw around the area with the Pen Tool (P) and use the Gradient Tool (G) to position and resize the source. Then set the Blending Mode to Multiply and the Opacity to 15%.
Step 14
Blood elves don't have a natural pale color to their skin. They have a more orange tone, almost plastic looking. So I'm going to use the same radial gradient but inverting it so the center is at 0% opacity.
Copy (Command + C) and Paste in Front (Command + F) the "skin" base from the "Bases" layer folder and apply the inverted gradient to it. By setting the Blending Mode to Color Burn and the Opacity to 15%, it will give a subtle orange glow.
Then drag and drop the shapes into the clipping mask group.
Step 15
I like to add slight tinges of pink to the cheeks and shoulders. The best way to do this is to add Magenta transparent radial gradients to areas of the portrait, set the Blending Mode to Multiply, and reduce the Opacity accordingly. In this illustration I'm going to reduce it to 10% as the original blood elf doesn't have these elements, but I still want the illustration to be in my own style. Call it a vector compromise. Now drag and drop the shapes into the clipping mask group.
Step 16
To finish off the skin shading, I'm going to add further darker shapes to the nose, ear, eyelid crease, shadows which are cast and the lower lip.
To do this I'm going to use the darker skin color (C=35, M=70, Y=75, K=30) and set it to Blending Mode Multiply and Opacity 15%. Always use the darker colors in small sections, otherwise they may look out of place. The exception to this rule is for shadows.
Select All of the shapes (Command + A) and then Group them (Command + G). Then drag and drop them into the clipping mask group.
Step 17
Create a New Layer and rename it "Lips." I'm going to begin adding color and detail to the lips. First using the Pen Tool (P) with a dark pink fill color (C=10, M=100, Y=50, K=0) set to Blending Mode Color Burn and Opacity 50%.
Step 18
Add shape using deep red transparent radial gradients (C=15, M=100, Y=90, K=10) set to Blending Mode Multiply and Opacity 50%.
After shaping the lips with gradients, I'm going to use the same gradient and settings to add crease lines to the lips. I've used the reference image as a guide to do this.
Step 19
With the transparent radial gradient, which was used for the skin highlights (C=5, M=15, Y=15, K=0) and the Ellipse Tool (L), add circles on the bottom lip and along the top lip to add a sparkle to them. Set these shapes to Blending Mode Overlay and Opacity 50%.
Step 20
Using the same gradient, I'm going to add a highlight to the bottom of several of the areas which may have a slight overhang. This will be the tip of the nose, top lip, bottom lip and the chin. This is set to Blending Mode Hard Light and Opacity 50%.
Step 21
Create a New Layer and rename it "Eyes." Whatever I do to one eye, I'll be doing the exact same to the other eye, so just copy the process over.
Draw two shapes with the Pen Tool (P) for the eyeball. One will be slightly smaller than the other, as this will help define the corner of the eye. Use a light green fill (C=20, M=0, Y=100, K=0) and set it to Blending Mode Color Dodge and Opacity 40%.
Using the Ellipse Tool (L), draw a green circle (C=75, M=0, Y=100, K=0) and then use the Pathfinder Minus Front, trim the circle so it's within the eyeball shape. Set the Blending Mode to Color Burn. Then Copy (Command + C) and Paste in Front (Command + F) and set the Blending Mode to Hard Light and Opacity to 50%.
Paste in Front (Command + F) again and then apply an inverted transparent radial gradient with a dark green color (C=90, M=30, Y=95, K=30) with the source towards the bottom of the eye. This will give a subtle impression of shadow towards the top of the iris. Set the stroke color to the same dark green (C=90, M=30, Y=95, K=30) and then set the Blending Mode to Hard Light and Opacity 50%.
Copy (Command + C) and Paste in Front (Command + F) the gradient filled shape and remove the stroke color. Then set the Blending Mode to Color Burn and Opacity to 40%.
Step 22
Copy (Command + C) and Paste in Front (Command + F) the largest of the eyeball shapes and use the previously used inverted dark green gradient. Set the Blending Mode to Color Burn and Opacity to 40%.
Using the Ellipse Tool (L) draw a circle with the dark green fill (C=90, M=30, Y=95, K=30) and set the Blending Mode to Multiply and Opacity to 60%. Now using the Pen Tool (P), draw two small shapes either side of the iris with the dark green fill and set the Blending Mode to Multiply and Opacity to 60%.
Step 23
Use the darker skin color (C=35, M=70, Y=75, K=30) to draw around the eye and give it more definition. Then using the same color, use a transparent radial gradient towards the corner of the eye. Set all of these shapes at Blending Mode Multiply and Opacity 50%.
Step 24
Using the Width Profile 1 brush from this tutorial, I'm going to create the eyelashes using the Paintbrush Tool (B).
Use a dark brown stroke color (C=50, M=70, Y=80, K=70) and a stroke weight of 0.75pt to draw the top lashes. These strokes need to be a J shape, as eyelashes slightly overhang on the eyeball. Once drawn, Group them (Command + G).
Draw the lower lashes in a similar sort of way, but with the stroke weight of 0.5pt and Opacity of 50%.
Step 25
Blood elves have a green/yellow glow to their eyes. It's easy to replicate this effect by using gradients and blending modes.
Using the Ellipse Tool (L) create a squashed circle over the eye and use the Free Transform Tool (E) to angle it. Fill with a light green transparent radial gradient (C=50, M=0, Y=100, K=0) and set the Blending Mode to Hard Light.
Copy (Command + C) and Paste in Front (Command + F) the ellipse and then use the Free Transform Tool (E) to increase the size of it. Now fill with a yellow transparent radial gradient (C=0, M=0, Y=100, K=0) and set the Blending Mode to Color Dodge and Opacity to 60%.
Step 26
Create a New Layer and rename it "Hair Sketch." I tend to do my hair sketches in Illustrator instead of Photoshop, as it's easier to manipulate shapes using the Free Transform Tool (E). I'll show you how I go about creating a hairstyle.
I use the Paintbrush Tool (B) and the previously used Width Profile 1 brush. Firstly, you'll need to show your reference image. You can use this to mark out where the rest of the head is so you'll know where hair must be placed.
I've drawn these lines in a thicker stroke than I would to show you.
Step 27
I usually consider the overall composition of the portrait, how the model is placed and what sort of focal points I want to have. In this case I'd like the focus to be on her eyes, so the hair would need to compliment that.
I think the illustration has a bit too much forehead, so to counteract this element; I'm going to give her bangs/fringe.
When you start drawing hair around the hairline, you need to consider from that, how the hair on top of the head will be. How far back do the bangs/fringe go? If the bangs/fringe is only thin, then it won't take up a lot of space on top of the head. I want the bangs/fringe to be rather thick, so I'll need to sketch on top of the head to accommodate this.
Step 28
How you draw the hair towards the back will then determine the style of hair on the rest of the top of the head.
I play a blood elf myself, so taking inspiration from her hair design; I'm going to give our blood elf pig tails. Warcraft fans will know this style of hairstyle is more famous on the Alliance Gnome. The Wrath of the Lich King expansion introduced the barbershop element to the game which gave players the ability to change their hairstyles. Thankfully I was able to give my blood elf pig tails! I'm a blood elf in gnome clothing.
Knowing that the hair is divided into two pig tails, this will mean there will be a parting in the hair. If both of the pig tails are equal, then the parting will be in the center. The hair will then be coming from the hairline and from the center parting towards where the beginning of the pig tails will be bunched up.
Step 29
Now that the sketch for the hair is complete, Select All (Command + A) of the strokes, Group them (Command + G) and then reduce the Opacity to 20%. This will make it easier to use as a guide for the base shapes.
Create a New Layer and rename it "Hair Top."
I've decided I want my Blood Elf to have blonde hair. The key thing to remember when illustrating blonde hair is that it's not yellow. In more cartoon looking illustrations yellow is fine, as it's an exaggerated art form of reality, however if you're illustration is leaning more towards realism; then an ash brown color is more appropriate.
Using the Pen Tool (P) draw the base layers for the hair in sections. The top of the hair is a light ash color (C=25, M=25, Y=40, K=0) and the bangs/fringe are a darker ash color (C=25, M=25, Y=40, K=10).
Create New Layer above the "BG" layer folder and rename it "Hair Back." Using the darker ash color, draw the base layers for the two pig tails. Once finished, hide the "Hair Sketch" layer folder.
Step 30
I'm going to apply a variety of gradients on top of the hair bases. Copy (Command + C) and Paste in Front (Command + F) each one of the hair bases.
Create two transparent radial gradients using the darker ash color (C=25, M=25, Y=40, K=10). One will have the source at 100% Opacity, the other with 0% Opacity.
With natural blonde hair, the tips of the hair are more likely to be a lot lighter. So apply gradients to the tips and edges of all the bases, apart from the base used for the entire scalp. Set this to Blending Mode Hard Light.
Add gradients to the bases to create darkness towards the roots of the hair. Set this to Blending Mode Multiply.
The scalp area has been duplicated twice as I wanted to put shading towards the edges of the base (using an inverted gradient) and then towards to the roots.
Step 31
Create New Sublayers in the "Hair Top" layer folder and rename them "Bangs" and "Scalp." Now drag and drop the corresponding shapes into the folders. This will make it easier to access and organize the elements as we go along.
Step 32
Create a New Layer above the "Hair Top" layer folder and rename it "Hair Shading." I'm going to use this layer to draw the strands of hair, but then Group them (Command + G) in sections and drag and drop them into their appropriate layer folders.
I would suggest doing this with a graphics tablet; however it is possible to achieve this look with a mouse. Unfortunately if done with a mouse, it takes a great deal longer and won't be as organic looking.
For the hair strands I'm going to be using the Paintbrush Tool (B) with the Width Profile 1 brush I previously used for the eyelashes.
I begin adding the base hairs. These typically cover the entire bases to give the overall texture. I draw them pretty quickly and allow them to overlap and create gaps. Using this method, I can see where I can put natural highlights and low lights in the hair style.
The base hairs in this case are going to be the darker ash blonde color (C=25, M=25, Y=40, K=10) set to Blending Mode Hard Light and Opacity 50%.
Step 33
The next strands, using the same darker ash blonde color, will be set to Blending Mode Multiply and Opacity 35%.
These will be focusing on the roots of the hair, the parting and in small sections where there are gaps between the base hairs. They will give the impression of shadow and darker strands.
I've colored these strands in blue to show you where I have placed them.
Step 34
The next strands, using the same darker ash blonde color, will be set to Blending Mode Overlay. These will focus on the areas where the hair will be lighter or highlighted. This is typically towards the tips of the hair and on the curves of the hair.
Step 35
These strokes are going to be a dark brown (C=55, M=60, Y=65, K=40) and the stroke weight of 10pt. The Blending Mode will be Color Burn with the Opacity of 10%.
The thicker strokes are almost painted on around the roots and in the darker areas as they are so faint. Build up the strands to increase the contrast and to give a variance in tone.
Step 36
Create a New Layer above the "Hair Top" layer folder and rename it "Eyebrows." Using the Pen Tool (P) draw the bases for the eyebrows using a dark ash color (C=25, M=25, Y=40, K=10) fill.
Step 37
Using the same process for the hair, except using the Color Burn process of Step 35, draw the strands of the eyebrows using the Width Profile 1 brush and the Paintbrush Tool (B).
Step 38
The hair and eyebrows would cast a shadow on elements of the face. So using the shadows already cast on the portrait, imagine where the light source is.
I've added two new layer folders. One above the "Eyes" layer folder and renamed it "Hair Shadow 1" and one below the "eyebrows" layer folder and renamed it "Hair Shadow 2."
Using the darker skin color (C=35, M=70, Y=75, K=30), draw about four shapes using Pen Tool (P) and set them to Blending Mode Multiply and Opacity 10%.
Step 39
Blood elves come from the horde city Silvermoon. If you've been in the city it's decorated in regal colors of reds and gold. Also on the blood elf character selection screen you can give your female blood elf earrings.
Now I have to admit, I love adding hooped earrings to my illustrations. One reason is that I find them visually pleasing and another is that they are easy to add!
Create a New Layer above the "Skin Shading" layer folder and rename it Earring. Create a New Layer above "Hair Top" and rename it "Earrings Top."
Using the Ellipse Tool (L) draw a slim circle for one earring with a stroke weight of 6pt and a stroke color of a light orange (C=0, M=35, Y=85, K=0). Then Copy (Command + C) and Paste in Front (Command + F) the ellipse into the "Earring Top" folder.
Using the Free Transform Tool (E) slightly alter the shape so it doesn't look like it's been completely duplicated.
Step 40
Copy (Command + C) and Paste in Front (Command + F) the hoops individually so you have two shapes in each of the earring layer folders. With the top duplicate, go to Object > Expand.
Using the Pen Tool (P) draw over the section of the hoop which would not be visible. Using Pathfinder, Minus Front. Select both shapes and create a Clipping Mask (Command + 7). The modified shape will be the clipping path.
Step 41
Within the clipping mask group for each earring, Copy (Command + C) and Paste in Front (Command + F) the hoop. Change the Blending Mode to Screen and the Opacity to 50%. Change the stroke weight to 4pt.
Duplicate the hoop again and change the stroke weight to 2pt and the stroke color to white.
Now go back to the original hoop and change the stroke color to a brown shade (C=30, M=50, Y=75, K=10). Repeat this for the other clipping mask.
Step 42
I want the hoops to be more golden, so go into the clipping mask again and select the original hoop shape. Copy (Command + C) and Paste in Front (Command + F) and drag it to under the clipping path. Change the Blending Mode to Color Burn and change the stroke color to the light skin shade (C=5, M=15, Y=15, K=10).
Step 43
The hoops will have a slight shadow cast by the ear/hair/side of the face. To add this shadow, create a dark brown transparent radial gradient (C=50, M=70, Y=80, K=70) and position shapes within the clipping masks to represent the shadow. Set these shapes to Blending Mode Multiply and Opacity 50%.
There will also be highlights on the earrings. Using the highlighting radial gradient used for the hair shading (C=25, M=25, Y=40, K=10) add those to the clipping mask. Set them to Blending Mode Color Dodge and Opacity 50%.
Step 44
In each one of my portraits, I like to add a mole to the skin. I believe there is beauty found in our "flaws." These are easy to illustrate.
Using the transparent radial gradient which I used for the darker skin shading, use the Ellipse Tool (L) to draw a circle. Using the Free Transform Tool (E) to reshape and change the angle of the circle.
Copy (Command + C) and Paste (Command + V) the circle to slightly overlap. Change the Blending Mode of both circles to Multiply and Opacity to 25%.
Step 45
Go into the "BG" layer folder, use the Rounded Rectangle Tool to draw a rectangle in the background. I've decided to add a complimentary gradient to the background to help bring out the blonde tones in her hair, so I've opted for a light blue (C=10, M=0, Y=0, K=0) to medium blue (C=70, M=15, Y=0, K=0).
Step 46
Finally, use the Artboard Tool (Shift + O) to reshape the artboard so it gives a thick white border around the portrait.
Conclusion
Creating this portrait has been a lot of fun, blending two passions into an artform. Just remember all the little details and adding your own style can make a unique looking portrait.
For those that are interested, I play a Shadow Priest Blood Elf on the EU server of Thunderhorn... and my character is called Vectoria. Even when I'm playing games, I've still got vector art with me.
I hope you're enjoying Cataclysm, see you at level 85!
