Creating a Mysterious Cheshire Cat in Adobe Illustrator

In this tutorial, you will learn how to break away from Adobe Illustrator and use a combination of programs to create a vector image with a soft painted finish. Starting with a digital sketch, we will use Flash to begin drawing our image, bring it over to Painter to color it, then finish off with Photoshop for some final color tweaking.

A graphics tablet would help immensely during the painting stage, but it's fine if you don't have one.

In this tutorial you will learn how to create a detailed vector illustration based on the Cheshire Cat, including how to manipulate a reference image to help with your initial illustration and how to use custom brushes to create a fur effect.

Whenever I think of the Cheshire Cat in Alice in Wonderland, I think due to my age, I don't see the new Tim Burton Cheshire Cat, but the Disney version. The pinks and purples... the big yellow eyes and those bold stripes against a dark background. So what I'm going to show you is my own version of the Cheshire Cat and how to draw it yourself. Although this tutorial is achievable with a mouse, I highly recommend using a graphic tablet as it will make the drawing the fur stages less time intensive and may get a better result.

Step 1

The initial steps are to do with preparing your reference image ready to take over to Illustrator. Although I'm using Adobe Photoshop CS4, I'm using simple techniques which you can find in a variety of other photo manipulation programs.

I've picked a photo of my own cat, Sam, for this tutorial. The specific photo appealed as I wanted a clear balanced shot of the face. Although this will be manipulated in Photoshop and used as a reference, it's only used to help as a guide for direction of fur and where the facial features will be. This is because I'll be using a different pattern of fur coloring to make it similar to the Cheshire Cat.

I'm going to duplicate the Background layer Layer > Duplicate Layer. Hide the original Background layer as we're just going to work on the "Background copy" one.

Step 2

I'm going to open it in Photoshop and use the Polygonal Lasso Tool (L) to draw around the face. As it's going to be used strictly as a reference, it doesn't need to be 100% neat. I've set the Feather to 10px and drawn around it like so.

I remove the background of the image by now going to Select > Inverse and hitting Delete on my keyboard. This will remove the background of the image and leave you with just the head.

Step 3

Now Deselect (Select > Deselect) and by using the Move Tool (V), rotate the head so the eyes are horizontal. I'm going to duplicate this layer again so Layer > Duplicate Layer, incase I make a mistake on the next step, I can easily start again.

Step 4

Using the Polygonal Lasso Tool (L) I'm going to draw around the eye.

Then with the Move Tool (V) and it still selected, I'm going to make the eye bigger. I do this by holding down Shift + Alt and grabbing a corner. This will make it bigger in even directions.

Then I'm going to move the eye a away from the nose.

Repeat this process on the other eye and you should have an image similar to the one below.

Step 5

I'm going to enlarge the mouth/nose area. There is one thing with the Cheshire Cat and that is that he has big eyes and a big toothy grin! So I've already made the eyes big, time to draw around the mouth/nose area with the Polygonal Lasso Tool (L) and use the Move Tool (V) to make the mouth bigger as shown below. I want to merge these layers now, so Layer > Merge Visible.

Step 6

Using the Crop Tool (C) I'm just going to crop around the head.

Then I'm going to Save for Web by going to File > Save for Web & Devices or Alt + Shift + Control + S and save it as a .jpg at 50% of it's size and just name it Sam.jpg. Below is my finished cat head ready to use as a reference in Illustrator.

Step 7

Now I'm going to start a New document in Adobe Illustrator. I'm using the Basic CMYK document with the resolution changed to 300dpi. The reason I'm doing this is my aim at the end is to print out the portrait of Sam as the Cheshire Cat. Below are the settings I've used.

I place the reference image of the cat head by going to File > Place. Using the Free Transform Tool (E), I'm just going to resize the reference by holding Shift + Alt and grabbing a corner and dragging it inwards to give an even resize. Below is how my canvas is looking.

To keep my layers organized, I'm going to double click on the Layer folder and just rename it "Reference". In this folder, I'm going to keep all the elements I'll use as references in there.

Step 8

I want to draw where the Cheshire Cat's arms are going to be. So using the Pen Tool (P), I'm going to draw one arm first. Have the fill color set to null and the stroke color set to black. I'm just going to change the thickness of the line in the Stroke palette to 60pt and round the corners and ends as shown below.

Then I'm going to Copy (Control + C) and Paste (Control + V) this arm.

Then I'm going to flip it vertically by going to Object > Transform > Reflect and set it to Vertical and click on OK.

Then holding down Control and then click on the line, drag it into place.

Step 9

This is, for now our starting point. So locking the "Reference" layer, click on Create New Layer and rename it to "BG". Using the Rectangle Tool (M), draw a white fill, null stroke rectangle over the entire canvas. Reduce it's transparency to 30%. Lock the layer now. I use this to mute the "Reference" layer and by using the hide/unhide option of a layer, it's quick to apply it and take off.

Create New Layer again and rename it to "Base". This is the layer I'm going to put the base layers in. Create New Layer again and rename it to "Preview". Double click on the layer and untick Preview. This is so when I draw anything I want to see the "Reference" underneath, I can view it in Outline or Preview mode as it's known. In order to use the "Preview" layer effectively, you need to be comfortable dragging shapes from one layer to another.

Below is what you should have layer wise.

Step 10

In the "Preview" layer, I'm going to draw the base layers for the head and the arms. They don't need to be perfect as they are only guides to be used. I'm setting the fill color as black and the stroke as null. I'm going to use the Pen Tool (P) for this. Below is what you should have.

Step 11

I'm going to now draw the bases for the eyes and the mouth area. Firstly the eyes. With the fill color as orange (C=0, M=35, Y=85, K=0) and the stroke as null, draw the two shapes for the eyes.

Then for the mouth area, I'm going to use a purple/pink color (C=0, M=75, Y=35, K=10) with the stroke as null.

Step 12

Thinking of the Cheshire Cat from Disney, I'm going to draw the purple/pink stripes on the arms. Have the stripes larger on the outside and getting thinner towards the arm fold. So using the fill color as this C=35, M=100, Y=35, K=10 – which is a bolder pink/purple and the stroke as null, begin drawing the base of the stripes. I've drawn the base shapes on one arm, then selected them, Copied (Control + C) and then Pasted (Control + V) and then I flipped them vertically (Object > Transform > Reflect > Vertical selected then click on OK). Below is what I am left with.

Drag these shapes now into your "Base" layer, and you should be able to see this.

Step 13

I'm going to use a brush to draw fur around the outside of the base layers. I need to create a new brush and it's the same as what is featured in one of my recent tutorials, Create CS5 Width Profile Brushes in any Version of Adobe Illustrator CS. The specific brush we're going to use is the first brush "Width Profile 1". You will need your Fill color to be Black (C=0, M=0, Y=0, K=0) and your Stroke color to be null. Using the Ellipse Tool (L), click once on the canvas. This will give you a dialog box. Input a 12 pt Width and 3 pt Height and click on "OK".

This will give you a flat circle on the canvas. Zoomed in at 1600% it should look like this.

Hold down Shift + C to get the Convert Anchor Point Tool and click once on the anchor points on the sides of the circle. You should then be left with the below shape.

Select your shape and click on the button at the bottom of the Brush palette which says "New Brush". Select New Art Brush and then click on "OK".

You will be presented with a window with several options. Change the width to 30%. Change the Method to "Tints", this will mean that the style will take on the same color you have selected as the Stroke color. Click on "OK".

Step 14

Now I'm going to use this brush to draw short strokes of hair around the shapes, the same color as the fill color of the shape. I do this by using the Paintbrush Tool (B) and setting it to 50% opacity and have the new brush selected from your Brush palette.

Lock the "Base" layer folder and Create New Layer. Name this "Mouth" and with the fill color as null and the stroke as the pink color (C=0, M=75, Y=35, K=10) start drawing tufts of fur around the shape as shown below.

Continue to do this around the whole shape, following the direction of the fur from the reference.

Step 15

Create New Layer infront of the "BG" layer folder and call it "Black". Inside of it, using the Rectangle Tool (M), draw a black filled shape to cover the whole canvas. This will make it easier to see the fur for the next part. Lock the "Mouth" folder and Create New Layer and name it "Arms". Using the same above method but changing the stroke color to C=35, M=100, Y=35, K=10, draw the fur around the edges of the arm bases.

I would recommend not copying one arm and pasting it to the other arm. The reason being that although you want the stripes to be symmetrical, the furs appearance should differ slightly. By doing the fur edges separately and not copied, this ensures they do have that little difference. You should be left with the following. It's worth noting that the fur is more refined around the paws, as it would be on a real cat. Keep this in mind for future steps.

Step 16

Create New Layer and rename it "Details". Using the same brush and color C=35, M=100, Y=35, K=10, set the blend mode to multiply with the opacity of 10%, I'm going to draw on the mouth area where the cheeks and mouth will be. Using the same method I used on the edges of the fur bases, you should have the below.

Step 17

The same as above, but with the opacity as 40%, I'm going to draw in the toes on the paws. You should then have the below.

Step 18

Lock the "Details" layer and Create New Layer and rename it "Fur Mouth". So you know how my layer order is right now to compare with yours, here is what I have so far.

Now using the stroke color C=0, M=75, Y=35, K=10 and the fill null, I'm going to draw within each one of the shapes using our homemade brush a fur sort of texture. The initial pieces of fur I'll set the blend mode to Screen and the Opacity to 30%. Now draw the fur in the direction of the fur from the reference. Remembering that towards the middle where the cheeks meet the nose, the fur is shorter, and outwards the fur is longer.

As you can see with the above image, I've overlapped a lot of the fur. This is so it gives a more multicolored tone in the fur and makes it look more detailed. If you zoom in further, you can see how dense the fur drawing is to give you a better idea.

Now on purpose, I've not drawn as much under the mouth area. This is because the Cheshire Cats grin is going to be put there. For now, lock this layer.

Step 19

Create New layer and rename it "Fur Arms", Using the stroke color C=35, M=100, Y=35, K=10 and the fill null, I'm going to draw within each one of the shapes for the arms, using our homemade brush a fur sort of texture. The initial pieces of fur I'll set the blend mode to Screen and the Opacity to 15%. You should be left with the following.

Step 20

Now as you may have noticed on the previous image, the fur towards the edges of the arm stripes and around the mouth with have hints of white. This is because with the layer blend mode of Screen it's adding white tones to the lower opacities of your fur strands. I remove this element by tinting the background.

Create New Layer above the "Base" layer folder and rename it "BG Tint". For the arms, using the Pen Tool (P), with the fill color of C=35, M=100, Y=35, K=10 and stroke of null, draw around the area of the arms roughly, making sure it would cover all fur strands.

Now set the Blending Mode to Multiply and the Opacity to 70%. You should now have the below.

I'm now going to draw a shape around the mouth area and then set the Blending Mode also to Multiply but only set the Opacity to 25%.

Step 21

I'm going to add further tones to the fur. To do this I'm going to Create New Layer on top of the "Fur Arms" layer and rename it "Fur 1". Using the color C=20, M=75, Y=35, K=10 on stroke and fill on null, I'm going to use our homemade brush on Blending Mode set to Multiply and Opacity 40%.

Draw the fur strands in areas where you've not drawn as much fur as with the lighter strands. Also add more strands towards the shaded areas – where the cheeks meet and under the cheeks. I'm also drawing strands where the whiskers will come out of the cheeks as shown below.

Now I'm going to add some strands using the same settings and brush on the arms, in the same layer folder. I'm adding fur around the toes on the paws and on each of the stripes to give the impression of shadow and depth. It will help make them look less flat.

Lock the layer.

Step 22

I'm going to add some highlights to the fur. To do this Create New layer and name it "Fur 2". Sticking with the same color, just change the Blending Mode to Screen and Opacity to 20%. Starting at the face add highlights on top of the cheeks and in random places. On the arms, add it in the center section of the stripes, where there isn't any shadow. You should have the below when finished.

Lock the layer.

Step 23

I'm going to start on the mouth now, so I'm going to Create New Layer between the "Base" and "BG Tint" layer and call it "Mouth". With the Pen Tool (P) I'm going to draw a shape to where the teeth are going to go. With the fill color on C=0, M=0, Y=0, K=90 and the stroke color as null draw the below shape.

As you can see there are some hairs overlapping onto the dark. First lock the "Mouth" layer folder. The fur looks like it belongs in the "Fur Mouth" folder, so unlock this and use the Selection Tool (V) and click on the hairs which are overlapping and hit Delete on your keyboard to clean it up. Lock the layer afterwards. Repeat this for any further layers which have the overlapping fur in. You should be left with the below.

Step 24

Working in the "Preview" layer, I'm going to draw the first tooth with the fill of C=0, M=0, Y=10, K=5 and the stroke as null.

Then I'm going to Copy (Control + C) and Paste (Control + V) and using the Selection Tool (V) to move the teeth into place as below.

Holding down Control with the Selection Tool (V), select the two fangs, which is the third on the left and right of the mouth and drag them to the top of the layer. Using the Free Transform Tool (E), hold down Shift + Alt to increase the size of the fangs by grabbing the corner. You should have the below.

Step 25

Using the Selection Tool (V), I'm going to select one of the smaller teeth and Copy (Control + C) and Paste (Control + V). I'm going to flip this horizontally by going to Object > Transform > Reflect and selecting Horizontal and clicking OK.

Then I'm going to Copy (Control + C) and Paste (Control + V) this shape, using the Selection Tool (V), moving the shapes into place for the bottom teeth.

Step 26

Using the Selection Tool (V), I'm going to select all the teeth and Copy (Control + C) and Paste in Front (Control + F). This is duplicating the teeth. I want to apply a gradient on top of the teeth to give them more of a depth. In the Gradient palette, I'm going to create a Radial gradient with the below settings.

The pale yellow is the same color as the teeth which is C=0, M=0, Y=10, K=5 and the grey is C=0, M=0, Y=0, K=50. Double click on the "Preview" layer and rename it "Teeth" and put a tick in Preview. Using the Gradient Tool (G), I'm going to move the position of the center of the gradient towards the tips of the teeth as shown below.

Step 27

Using the Selection Tool (v), I'm drawing a rectangle to select all shapes for the top set of teeth.

I'm then going to group them by going to Object > Group (Control + G). Then I'm going to repeat this for the bottom set of teeth. So now I've got two groups. In my screen shots you will see that the bottom teeth are overlapping the top. So I'm going to drag the group with the top teeth on top of the bottom.

Step 28

I'm going to create a new gradient with the below settings.

This is a transparent Radial gradient with C=0, M=0, Y=10, K=5 on either end (the yellow we've used for the teeth). Then using the Pen Tool (P) I'm going to add some shapes towards the tips of the teeth to give them a subtle texture. I'd avoid copying and pasting these shapes as you don't want them to look like duplicates. I've set the Blending Mode to Color Dodge.

I'm going to show you a zoomed in look of some of the teeth to show you that when you have teeth overlapping, to almost draw your shapes as if there is shadow taking away some of the detail.

I'm now going to group these shapes all together with the two earlier groups of teeth by going to Object > Group (Control + G).

Step 29

I'm going to unlock the "Mouth" layer folder which contains the dark grey shape and Copy (Control + C) and Paste in Front (Control + F) over the teeth group in the "Teeth" layer folder. I'm going to use this to create a Clipping Mask for the teeth. So while the mouth shape is selected, also select the teeth group and go to Object > Clipping Mask > Make and you should have the below.

Then I'm going to drag the whole "Teeth" layer to above the "Mouth" layer.

This should give the teeth now a bit of a tint. Unlock up the "Mouth" layer folder which has the pink fur in. Select one of the strands of fur in this layer. This will give you the same settings to use the Paintbrush Tool (B) to draw strands of fur overlapping the edges of the mouth/teeth area outline.

Repeat this process by opening up the "Detail" layer.

Step 30

Going into the "Mouth" layer folder with the background of the mouth/teeth area, Copy (Control + C) and Paste in Front (Control + F) this shape infront of the layer in the "Teeth" layer folder. I'm going to apply a transparent Radial gradient in this with the below settings.

I'm using black on either end of the gradient bar. I'm then going to change the Blending Mode of the layer to Multiply and change the Opacity to 75%. Using the Gradient Tool (G) I'm going to just move the gradient center to show more shadow on the top row of teeth.

Step 31

I'm going to start on the eyes, so I'm going to Create New Layer at the very top and call it "Eyes". I'm going to hide all layers apart from the "Eyes" "BG" and "Reference" layers. In the "Eyes" layer folder, using the Pen Tool (P), with fill being black and stroke null, I'm going to draw the pupils of the eyes. I've exaggerated the pupils and I'll show you below in preview mode.

Using a black to transparent radial gradient, I'm going to draw a rough shape outside of the eyes to cover it then set the Blending Mode to Multiply. Below are the settings for the gradient.

Step 32

Unhide all layers now and you should have the below.

For this stage, I'm going to show you one eye. Whatever I do to one eye, repeat the process for the other. This is because I want an even effect on both eyes. Create a shape between the pupil and the edges of the eyes using yellow (C=0, M=0, Y=100, K=0) and change the Blending Mode to Hard Light on 30% Opacity.

Step 33

Using our Width Profile 1 brush, Stroke Weight to 1pt, fill on null and stroke color on C=25, M=40, Y=65, K=0, using the Paintbrush Tool (B), draw some strokes in the iris area with the Blending Mode on Multiply with the Opacity set to 25%. Overlapping the strokes will give darker areas which will enhance the detail of it.

Now change the stroke color to C=20, M=0, Y=100, K=0 and Blending Mode to screen and repeat the process from above.

Step 34

I want to add more shadow to the top of the eyes. To do this I'm going to add another black to transparent radial gradient with the below settings. Note that along the top line of the eyes, I've aligned the edge of the gradient. Set the Blending Mode to Multiply and keep the Opacity to 100%.

I'm going to add another gradient on top of the eye to the bottom, a Linear white to transparent gradient set to Blending Mode Normal and Opacity 25%. Note that I'm leaving a gap between the very top of the eye and the start of the gradient.

Now we have our eyes!

Step 35

I'm going to start drawing the nose, so first I'm going to Create New Layer and call it "Nose". I'm going to hide all layers apart from the "Reference" "BG" and "Nose" layer folders. I'm just going to use the reference for a rough idea for the nose shape, but then I'll make all layers visible so I can position the nose in a place I desire. I'm going to use the Pen Tool (P) with the fill color of C=0, M=75, Y=35, K=10 and stroke of null, I'm going to draw the nose shape. Then using the Free Transform Tool, I'm going to hold Shift + Alt and drag a corner inwards to shrink the shape.

Now I'm going to draw some shading over this with the same fill color and stroke color, with it overlapping onto the fur. The reason being as it will give a little more depth to the nose. I'm going to set the Blending Mode to Multiply and Opacity on 35%. I'm showing you this on Preview mode so you can see the shape drawn.

Now with a black fill color, I'm going to add a further shape and on Multiply 15%.

With the white to transparent Linear gradient we used for the eyes, I'm going to add a highlight to the nose and set the Opacity of the shape to 50%.

Step 36

I've got so many layers going on and I want to combine them to the main areas.

• The eyes — an individual group for each one
• The mouth area — including the teeth and nose
• The arms — both included

So what I'm going to do is firstly go into the "Base" group and Hide the 3 black shapes which are used for the arms and head. I don't want these shapes included into the groups and you'll find out why later. First the eyes. I'm going to unlock the layer folder "Eyes" and using the Selection Tool (V), draw a rectangle for the area of the first eye – this will include the shape from "Base".

Then with the eye area selected, go to Object > Group (Control +G). Repeat for the other eye. Lock the "Eyes" layer. Unlock all layers apart from "Eyes" "BG" "Black" and "Reference". Now using the Selection Tool (V), draw a rectangle around the area of the mouth/nose and teeth. This should only select this area. If you've clipped the arms, then Deselect (Shift + Control + A) and try again.

Group (Control + G) the selected objects and then repeat the process for the arms. I'm now going to remove the unnecessary layer folders and rename the layers as follows.

Step 37

I want to apply some Clipping Masks to the eyes and mouth areas so tidy up their shapes. To do this I'm going to use the Pen Tool (P) and just draw the shape of each eyes with the fill color black and null for the stroke. Then selecting the shape and the eye group underneath, going to Object > Clipping Mask > Make. Repeat this process with the other eye and the mouth. Visually you won't see anything different, it's just going to make the next steps easier and look nicer.

Step 38

The overall composition and theme we have is of the Cheshire Cat and I remember the iconic scenes of him fading into the background and all that is left is his mouth and eyes. I want to give this impression of his face fading into the background, but still giving an impression that what you're looking at is in fact a cat. How I'm going to achieve this is by adding a subtle gradient on the base layer of the head. So I'm going to open the "Base" layer folder and show the shape which was the head. Using the Free Transform Tool (E), I'm going to hold down Shift + Alt and drag the side of it to just fatten the face up.

I now want to apply a subtle gradient onto it, using the gradient settings below.

The pink color is the same as the mouth area which is C=0, M=75, Y=35, K=10. I'm going to have the gradient clipping the top of the head, as if it's moon glow showing the ears slightly. I've used the Gradient Tool (G) to enlarge the size of the gradient as shown below and reduced the Opacity to 10% on Normal Blending Mode.