Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create a Vector, Zombie Witch Illustration

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

In this tutorial I will show you how to create a zombie in the style of Left4Dead's scary witch! We cover a complete workflow, starting with a basic photo manipulation in Photoshop, through to the final illustration in Illustrator. Our result is a scary witch that is 100% vector!


Introduction

There are many ways to illustrate zombies. Vectortuts+ has two other fine tutorials on how to create one. However in this tutorial I'm going to create a detailed female zombie, starting from using a stock image and manipulating it, all the way to vectoring it.

I'm a big fan of Left 4 Dead (1 and 2!) and like to play it a lot in my spare time. One of the zombies in that game which scares the life out of me is the witch! Fans of the game series will know she is a calm zombie, but when disturbed can reek havoc. She is often found sitting on the floor, rocking backwards and forwards and crying. She's pale and almost iridescent in appearance. I'm going to use this as inspiration for my zombie illustration. I'm going to be using stock by the fabulous Natalie Paquette aka fetishfaerie-stock on deviantART.


Step 1

When picking the stock image for a zombie, I'm going to try to avoid the standard evil looking face. I want to add extra elements to it and make the image more of my own. I'll add the elements myself via photo manipulation in Photoshop. The key thing I'm looking for is a unique looking pose and a haunting look in the eyes, usually staring straight at the camera.

I've chosen the following image:



Step 2

When I modify a stock image in Photoshop, it's never perfect. I'll be using what I create in Photoshop as a reference, so the tidying up of the piece will take part during the vector stage. So if you're not a whiz with Photoshop, that is fine!

Open the image in Photoshop. I'm going to increase the size of the canvas so I can roughly sketch out the elbow which has been chopped off the side. To do this go to Image > Canvas Size and then I've used the following settings:



Step 3

Duplicate the "Background" layer by drag and dropping the layer onto the Create a new layer button in the layer palette. This makes it easier and quicker to revert back to the original image should you make any mistakes. Hide the original Background layer for now.

Using the Brush Tool (B) with a black color and a small brush, sketch the outline of the missing section of the elbow.



Step 4

Create a new layer and using the Eyedropper Tool (I) and the Brush Tool (B), select the colors from the elbow area and draw in where the shadows and highlight are. Although this is not really required, it makes it easier to look at when you're vectoring.

Use the Smudge Tool to just blur the edges and mix the colors. Keep in mind this doesn't have to look perfect at this stage, as this image will be our reference for vectoring.


Merge these layers now by going to Layer > Merge Visible. Now Make the Background layer visible.


Step 5

Now I'm going to use the Lasso Tool (L) with a 10px feather to draw around the hand. Use the Move Tool (V) to rotate the hand slightly so the fingers are pointing towards the bottom of the canvas. Don't rotate it too much, otherwise the angle of the hand might not look as natural as it should. It would require to draw further detailing of the hand than needed to correct it.



Step 6

Use the Smudge Tool to clean up the edges of the wrist area and use the Brush Tool (B) with a brown color to just cover up the hand showing underneath. This just makes it easier on the eyes to work from when we get to vectoring later on.



Step 7

One of the features of the witch is long, skinny fingers with long claw like nails. So I'm wanting to extend the length of the fingers on the reference image. To do this I'm going to use the Lasso Tool (L) and draw around each section of the fingers. Use the Move Tool (V) to increase the length of it and move it into place.




Repeat this for each one of the fingers.



Step 8

Using the Smudge Tool and Brush Tool (B), tidy up the areas around the hands to make it easier to work from. I've created a new layer underneath the reference image to add color from the Brush Tool (B).



Step 9

I'm going to make her eyes bigger to create more of a focal point to them. Again using the Lasso Tool (L) and the Move Tool (V), I'm going to select around each eye (including the eyebrow) and make them slightly bigger.




Step 10

Create a new layer above everything and using the Brush Tool (B) with black, sketch out her t-shirt.



Step 11

Save the reference image with about an 800 width and we're ready to start work in Illustrator. So I'm going to start a new Basic CMYK portrait document and place the reference image onto the Illustrator document's canvas. Use the Free Transform Tool (E) to resize and place the reference image.



Step 12

Double-click on "Layer 1," rename it to "Reference," and click on OK. Lock the layer. Now create a New Layer and rename it "BG." Inside of this, using the Rectangle Tool (M); draw a white filled rectangle that covers the canvas and reduce the Opacity to 30%. Lock the layer.

Create a New Layer and rename it "Bases." Command–click on the eye icon to set it to preview.



Step 13

Using the Pen Tool (P), I'm going to draw the bases for the skin and t-shirt. For the skin I'm going to use a gray color with a hint of red (C=20, M=20, Y=15, K=0) and for the t-shirt I'm going to use a medium gray color (C=0, M=0, Y=0, K=40).

Although the skin area for the arms are attached to the face area, I'm going to create separate shapes for those. The reason being is I want to layer the hair later on and there is an area of her t-shirt on the breast. Below are the shapes I've created and the order of the paths.




Step 14

Lock the "Bases" layer folder for now. Create a New Layer and rename it "Shadow." We want to keep the "Bases" and the "Shadow" layer folders in preview so it's easier to trace from the reference and see the edges of the base layers.

Using the Pen Tool (P), I'm going to draw the darker areas of the skin first. Use the same gray with a hint of red for this. I'm going to focus first on the right arm/back. I've drawn the following shapes:





Step 15

Select All the shapes you've created (Command + A) and change the Blending Mode to Multiply and the Opacity to 15%. Then Group them (Command + G).



Step 16

Unlock the "Bases" layer folder and Copy (Command + C) and Paste in Front (Command + F) the base shape used for the right arm. Color this shape black. Drag and drop this shape in front of the group you created in the "Shadow" folder.

While the group and the black right arm shape are selected, go to Object > Clipping Mask > Make (Command + 7), as this will trim the edges for you. Lock the group.



Step 17

Repeat stages 14 to 16 for the left arm. Below are the shapes I created before making a clipping mask.





Step 18

Repeat stages 14 to 16 for the face. Below are the shapes I created before making a clipping mask.





Step 19

Drag and drop the clipping masks from the "Shadow" layer folder into the "Bases" layer folder, so each mask is on top of it's intended base. I'm now left with the following:



Step 20

If you noticed on the image in Step 19, there isn't as much detailing in the hand. The reason is because it's in a deeper cast shadow than the rest of the image. So in this stage, we're going to add darker shadows to give the impression of more detail and depth. Use the Pen Tool (P) with the fill color of a darker gray (C=45, M=40, Y=35, K=5). Start with the right arm/back:




Step 21

Select All (Command + A) of the shapes for the darker shadow and change the Blending Mode to Multiply with an Opacity of 15%. Then Group the shapes (Command + G).

I'm then going to drag and drop this group into the clipping mask for the right arm/back:



Step 22

Repeat steps 20 and 21 for the left arm:




Step 23

And then for the face:




Step 24

After all the groups have been moved into the clipping masks, I'm left with the following:



Step 25

Now it's time to draw the highlights on the skin. Use a similar process to the ones listed above, which consists of using a gray color with a hint of red (C=20, M=20, Y=15, K=0) and changing the Blending Mode to Overlay and the Opacity to 15%.

First the right arm/back:





Step 26

Now the left arm, although it needs very little:



Step 27

And finally the face highlights:




Step 28

Once the groups are moved into the correct clipping masks, I've got the following:



Step 29

Create a radial gradient with the following three colors: yellow as the central color (C=0, M=0, Y=100, K=0), light orange (C=0, M=35, Y=85, K=0) and blue as the outer color (C=70, M=15, Y=0, K=0) and add it to your Swatch palette.

Go into the "Bases" layer folder and Copy (Command + C) and Paste in Front (Command + F) the skin bases. Make sure that the copied shape is in between the original shape and the clipping mask group.

Apply the created gradient without modifying the shape/source and reduce the Opacity to 30% and the Blending Mode to Screen.



Step 30

Create a transparent radial gradient using yellow as the central color (C=0, M=0, Y=100, K=0) at 100% opacity to magenta as the outer color (C=0, M=100, Y=0, K=0) at 0% Opacity.

Create the below shapes using this gradient in the "Shadow" layer palette. Reduce the Opacity to 30% and change the Blending Mode to Overlay. Select all (Command + A) and then Group them (Command + G). Drag and drop the group into the "Bases" folder, below the t-shirt base layer shape.



Step 31

Create a New Layer above the "Bases" layer and rename it "Claws." As the layer folder name suggests, I'm going to talk you through creating claws which are one of the witches main characteristics. I'm going to go through the steps of one claw and then you will need to repeat the process for each of the other visible claws.

Using the Pen Tool (P), draw the following shape for a nail with the base layer fill color of a gray with a hint of red (C=20, M=20, Y=15, K=0).



Step 32

Copy (Command + C) and Paste in Front (Command + F) the nail shape. Fill it with a black to black transparent radial gradient with the center at 0% Opacity. Use the Gradient Tool (G) to shape and position the gradient as below and then change the Blending Mode to Multiply.



Step 33

Create a new shape which covers the whole nail and the top portion of the finger tip. Reverse the Gradient on the Black to Black transparent radial gradient. Using the Gradient Tool (G) position the gradient to cover the nail and fade into the finger tip. Change the Opacity to 80% and the Blending Mode to Multiply.



Step 34

Copy (Command + C) and Paste in Front (Command + F) this shape and modify the gradient by replacing the black for a red (C=15, M=100, Y=90, K=10). Move and shape the gradient so it covers the nail but there isn't as much on the finger tip. Change the Opacity to 70% and the Blending Mode to Color Burn.



Step 35

Using the Pen Tool (P), draw a shape to where the shine on the nail is going to be. Add a transparent radial gradient using gray with a tint of red (C=20, M=20, Y=15, K=0) with the center at 100% and the outer as 0%.

Using the Gradient Tool (G), adjust the source of the gradient to the side of the shape so it will produce the below result. Change the Opacity to 50% and the Blending Mode to Screen.



Step 36

Draw a shape at the base of the nail using gray with a tint of red (C=20, M=20, Y=15, K=0). Reduce the Opacity to 10% and set the Blending Mode to Screen. Then Select All of the elements for the nail (Command + A), Group (Command + G) and then lock the shape.



Step 37

Repeat stages 31 to 36 (excluding creating a new layer folder) for each one of the claws. Lock the layer. Below is what I have so far:



Step 38

Create a New Layer above the Claws layer and rename it "Hair." Using the gray with a hint of red (C=20, M=20, Y=15, K=0), draw the base shape for the hair using the reference image as a rough guide with the Pen Tool (P).



Step 39

Copy (Command + C) and Paste in Front (Command + F) the hair base shape and fill it with the gray to gray transparent radial gradient with the outer color at 100%. Set the Blending Mode to Screen and the Opacity to 80%. Lock this and the hair base layer.



Step 40

You will need the brushes from my Width Profile Brush tutorial for the next section.

Set the gray with a hint of red (C=20, M=20, Y=15, K=0) as the stroke color and weight as 3pt. Use the Width Profile 1 brush to draw a strands of hair from the roots out using the Paintbrush Tool (B). Use it in a painting motion going backwards and forwards.

Select All (Command + A) and set the Blending Mode to Overlay with the Opacity of 30% and Group them (Command + G). Lock the group.



Step 41

Using the same brush options, use the medium gray (C=0, M=0, Y=0, K=40) with the Blending Mode of Multiply and Opacity of 10% to draw in strands around the roots and hair line. Select All (Command + A), Group (Command + G) and lock the group.



Step 42

Use the same brush options, but change the Stroke Weight to 5pt, use the medium gray (C=0, M=0, Y=0, K=40) with the Blending Mode of Multiply and Opacity of 10% to draw in strands all over to give a more messy and dirty look. Select All (Command + A), Group (Command + G) and lock the group.



Step 43

Use the same brush options, but change the Stroke Weight to 1pt. Use the gray with a hint of red (C=20, M=20, Y=15, K=0) with the Blending Mode of Screen and Opacity of 80% to draw strands which you think might be caught by light, including some draping on the face. Select All (Command + A), Group (Command + G) and lock the "Hair" layer folder.



Step 44

Create a New Layer above the "Claws" layer and rename it "Eyebrows." Use the Paintbrush Tool (B) to draw in the eyebrows. Set it with the Width Profile 1 brush, Stroke Weight 1pt, gray with a hint of red (C=20, M=20, Y=15, K=0) stroke color and on Multiply 35%. Select All (Command + A), Group (Command + G) and lock the group.



Step 45

Add highlights to the eyebrow hairs using the same brush options with the Blending Mode of Color Dodge and Opacity of 20%. Select All (Command + A), Group (Command + G) and lock the "Eyebrows" layer folder.



Step 46

Create a New Layer below the "Eyebrows" layer folder and rename it "Face Details." Using the Pen Tool (P) with the fill color of medium gray (C=0, M=0, Y=0, K=40), draw the following shapes to give the impression of aged, puffed up skin. If you want your witch to appear youthful, don't include these shapes.

Select All (Command + A) and change the Blending Mode to Multiply and the Opacity to 15%. Then lock the "Face Details" layer folder.




Step 47

Create a New Layer above the "Face Details" folder and rename it "Eyes." Now I'm going to create some glowing eyes in the style of the witch. Using the Pen Tool (P) create the following shapes for the eyes with the fill color of deep red (C=10, M=100, Y=90, K=10) and change the Blending Mode to Multiply.



Step 48

The next shapes are medium gray (C=0, M=0, Y=0, K=40) with a Screen of 70%:



Step 49

To give the eyes a feminine outline, I've added these shapes which are deep red (C=10, M=100, Y=90, K=10) on Color Burn at 50%:



Step 50

Using the Ellipse Tool (L), draw two ellipses which go beyond the eye area. Fill them with the gray and a red hint of transparent radial gradient with the outer edge at 0% Opacity. Change the Blending Mode to Color Dodge.



Step 51

Select the two ellipses and Copy (Command + C) and Paste in Front (Command + F). Change the colors in the Gradient palette/options window to the center color at 100% being yellow (C=0, M=0, Y=100, K=0) and the outer 0% color as the deep red (C=10, M=100, Y=90, K=10). Change the Blending Mode to Color.



Step 52

Copy (Command + C) and Paste in Front (Command + F) the new gradient ellipses. Change the center color of the gradient to deep red (C=10, M=100, Y=90, K=10) and the Blending Mode to Overlay.



Step 53

Lock all the layer folders apart from the "Shadow" folder. We're going to work on the shading for the t-shirt. You will need to imagine where the shadow of the top is and any creases in the top. To do this you have to work out where the light source is. On this image the light is coming from up above to the left and there would be glow from the eyes. As the glow from the eyes would not effect the t-shirt, the light would be from above.

Based on this, the peaks in the fabric of the top will have more of a highlight and the side of the top is where the shadow will mainly be.



Step 54

Based on the diagram above, I'm going to work on the highlights first. Using our gray with a hint of red (C=20, M=20, Y=15, K=0) transparent radial gradient with the outer edge at 0% Opacity and the Pen Tool (P). I've drawn the below shapes and set them to Blending Mode Screen and Opacity 15%.




Step 55

Select All of the highlight shapes (Command + A) and then Group them (Command + G). Go into the "Bases" layer folder and Copy (Command + C) the t-shirt base layer. Lock the "Bases" layer folder.

Paste in Front (Command + F) the t-shirt shape in the Shadows layer folder and color it black. Then select the group with highlights and base layer for the t-shirt and create a clipping mask (Command + 7). Lock the group. Below is what I have:



Step 56

Using the same gradient, I'm going to begin adding the shadow to the t-shirt with the Blending Mode at Multiply and Opacity of 30%. Then Select All (Command + A) and Group these shapes up (Command + G), and drag and drop them into the clipping mask.




Step 57

Go into the Clipping Mask and select the t-shirt shape and Copy (Command + C) and Paste in Front (Command + F) the shape. Fill it with the same gradient on Multiply at 60%, position the gradient so it adds more shadow to the side of the t-shirt. Then drag and drop this shape into the clipping mask and lock the group.



Step 58

Use the Paintbrush Tool (B) draw the following lines to add texture and subtle shadow to the t-shirt. Set the Stroke Weight to 0.5pt, Width Profile 2 brush, Stroke Color medium gray (C=0, M=0, Y=0, K=40), Blending Mode Multiply and Opacity of 20%.



Step 59

Repeat the above but set the Blending Mode to Screen.



Step 60

Change the Stroke Weight to 2pt, Blending Mode to Normal and the Opacity to 50%. Now draw some zig zag shapes along the hem of the t-shirt. This will make the edges look less smooth and give a battered look to the t-shirt. Then lock the "Shadow" layer folder.



Step 61

As I've previously mentioned, the eyes do produce a glow so we'll want this to reflect on the areas close to the eyes. Create a New Layer above all the other layer folders and rename it "Glow."

Create a transparent radial gradient with Yellow (C=5, M=0, Y=95, K=0) at 100% in the center and Magenta (C=0, M=100, Y=0, K=0) at the edge at 0%. I'm going to draw some shapes on the arm in front, the hand just underneath the face and on the face with the Blending Mode Overlay and 35% Opacity.


If you're wanting your zombie witch to be youthful, make the below shapes around the eyes and at the top of the nose one shape. The reason why these ones are smaller shapes is to add highlights to the wrinkles.



Select All of the highlighting shapes (Command + A), Group them (Command + G) and the "Glow" layer folder.


Step 62

Create a New Layer underneath the "Bases" layer folder and rename it "Under Shadow." I'm going to use Blends to create shadows underneath our witch. Remembering where the light sources on the image are, keep this in mind while adding your shadow.

Using the Pen Tool (P) with the fill color of an almost black/gray (C=45, M=40, Y=35, K=90) I'm going to draw where the shadow will start from. This will be within the main body of the illustration as I don't want this bold color to be seen. I'm wanting the shadow to blend from this shape.



Step 63

Copy (Command + C) and Paste in Back (Command + B) this shape and set it to 0% Opacity. Resize it using the Free Transform Tool (E) and using the Direct Selection Tool (A) on the points to move them to where the shadow is going to fade to.

Select both shapes and Blend them together (Command + Alt + B). Go to Object > Blend > Blend Options and change it to Specified Distance, then change the value to 1.



Step 64

Repeat steps 63 and 64 for the shadow of the right arm and underneath the torso. Remember due to the perspective that the shadow cast for the right arm will appear longer as it's in front of everything else. Change the Blending Modes to Multiply and Opacity to 75% for all three of the blends.



Step 65

Create a New Layer above the "Bases" layer folder and rename it "Blood."

Go into your Brush palette and open the brush set Artistic > Artistic_Ink. Within this library you will find a variety of ink drop brushes, click on them and they will be added to your brush palette. Set the Paintbrush Tool (B) to a deep red (C=10, M=100, Y=90, K=10) for the stroke with a Blending Mode of Multiply and Opacity at 20%. Add your blood splatters so they are positioned on the skin and top.



Step 66

Select All (Command + A), Copy (Command + C) and Paste in Front (Command + F) the blood splatters. Expand them to shapes by going to Object > Expand.
Fill them with a deep red transparent radial gradient with the center at 100%, and change the Blending Mode to Color Burn and the Opacity to 75%.
Using the Direct Selection Tool (A); click on the shapes which go beyond the skin and delete them. Then lock the layer folder.



Step 67

Unlock the "BG" layer folder, and using the Rectangle Tool (M), add a rectangle to cover the canvas with the fill color of medium gray (C=0, M=0, Y=0, K=40).

Using the same technique for the shadows, add a spotlight using Yellow (C=0, M=0, Y=100, K=0), set the Blending Mode to Screen. Then lock the layer folder.



Step 68

Create a New Layer above the "Hair" layer folder and rename it "Vignette." Create a shape using the Pen Tool (P) to cover the bottom of the back and fill it with a medium gray transparent radial gradient (C=0, M=0, Y=0, K=40) with the center at 0% Opacity.

Using the Gradient Tool (G), position the gradient so it gives the impression of the back of the witch fading into the shadows.



Step 69

Using the Rectangle Tool (M) apply the same gradient over the entire canvas and set the Blending Mode to Multiply. Using the Gradient Tool (G) shift the center of the gradient towards the top, as this is where the light would be more intense. Lock the layer folder.



Step 70

Create a New Layer above all the layer folders and rename it "Textures." Using a technique I've previously written a tutorial about adding vector noise, to create this texture. Use the Rectangle Tool (M) to cover the canvas using this texture. Change the Blending Mode to Hard Light and the Opacity to 25%.



Step 71

Go into the Brush Palette use a brush which can be found in the Artist > Artist_ChalkCharcoalPencil, which is the top brush "Chalk."

Using the Paintbrush Tool (B) with the Stroke Weight of 10pt, Stroke Color of gray with a hint of red (C=20, M=20, Y=15, K=0), draw strokes across the canvas both horizontally and vertically.
Then set the strokes to Multiply at 10%.



Conclusion

Starting with a simple and very rough photo manipulation, you can create a great zombie in the style of the Left4Dead witch. Not to mention, it is 100% vector!


Advertisement