In Part 2, available on Psdtuts+, we’ll take the vector drawing into Photoshop, where we will refine the shading, add some textures and complete the book cover with the appropriate typography. Let’s get started with Part 1.

Final Image Previews for Part 1 and Part 2

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Intermediate
• Estimated Completion Time: 3 hours

This illustration is a cover art for a fictitious novel called “Let’s Go To Monster School!”. It depicts a fun monster professor teaching insane science in a dingy classroom. Our goal for this first part is to create the basic image (Part 1). In part 2 we’ll create the finished artwork (Part 2).

Step 1

Every illustration I create starts with a sketch. I fiddled around for a few days drawing monsters until I found what I was looking for: a nice asymmetrical green monster, the perfect choice to be our professor (1a). Far from being decent, this quick sketch is nonetheless a good basis for our vector drawing.

Create a new document in Illustrator and place the sketch on the artboard. You should know how to use the Pen Tool for this tutorial so I won’t give instructions on how to create each shape, they’re easy enough to figure out from the screenshots.

Zoom in on the eye and create the iris with a circle filled with an orange-yellow radial gradient. Make sure the lighter shade is at the bottom of the circle. In Illustrator CS4 you can use the on-screen gizmo to manipulate the gradient (1b). Go to Effect > Stylize > Inner Glow and refer to image 1c for the settings.

Step 2

Add the pupil (2a) and the highlight (2b) using, respectively, a black and a white circle. Create the eyeball with a bigger white circle (2c) and fill it with a light yellow radial gradient (2d).

Step 3

Draw the bottom eyelid with a simple path, filling it with a yellow to green radial gradient (3a). Use the gizmo to make the gradient elliptical (3b). Create the top eyelid in a similar way. Be sure to place it above all the objects (3c). Since the eye is round, you have to keep the lighter shade of each gradient at the center of the objects.

Step 4

Duplicate the eyeball and place the copy above all objects (4a). Now select the top eyelid too and hit Command + 7 to create a clipping mask: now the eyelid is cropped to the eyeball (4b). We will use this technique throughout the tutorial so refer to this step as needed.

Step 5

Let’s add a shadow inside the eyeball. Duplicate the bottom eyelid, make the copy dark yellow and move it up a bit (5a). Go to Effect > Blur > Gaussian Blur and enter an appropriate value (5b). Depending on the size of your artboard you might have to change the value. Now the shadow is blurred. Let’s make it a bit transparent by lowering its Opacity to about 75% (5c). Now we only have to crop it to the eyeball with a clipping mask (see previous step) (5d).

Step 6

Draw the monster’s head. Its shape is basically an upside down teardrop. Fill it with the same gradient you applied to the eyelids, using the gizmo to correctly position the colors. Make sure the head becomes lighter towards the center and its edges are green (6a). Draw the mouth and fill it with a two-tone red gradient. You want to make the inside lighter, again (6b). Let’s take a look at our head so far: the colors are in place and the gradients hint at its roundness (6c).

Step 7

Let’s have fun creating the teeth now. The only rule here is: the more crooked and irregular the better. I kept them fairly simple here, making sure to vary their orientation and size to avoid repetition. Also try to avoid even spacing and keep objects from lining up (7a). You can group them together once you’re done and use a clipping mask to crop them to the mouth’s perimeter. Notice they’re not white anymore. No respectable monster has white teeth! (7b, 7c).

Step 8

Our professor doesn’t have smooth skin. Big warts dot his upper body. Create the warts with modified ellipses, giving them a light green color. Change their mode to Overlay and reduce their Opacity to somewhere between 50% and 70% (8a) until they’re clearly but not overly visible (8b).

Step 9

Draw a light green fin behind the head (9a) and give it an Inner Glow to make it lighter at the center. Use the settings in image 9b. Reduce the Opacity to 70% and create a copy, placing it behind the original and rotating it a bit (9c).

Step 10

Continue adding features to the monster. Draw the pale yellow horn in the upper right corner of the head (10a) and give it a light brown Inner Glow to enhance its roundness (10b). Remember to keep all the objects on individual layers. This is crucial as they’ll need to be on separate layers when we move into Photoshop later on.

Step 11

Let’s dress our monster professor with a traditional lab coat. First of all draw the lapels. Try to overlap the head and keep the lines a bit wavy: irregular lines look more natural (11a). For now keep a medium gray stroke so you can see the individual elements. Also draw the left (11b) and right (11c) sides of the lab coat. Finally add a pocket in the bottom left corner (11d)

Step 12

Draw the left sleeve. Make sure it starts right at the shoulder and the cuff covers the pocket (12a). Now draw the monster’s right hand, placing it beneath both the sleeve and the pocket (12b). Fill it with the same gradient as the rest of the skin.

Step 13

For the right sleeve we have to draw two elements, the sleeve itself (13a) and its inside, visible under the monster’s left hand (13b). Make sure you snap the paths together where they meet to avoid creating gaps.

Step 14

The monster’s left hand is made of two parts: the palm (14a) and the “fingers” (14b). Make sure the gradients match where the two objects overlap, but don’t worry too much about color inconsistencies right now. We’ll smooth them out later in Photoshop. Of course this hand must be placed inside the sleeve.

Step 15

Let’s work on the feet. Draw the monster’s left foot using a single path (15a). Notice the following: the leg is quite skinny (it’s funny that way), there are big gaps between the toes and their tips are round, like a frog’s. Next draw the webbing between the toes using a darker green shape (15b). The other foot is merely a copy of the first one, mirrored (15c). Underneath everything else create the pointed tail and make sure it gets lighter towards the tip, using our two base colors (15d).

Step 16

The professor holds a stick in his left hand. Create it with a simple rounded rectangle or an outlined stroke, just make sure the proportions and sizes are correct (16a). Fill it with a yellow linear gradient (16b). Place it behind the fingers and rotate it about 15 degrees clockwise (16c). Our monster is almost complete (16d).

Step 17

Let’s add some detail to the fins. Draw a dark green ellipse (17a). Select the Convert Anchor Point Tool (Shift + C) and click once on the leftmost and rightmost points to turn them into corners (17b). Now scale down the ellipse vertically and place it on the front fin (17c). Make a copy and place it at the bottom of the fin (17d). Now create a blend between them, using five steps (17e, 17f). You might want to adjust the blend, scale the elements, or change their position until you’re satisfied.

Step 18

To finish the character we need to add three buttons to the lab coat. Take a look at image 18a. There are three elements:

1. The outer circle, white with a gray stroke.
2. The second circle, smaller and gray.
3. The four black holes.

Group these objects together and place three copies along the seam of the coat (18b).

Step 19

The character is finished, let’s compose the illustration now. Place the monster at the bottom left of the artboard (19a). Now draw the wooden baseboard (19b), the floor (19c) and the two walls (19d). Fill both walls and the floor with light gradients, making them darker at the corner where they meet and lighter towards the viewer.

Step 20

The final element is the blackboard. It’s a simple shape filled with a dark gray gradient. Align it properly with the perspective (20a). Now our basic illustration is finished (20b).

Step 21

Before exporting to Photoshop, we need to clear the strokes from every element of the lab coat (21a). Also make sure that each element sits on its own layer. Export to PSD only supports a depth of two or three layers, in my experience it’s quite inconsistent, at least on Windows.

Anyway you can now go to File > Export and from the dialog choose the PSD format. A window will pop up with the export options. Make sure you choose the correct color space (RGB for the screen, CMYK for print) and set the resolution to High (300 dpi) so you have lots of pixels to work with in Photoshop. Also check the Write Layers and Anti-alias options (to smooth the jagged edges) (21b).

Conclusion

So that’s it for Part 1. We have traced our sketch, laid down the shapes and defined the basic colors. We are ready for Part 2, where we’ll take this rather plain-looking drawing into Photoshop and we’ll refine the shading, add some textures, insert additional details, and complete the book cover with appropriate typography. Stay tuned!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Beginner
• Estimated Completion Time: 2 hours

Step 1

First I searched for different photos of the Goldfinch and made some realistic sketches. This way I get to know the subject and can experiment with different poses. Use simple shapes to form your character. We will add details later, first make sure the basics look right.

Try different kinds of shapes and pick the one that fits your character best. If you go for cute, then you probably need some kind of round shape. I chose to use two rectangles on top of each other, with round corners to keep it cute.

Step 2

Import the sketch into Illustrator (File > Place) and trace the sketch with the Pen Tool. Use one layer for the outlines and one layer under it for the base colors. When you use separate layers for them you can make layers between them for the shading and highlights.

Use the least number of anchor points in your lines as possible for nice, clean outlines. I selected one line in green so you can see the amount of anchor points.

Step 3

To make the paint splatters I used photos of real paint splatters. You can make them yourself and scan them in or use stock photos. I used photos from
cgtextures.com, they have hundreds of splatter photos. The photo you choose doesn’t have to be perfect, you can change it later, but the better the shape is now, the less time you have to spend on changing it later.

First we’ll make the splatters for the wings into vector shapes with the function Live Trace. Select the splatter photo and go to Object > Live Trace > Tracing Options. Use the settings shown. The most important settings are “Black and White” because we only need 1 color fills because we don’t need strokes. Ignore White is also important because we don’t need the white background to be a vector shape too.

Step 4

Select the splatters and go to Object > Expand, now your splatters are vector shapes. Probably the splatters aren’t the perfect shape yet, that’s no problem. There are two options to edit them. One option is to select the splatters and go to Filter > Distort > Free Distort. Move the four anchor points around to edit your splatters. You have a lot of possibilities this way, but for the wings it wasn’t enough. I wanted to bend the shape to follow the shape of the wings.

To bend the splatters apply Effect > Warp > Arc. Select Preview so you can see the changes directly on screen. The blue outlines are the original splatters and the black fills are what I made of it through changing some settings. Now it bends more, which is exactly what I want.

Step 5

Give the splatters the color you want by selecting the splatters and then selecting a color in the toolbar. Move the splatters to the place you want them. In this case they are too big and are also on the belly and even outside the bird, while I only want them on the wings. You can delete some of the small splatters by selecting them and pressing Delete, or using the Eraser Tool, but you can also use the Pathfinder tools, which is much easier and more precise.

Open the pathfinder by going to Window > Pathfinder. You have to make a shape where you want the splatters to show up, in this case I already have that shape: the wing. I can’t use the wing itself or it will disappear after use, so I copy the wing (Command + C) and paste it in the exact same place (Command + F). Now select the copied wing and the splatters and click on Intersect Shape Areas in the pathfinder. You can see the result in the image below.

Step 6

Use the same techniques for all the other splatters. After I made the splatters I thought it looked a bit dull though, so I decided to add more color by making more splatters smaller than the existing ones. I used the same splatters, but scaled and rotated them a little so they look different. I also gave them a lighter color than the existing splatters to create a highlight/shading effect.

If your style is more detailed than this, then you can of course also use five different splatters with different colors and sizes to make the illusion of one splatter.

Step 7

I always like to make a thick outline around my drawing to make it look more like a cartoon. To make a thick outline select all your current black outlines and copy them (Command + C) and make a new layer beneath all the other layers.

In this layer paste the outlines in place (Command + F). Keep the lines selected and give them a thicker stroke weight than the original lines. In this case the lines for the beak and the feet looked weird if I made them thicker, so I deleted them. Normally I make a thick outline around everything.

In this screenshot you can also see how my layers there are so far. I use a lot of different layers and also name them, this saves time searching through layers if I want to edit something.

Step 8

I used the same techniques to create the other two birds. I used the same outlines for them, not because I was lazy, but because I thought it was cool that I could use the same lines to create three different birds looking in three different directions. I only changed the positions of the beaks and recreated the yellow and orange splatters for the other two birds. I also drew a simple branch for the birds to sit on using the Pen Tool.

Step 9

I used three different shapes to make the branch, to merge them select all three shapes and go to Window > Pathfinder > Merge. The result is that the whole branch is one shape. This is important for the other steps.

Step 10

To make the branch look more interesting, let’s give it a texture. This is a well-known technique for Photoshop users, but it’s not necessary to switch to Photoshop because Illustrator has layer options too. This is not a vector effect though because I used a photo which is pixels instead of vector.

Choose a photo with a nice effect, this doesn’t have to be a photo of a branch, often it’s even better to choose a picture of something completely different. I used a stock photo of rocks from cgtextures.com. I used the photo in black and white because I want to choose my own colors. You can also use a color photo for some nice effects.

Add the photo to your drawing (File > Place) and make a copy of the branch (Command + C). Make a new layer and paste the new branch in the same place (Command + F). We will use this new branch to edit the photo.

Step 11

We’ll use a clipping mask to make the photo only visible on the branch and not the complete background. Select the copied branch and the photo, then apply Object > Clipping Mask > Make.

Make sure the branch is still selected and open the Transparency window (Window > Transparency) and where it says Normal change it to Overlay. Also, set the Opacity to 70%.

Step 12

For the background I used another stock photo from
cgtextures.com. I also changed this one to black and white with Photoshop because the original is brown and I don’t want to use that color.

Step 13

Create a rectangle with the Rectangle Tool (M) for the background in a layer beneath the background texture photo. Go to Window > Gradient to add a gradient to it. Select the rectangle and then select two colors in the Gradient window to make a gradient. Set the angle to 90 degrees to change it to a vertical gradient.

Step 14

Select the background texture photo and go to Window > Transparency, set it to Overlay and the Opacity to 60%. Your layers should now look like this:

Final image

Have fun creating your own textured characters.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

We’ll use some opacity masks, brushes, gradients and effects, in addition to an easy shading technique you’ll find yourself using in plenty of other projects. Get ready to tuck into this Aussie-flavored tut!

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS4
• Difficulty: Intermediate
• Estimated Completion Time: 30 – 40 minutes

Step 1

Open a new 900px by 700px document, set it to RGB, at 72 dpi. Let’s start by creating the basic head shape! We are using blue as our base color here, but obviously color choice is entirely up to you. Be sure to save (Command + S) with each step. By double-clicking Fill on the color Palette (F6), change the fill color to a nice blue; we used #33BBDB.

With the Ellipse Tool (L) selected hold Alt + Shift and drag out a circle in the middle of your document. Using the Direct Selection Tool (A), move the top point down and raise the two side point’s upper handles to create the shape below.

Step 2

To get into a good habit from the outset, let’s name our layers! We will suggest layer names at the beginning, but we encourage you just to use whatever makes sense to you. In your Layers Palette double-click “Layer 1″ and name this layer "koala."

Click on the small white arrow next to the thumbnail to show the paths of this layer. Double-click the path you just created and name this layer "head." Using the Pen Tool (P) we are going to create a shaggy ear. Here is a great resource to gain familiarity with the Pen Tool, if required. Name this layer "ear L."

Step 3

To create an inner ear simply select "ear L", Copy it (Command + C) and Paste it in place (Command + F). Change the Fill to White. Bring up the Transparency Palette (Shift + Command + F10) and change the Opacity to 50%. Name the layer "inner ear."

Step 4

Select both ear layers and Group them (Command + G). Name this group "ear L." Choose the Selection Tool (V) and select this group. Ensure that the Reflect Tool is selected (O) and double-click its icon on the toolbar (below the Eraser). This will bring up the Reflect Dialogue box. Select Vertical as the axis and choose Copy. This will create a vertically flipped copy of the ear.

Step 5

Using the Selection Tool (V), move the flipped ear over to the other side of the head and change its name to "ear R." In your Layers Palette move the "head" layer above both ear layers.  Notice that the left ear is positioned closer to (or further behind) the head than the right – this will give our koala’s head some dimension by giving the illusion of roundness.

Step 6

Next let’s make the nose! As with the head, start with the Ellipse Tool (L) and create a perfect circle (hold Alt + Shift) in the middle of the head. Change its Fill to Black and name it "nose."

Use the points and handles as before to create a squarish koala-esque nose. The key here is to raise and lower the top and bottom points of the circle, move the two side points in towards the middle and stretch out the handles of each point until you have something that looks like the image below.

Step 7

Give the nose some depth by giving it a black to gray gradient. To do this select the nose shape, bring up the Gradient Palette, select Radial as the gradient Type and double-click the first color slider to change its color to gray (R=50, G=50, B=50) and the other black (R=0, G=0, B=0).

Now move the small diamond slider in the middle to a Location Value of 75% (towards black). This will increase the area of the gray on the nose. To conform the shape of the gradient to the nose, select the Gradient Tool (G) and make adjustments as shown below.

Step 8

To give the nose a bit more life (it looks quite flat and dull) we will add a very simple reflection. Copy (Command + C) the nose and Paste in place (Command + F). Using the Selection Tool (V), resize and reposition the shape up towards the top left of the nose.

Head back over to the Gradient Palette and change the first slider from gray to white and change its opacity to 0%. Change the other from black to white. Change the location of the diamond slider to 80%. Using the Gradient Tool (G) position the gradient as demonstrated below.

Step 9

Now for the eyes. Create a perfect circle using the Ellipse Tool (L) next to the nose and give it a radial gradient of white (R=255, G=255, B=255) to beige (R=237, G=231, B=221). Duplicate (Command +C an Command +F) this circle, move it over to the other side of the nose and make it slightly smaller. Move these two layers below the nose in the Layers Palette and name them appropriately.

Step 10

These eyes need irises, and we’ll be using our previous tutorial Create a Set of Shiny Character Eyes to make these. Again, you can choose any color – here we have used orange. Place your irises as shown below.

Step 11

Some quick eyebrows can be made easily by using one of the default calligraphic brushes from the Brushes Palette (F5) with the settings shown below. Use the Brush Tool (B) to draw one eyebrow, Undo (Command +Z) and redraw until you are happy with the result.

Use the Selection Tool (V) to select the eyebrow, go to Object > Expand Appearance. Change the color to #007787, then use the same method as with the ear to vertically flip the eyebrow and move it over to the other eye.

Step 12

The mouth is probably the most complex part of this tutorial, and it’s really quite straightforward. Start by creating an ellipse under the koala’s nose, much like a sausage shape, using the Ellipse Tool (L). Edit its points until you have something like the image below. Use the Eyedropper Tool (I) to grab the gradient from one of the eyes – this’ll do nicely for our mouth.

Step 13

Next, using the Line Segment Tool (\), create a single line near the left of the mouth with a Black, 1pt Stroke. Use the Stroke Palette (Command + F10) to change these settings.

Now select the line and while holding Alt + Shift, drag a duplicate of that line one tooth-distance over. It’s up to you how large your characters teeth are! Now press Command +D (Transform Again) to have Illustrator automatically repeat your last action, until there are an appropriate number of teeth lines across the mouth. Group these lines (Command + G).

Step 14

Using the Pen Tool (P) add a curved line from one edge of the mouth to the other, with the same stroke settings as the other lines. Group this with the other lines and call this group “teeth.” You should have something like the image below.

Step 15

Let’s create an opacity mask, to conform the teeth to the shape of the mouth. Select the mouth and Copy it (Command + C). Then select the teeth group, open your Transparency Palette (Shift + Command + F10) and double-click the empty space next the group’s thumbnail image. Your teeth lines will disappear and a black square will appear where you clicked. Paste in place (Command + F) to bring the mouth shape up, and change its Fill color to white. This reveals your teeth group once again. You can exit the opacity mask by clicking on the thumbnail next to the mask.

Step 16

To soften the lines of the teeth, drop the Opacity of the teeth group to 40%. Then, entering the mask again, select the mouth shape and apply Effect > Stylize > Inner Glow. Ensure the settings are as below, and the mouth is done!

Step 17

We are nearly finished, just a few final touches! With the Pen Tool (P) give your koala some hair, to make him/her a little cuter.

Step 18

Using the Pen Tool (P) again, draw a curved line as shown below, with a stroke color of white and 1pt thickness. Set the Opacity to 50% and duplicate it four times to look like the image below.

Step 19

For some freckles create a series of small ellipses on the cheeks of the koala using the Ellipse Tool (L) and Selection Tool (V). Group them and change the Fill color to black, Blend Mode to Multiply and Opacity to 20%.

Step 20

Soften these freckles by selecting the group and creating an opacity mask (as before, double-click the area on the Transparency Palette next to the thumbnail). This time create a circle with the Ellipse Tool (L) and give it a radial black to white gradient.

Duplicate this and position the two circles over the freckles as shown below. Notice the blurred white dots on the opacity mask – this is how your gradient circles should appear. Leave the opacity mask.

Step 21

Our koala is rapidly nearing completion; we’ll just add some subtle shading. The method we’ll use here is a nice technique that you can use easily for other projects. Simply create yet another ellipse anywhere on the stage – approximately as big as one of the eyes. Jump to your Gradient Palette and give it a black to black radial gradient, and set the second slider’s opacity to 0%. Set the circle’s Blending Mode to Multiply and the Opacity to 20 – 30%.

Step 22

Keep the circle selected and create an opacity mask. There are two check boxes next to the opacity mask: Clip and Invert Mask. First uncheck Clip, then create a black ellipse (L) over the first circle you made. Stretch it out slightly as shown and allow the bottom of the blurred first circle to peek out. The image demonstrates this. Exit the opacity mask.

Step 23

What we have now is a stretchable, rotatable portion of shading that we can use to give depth to under the eyes and near the mouth. Place the shading underneath the eyes in such a way that the curves of each match smoothly.

Adjust how much of the blurred circle is covered by the black circle within the mask to vary the strength of the shadow, and use the opacity levels to reach a subtle but effective level of shading.

Step 24

For the final touch, double-click the left ear group to enter the group in Isolation Mode, and select the larger ear layer. Copy it (Command + C) and exit Isolation Mode (Click the green arrow in the top left of the screen or double-click any unoccupied portion of the stage).

Paste the ear in place (Command +F) and give it a Linear gradient, from white to black. Set the gradient’s angle to 10 degrees, and the diamond slider to 75%. Set the white to 0% opacity. In the Layers Palette, move this new ear layer down until it is below the “head” layer, and above the ears. Set it to Multiply and 60% opacity.

Conclusion

You are done! Try importing your character into Photoshop to give it a final global lighting and color adjustment; and/or to add other elements, like a background. Thanks for sticking through this tutorial!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1 hour

Step 1

In order to create this simple illustration I started with a raw sketch. In fact my drawing is so simple that this step could easily be skipped. Open your scan in Illustrator and set it as a Template.

Step 2

Now we’ll outline the shapes of our teddy bear head. Create a new layer (you may use the shortcut Command + L). As you can see it is not a very faithful tracing of my initial sketch.

I decided not to use the Pen Tool. Instead I’ll use the Ellipse Tool (L) each time tweaking more or less my ellipse shapes with the Direct Selection Tool (A). To create the heart-shaped nose and the mouth part, use the Convert Anchor Point Tool (Shift + C). You can see some of the anchor points together with their handles in the image below.

Step 3

The colors that we are going to use come from the yummy Adobe Illustrator built-in swatches palette: Foods > Ice Cream.

Step 4

We’ll start with the main part of the head. For the moment put it above all the other shapes. To do that select it, Right-click and choose Arrange > Bring to Front (Shift + Command + Right Bracket key.)

Fill the shape with the lightest color (vanilla) from the Banana Split group (R=244, G=236, B=206), and set the stroke to none. With the Gradient Mesh Tool (U) first click in about the center point of the head, next add four more mesh points by clicking about the points marked in the image. You do not have to be very exact.

Step 5

Choose the Direct Selection Tool (A), then hold down the Shift key and select all the sixteen border mesh points. Now fill them with the Chocolate Chip brown color (R=73, G=54, B=31).

Next adjust the positions of the four mesh points little bit, as marked in the image below. Do this by dragging them towards the center of the circle so that the mesh inner shadow has a round shape.

Step 6

Select the head shape and send it to the very back (Shift + Command + Left Bracket key). Select the outer parts of the ears and the eyes and bring them to front (Shift + Command + Right Bracket key). With these parts, we’ll proceed similarly as we did in the two previous steps.

Fill the outer parts of the ears with the same color we used for the main head and set the stroke to none. Now use the Gradient Mesh Tool (U) to add the mesh points as in the previous step, while skipping the bottom one.

With the Direct Selection Tool select the nine border mesh points situated above the blue line marked in the image below. Now fill them with the Chocolate Chip brown (R=73, G=54, B=31). Drag the two top corner mesh points slightly towards the center, as we did in the previous step.

Repeat the same for the outer parts of the eyes. The only difference is the fill color. Choose the vanilla color from the Neapolitan group (R=255, G=241, B=228).

Step 7

Send the outer parts of the ears to back (Shift + Command + Left Bracket key). Select and bring the inner parts to front (Shift + Command + Right Bracket key).

Fill them with the yellow color from the Banana Split group (R=252, G=221, B=124), and give them no stroke. Click in the center with the Mesh Tool (U). Next fill the top (above the blue line) five border mesh points with the Chocolate Chip dark brown color (R=73 G=54 B=31).

Send the inner ears to back (Shift + Command + Left Bracket key). Then immediately bring them forward (Shift + Command + Right Bracket key).

Step 8

Now we’ll create the iris parts of the eyes. Bring them to front, then fill them with the brown color from the Neapolitan group (R=107, G=78, B=56), and give them no stroke. Next use the Gradient Mesh Tool (U) to add the mesh points, then adjust their positions as shown below.

Select the border mesh points situated above the blue line and set them to black. Next change the color of two more mesh points as shown. The colors we use are light vanilla (R=255, G=241, B=228) and pink (R=238, G=156, B=176) from the Neapolitan group. This way we add some lighting and color.

Next try recreate this effect with the second eye. I wanted my teddy bear to have a bit of asymmetry.

Step 9

Bring the heart-shaped nose to front and fill it with the Neapolitan pink color (R=238, G=156, B=176), then set the stroke to none. Switch to the Gradient Mesh Tool (U) and add the mesh points as in the image – starting in the center of the heart. You can follow my order of adding the mesh points, but it is not obligatory.

Now adjust their positions as in the image. Set the color of all the border points as Chocolate Chip brown (R=73, G=54, B=31) and the color of the blue-marked point as Neapolitan vanilla (R=255, G=241, B=228).

Step 10

Having locked and set the heart to invisible, we’ll now work on the “mouth” part. Make sure it is placed above the eyes and below the nose. Fill it with the yellow from the Banana Split group (R=252, G=221, B=124), and give it no stroke.

Add five mesh points starting from the one marked with the blue arrow below. Change the color of all border mesh points to the Chocolate Chip brown (R=73, G=54, B=31). Next drag the four points marked with the dark brown arrows towards the center.

Step 11

Set the fill color back to the Banana Split yellow (R=252, G=221, B=124) and stroke to none. Add two more mesh points as marked with the dark arrows in the image below. Next change the color of the point marked with the blue arrow to Chocolate Chip brown (R=73, G=54, B=31).

Step 12

Turn the heart-shaped nose visible, but keep it still locked (it should be above the mouth). Adjust the shape of the mesh lines so that the mouth part has a more natural look. Move the handles a bit using the Convert Anchor Point Tool in the Pen Tool palette (or use the shortcut Shift + C).

Step 13

Now we will create the cap. First create the simple shape of the cap. Copy it Command + C and paste it to the front Command + F, then lock it and set it as invisible (we will need it later).

Next create three triangles as shown, make sure that they all start in the peak point of the cap. Now select all, then go to the Pathfinder Panel and choose Divide. Ungroup your selection (Shift + Command + G) and delete the unwanted parts. Set the fill colors of the separate parts alternately to light vanilla (R=244, G=236, B=206) and light red (R=231, G=104, B=93) from the Banana Split group.

Step 14

Copy the middle red part (Command + C) and paste it to front (Command + F). Next add a mesh point as in the image below, set the color to Banana Split vanilla (R=244, G=236, B=206) and decrease the opacity a bit, I set it to 87%. Select all the stripes and group them (Command + G).

Step 15

Unlock and set visible the copy of the cap shape. Bring it to front (Shift+ Command + Right Bracket key), set the color to Chocolate Chip brown (R=73, G=54, B=31), set the stroke to none, the blending mode to Multiply, and decrease the Opacity to 63%.

Add the mesh points as shown, and manipulate points 1-3 slightly using the Direct Selection Tool (A). Change the color of the four mesh points (marked in the image with the blue circles) to white.

Step 16

Copy the mesh object created in the previous step (Command + C) and paste it to front (Command + F). Change the two remaining inner mesh points to white, as well as the top border mesh points on the right side of the cap. Increase the Opacity to 75%.

Group all the parts of the cup, Command + G.

Here is where we are at the moment.

Step 17

Now we will add some slight shadow coming from the base of the cap. Use the Direct Selection Tool (A) to drag down one of the head mesh points a bit, as shown below. Also, adjust the handles as well.

Step 18

Now we’ll add a few freckles. Hold down Shift to create a square with the Rectangle Tool (M). The rectangle surrounds a single freckle. Fill it with the Banana Split yellow color (R=252, G=221, B=124), and give it no stroke.

Now use the Gradient Mesh Tool (U) to create the mesh grid as shown. Move the mesh points a bit using the Direct Selection Tool (A). Change the color of the center point to the Chocolate Chip brown color (R=73, G=54, B=31). Change the blending mode to Darken (this is just in case the square that surrounds the freckle intersects with the brown seam).

Step 19

Copy, rotate and scale as many freckles as you wish. I decided to put four of them, two as created in Step 18 and two a little bit less star-shaped.

Step 20

Create a new layer Command + L and place it below the “teddy bear” layer. Use the Rectangle Tool (M) to create the background rectangle at the size that you wish. Mine is 590 px wide by 675 px high, which corresponds to the span of the teddy bear that is 347 px wide by 480 px high.

Fill it with the Chocolate Chip brown color (R=73, G=54, B=31), and give it no stroke. Use the Gradient Mesh Tool (U) to add the mesh points as shown. Change the color of all the inner mesh points to the Neapolitan pink (R=238, G=156, B=176). Use the Direct Selection Tool to drag the four inner-corner mesh points a little bit toward the outer corners.

Align the bear and the background.

Step 21

To create the “Tutsy Bear” text I used the BoltonShadowedfont from Dafont. My font size is 72 pt. In the Character Panel, I switched the kerning to Optical and Tracking to 10. For the letters I use a dark brown color (R=56, G=41, B=26).

Conclusions

The main focus of this tutorial was to show you how you can easily add a retro feeling to your creations. I’ve chosen the gradient mesh as a tool to add the inner shadows so that my object remained fully scalable, i.e. so that no raster effects were used. Have fun and good luck applying these techniques in your own work!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

If you’re a beginner, expect to learn a little more about opacity masks, gradients, effects, and handy shortcuts. If you’re a more advanced Illustrator user then we encourage you to experiment a bit with the steps shown here! Enjoy!

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Illustrator CS4
• Difficulty: Beginner
• Estimated Completion Time: 10 – 20 minutes

Step 1

Open a new 800px by 800px document, set to RGB, at 72 dpi. We are going to start by making the iris. We are using blue as our base color, but you can use whatever you like or change the color at the end. Be sure to save (Command + S) with each step. By double-clicking Fill on the color palate (F6), you can change the fill color to a blue, we used #56CAF4.

Step 2

With the Ellipse Tool selected, hold Alt + Shift and drag out a circle into the middle of your document.

Step 3

Using the Direct Selection Tool (A), move the points using the Nodes and Handles to create a more irregular shape.

Step 4

To get into a good habit to begin with we are going to name our layers as we go! In your Layers palette double-click “Layer 1″ and name this layer "eye." Click on the small white arrow next to the thumbnail to show the paths of this layer. Double-click the first path and name this layer "iris".

To duplicate this layer, first grab the Selection Tool (V), then use this tool to select your shape, copy it (Command + C), and paste in front (Command + F). Change this new shape to black using the color palate.

Step 5

Grab the Selection Tool, select your new black shape, and while holding Shift + Alt resize it to roughly half the size. You should see the iris shape behind it. Move your black shape a bit off center, up and to the right. Name this path "pupil."

Step 6

Select the Ellipse tool (L), hold Alt and create an ellipse. Change the fill to white. At this point it is a good idea to lock your “pupil” and “iris” layers so you don’t accidently edit them.

Step 7

Rotate your ellipse layer to around 45 degrees. Using the Direct Selection Tool (A) again, edit and move its points to create a rough, sausage looking shape. Now move it to overlap the “iris” and “pupil.”

Step 8

Repeat the last two steps to create a smaller, egg like shape to finish off the top reflection. Using the Selection Tool, hold Alt and Click-drag your first white reflection to the lower-left side of the eye. Rotate this new copy 180 degrees and shrink it down slightly. Place it as shown below on the iris close to the pupil.

Step 9

Open the Transparency palate (Shift + Command + F10). Now with your new shape still selected, change its Opacity to 60. Name these three layers "highlight, 1" "highlight 2," and "highlight 3."

Step 10

Now we are going to create some texture for the iris. With the Pen Tool (P) selected and the fill set to white, place four points as shown below and close the shape by clicking back on your first point.

Step 11

Repeat this step for two smaller shapes.

Step 12

With all three of these shapes selected (V), group them by pressing Command + G and name this group ‘iris texture.’ Now we are going to create a Mask for the “iris texture” layer. Unlock the “iris” layer, select it with the Selection Tool, copy it (Command + C), and re-lock the layer.

With the “iris texture” group selected, open the Transparency palate again, and double-click in the empty space next to the white square. The texture group should disappear and a black square will appear where you clicked. This is your Opacity Mask.

Step 13

Now you are in the Opacity Mask, press Command + F to paste the iris shape in place. Change the fill color of the shape from blue to white. This will constrain the iris texture to the iris shape.

Step 14

To get out of the Opacity Mask, just click on the white square next to it. While still in the Transparency Palate, change the blending mode to Overlay and the Opacity to 40.

Step 15

To add some depth to the iris, unlock the “iris” layer and duplicate it (Command + C), then paste in place Command + F). Rename this new layer ‘iris gradient.’ Open the Gradient palate (Command + F9) and select ‘Radial’ as the Type. Double-click the first slider and set the color to white and press Enter. Select the second slider and set the color to white and set the Opacity to 0.

Step 16

With the gradient layer still selected and the transparency layer open, set the blending mode to Overlay and the Opacity to 85.

Step 17

To create some depth to the iris, select the “iris” layer and apply Effect > Stylize > Inner Glow. Change the color of the Inner Glow by selecting the white square next to Mode and set the color to black, and click OK. Set the Mode to Multiply, the Opacity to 10 and the Blur to 25.

At this point you can play with the color of your iris to suit your character, and also change the iris inner glow and gradient layers to modify the highlight and depth. Save this document and close.

Step 18

For the eye, remember that this shape is just a guide and you should change its shape to fit your character. Create a new document 800px by 800px, RGB, 72 dpi. Using the Ellipse Tool, with the fill set to #F7F6F0, drag out a rough circle to fill half the document.

Step 19

Repeat the same process as in Step 4 and use the Direct Selection Tool (A) to create an irregular shape.

Step 20

Select Effect > Stylize > Inner Glow and change the color to # 442D00, the Mode to Multiply, Opacity to 5 and the Blur to 130.

Step 21

Place your iris and pupil file into the document by selecting File > Place and choosing your “iris” file. Resize and position it appropriately as shown below.

Step 22

With the placed file selected, go to Effect > Stylize> Drop Shadow and use the settings below – be sure to change the Drop Shadow color to # 00CFFF.

Conclusion

Copy and resize your eye to make a set. You are done!

Check out some examples of how to use the eyes below… Hope you enjoyed this tutorial!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

The interesting thing about Typefaces is that each font gives a different aspects to the characters. That is the essence of Typefaces – Faces with Type. Learn the basics of how to create these fun characters!

Final Image Preview

Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS3
• Difficulty: Beginner
• Estimated Completion Time: 1 Hour

Below is the final image we will be working towards.

Step 1

First of all open Adobe Illustrator and create a new document (Command + N) at 600px by 600px.

Step 2

In this example we are using Helvetica Neue Bold, but you can try it with any type you like.

Step 3

Select the Type Tool (T), type down the whole type case (all the upper and lower case plus its numbers and signs), go to Type > Create outlines (Command + Shift + O) and then select the elements you are going to work with to create a typographical creature.

Step 4

In this occasion we are going to select the “a,” “i,” “?” “0,” and “>” characters.

Step 5

Once you’ve got the type forms you are going to work with select the lower case “a.” Then copy (Command + C) it, paste in front (Command + F) and use the Reflect Tool (O) to flip your second “a” on by its vertical axis at 90 degrees.

Step 6

Move it to the left until you get the form you can see in the image below.

Step 7

Now select both figures, click Add to shape area in the Pathfinder tab and then hit Expand.

Step 8

Select your new figure and right-click on it, then hit Release Compound Path in order to delete the low section of your figure. Paint the upper section with white. This is going to be the body of our character.

Step 9

Now leave aside the body of our character and get ready to build its mouth and teeth. Take the “>” character and use the Rotate Tool (R) to flip it 90 degrees.

Step 10

Select the “>” character, then hit Shift + Alt and move it to your right in order to make a copy of the element, and constrain the horizontal movement.

Step 11

Using duplicate (Command + D), create six more “>” characters in order to have seven of them in total. Arrange them as you can see in the example below.

Step 12

Now select the seven signs, click Add to Shape Area in the Pathfinder tab and then hit Expand.

Step 13

As soon as you are done, copy (Command + C), then paste in front (Command + F) the new figure. Use the Reflect Tool (O) in order to flip the new copy of the figure on its Horizontal axis.

Step 14

Arrange them as you see in the example image below to get the teeth of the character.

Step 15

Finally select the “i,” right-click and hit Release Compound Path. Delete the dot of the “i” and rotate the body of the letterform 90 degrees.

Step 16

Now stretch and copy (Command + C) it, paste front (Command + F), and arrange the upper and lower lip.

Step 17

Select Teeth and Lips and click on Add to Shape Area in the Pathfinder tab and then hit Expand. Now you have a beautiful mouth!

Step 18

Move the mouth (white fill) over the body and distribute the elements as in the example below.

Step 19

Make a copy of the body (Command + C), paste front (Command + F) and go to Object > Arrange > Bring to Front (Command + Shift + Right Bracket key).

Step 20

Now hold Shift and select both the body and teeth, then Right-click and select Make Clipping Mask. Then go to the Pathfinder Tab and click Crop.

Step 21

Select the “0,” Right-click over the selected element and select Release Compound Path.

Step 22

Move the inner section of the “0″ aside and duplicate the item. Then arrange both figures as the Eyes of our creature.

Step 23

Use the Direct Selection Tool (A) to select the lower half section of the “0,” then hit delete on your Keyboard. When you are done selecting both ends of the new figure apply Join (Command + J) and you have a foot.

Step 24

Select the foot and use Shift + Alt to move it to your right in order to make a copy of the element. Arrange both feet as in the example below.

Step 25

Take the question mark “?” and make two copies of it.

Step 26

Select the three elements and Right-click to Release Compound Path.

Step 27

Delete the two question mark dots and arrange the rest of the elements through Rotations (R) and Reflections (O) until you arrive at the image below.

Step 28

After that take another question mark and make two copies of it. Select the three elements and Right-click, then choose Release Compound Path.

Step 29

Delete two question mark dots and arrange the rest of the elements through Rotations (R) and Reflections (O) until you arrive at the sample image below.

Step 30

Now you’ve got the tentacles of our Type Creature. Arrange them in the body.

Step 31

Once you are done, select all tentacles and Right-click over the selection to Group.

Step 32

Copy (Command + C), paste in front (Command + F), and use the Reflection Tool (O) to flip the copy on its Vertical Axe at 90 degrees.

Step 33

Arrange them as shown below.

Step 34

Finally take de dot of the question mark, make a 45 degree Rotation (R) and use the Direct Selection Tool (A) to select the top point of the square. Now stretch it as you can see in the figure. You are ready to enjoy your Type based monster!

Conclusion

For the final image below, I added a simple background effect. Go ahead and create your own. You can also take this into Photoshop now and add some texture. For some inspiration visit Typefaces and have fun! You can learn more about the typefaces project in my interview on Vectortuts+.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe Illustrator CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Take a look at what we’re aiming for, an inquisitive owl on a branch with dusk scenery in the background. I chose a soft, warm color palette to create a peaceful illustration.

Step 1

Open a new blank document. The size doesn’t matter for now. In the end we’ll crop the artboard to the illustration. Let’s start by creating the eyes of the owl. Draw an orange circle with the Ellipse Tool (L) (1a). Fill it with the gradient you see in image 1b, with colors ranging from light orange to dark red. Draw a dark brown pupil also (1c).

Step 2

The eye needs a couple of highlights. Draw a light orange ellipse in the top-right corner of the eye (2a) and set it to Screen, with 50% Opacity from the Transparency palette (2b). Add a secondary highlight in the bottom-left corner (2c), move it below the pupil and reduce its Opacity to 30% (2d).

Step 3

Let’s add an internal shadow. Copy the secondary highlight behind the first one and enlarge it (3a). Fill it with the same color as the pupil and set it to Multiply at 25% Opacity (3b). Go to Effect > Blur > Gaussian Blur and choose a Radius of 5 pixels (3c). We added a nice depth to the eye (3d).

Step 4

Select the main orange circle then go to Object > Path > Offset Path and and enter 5 pixels (4a). Make the new circle very dark (4b). The eye is finished so group all objects together and create the second eye. Place a guide right between them (4c).

Step 5

Let’s draw the beak now. Activate Smart Guides with Command + U then draw the right half of the beak using the Pen Tool (P), while snapping to the guide (5a). Make sure the first and last points have horizontal handles (5b). Create the left half by copying and flipping horizontally the one you just drew.

Grab the Direct Selection Tool (A) and use it to select the top points. Hit Command + J to join them: from the pop up dialog choose the Smooth option (5c). Do the same for the bottom points. We now have a single shape for the beak and because we kept the handles of the endpoints horizontal the joints don’t have any kinks (5d).

Step 6

The beak is definitely out of scale and proportion with the eyes so let’s adjust it (6a). Go to Object > Create Gradient Mesh and choose 3 rows and 4 columns (6b). Take a look at the instructions in image 6c to color the mesh properly. The result (6d) shows the finished beak: notice the frontal highlight and the shadows at the seams.

Step 7

To create the nostril draw a small brown ellipse at the top-right corner (7a). Fill it with a gradient to give it some depth (7b) then mirror it to complete the pair (7c).

Step 8

Let’s draw the head now. Create two overlapping circles around the eyes and join them into a single object: the spectacles (8a). Create the head with a brown ellipse (8b) and fill it with a gradient (8c) to imply light coming from the top (8d).

Step 9

Select the beak (not the nostrils) and go to Effect > Stylize > Drop Shadow and enter the settings shown in image 9a. Add a drop shadow to the eyes too (9b) and see the result (9c).

Step 10

Create the egg-shaped body (10a) and fill it with the same gradient as the head. Duplicate the head, move the copy behind it and below it (10b). Add a Gaussian Blur effect (10c) and set it to Multiply with 50% Opacity (10d). The values used for the effects may be different for you, depending on the size of your document and the raster effect settings. Just try to obtain similar results.

You can see that the head’s shadow appears on the background too. We need to crop it to the body. Make a copy of the body and move it above the shadow. Select both this copy and the shadow and hit Command + 7 to create a clipping mask (10e). Now the shadow is cast only onto the body (10f).

Step 11

Let’s finish the head by adding a wedge of lighter plumes. Using the guide as reference draw the right half of the wedge and make it bigger than the head. Don’t worry about the weird shape, we’ll crop it to the head with a clipping mask later (11a).

Mirror the other half and join into a single object like we did earlier with the beak (11b). Use a copy of the head to create a clipping mask (11c) so the wedge is perfectly cropped (11d). Make it less conspicuous by switching to Soft Light mode with 70% Opacity (11e).

Step 12

Let’s add a patch of lighter plumes on the belly. Duplicate and stretch the body and set it to Screen mode (12a). Go to Effect > Distort > Zig Zag and use the settings in image 12b to add variation to the outline (12c). Now go to Effect > Warp > Fisheye and use the settings shown in image 12d. See how the outline is a bit more dynamic now (12e).

Step 13

Use a clipping mask to crop the belly to the body. You know the method by now because we’ve used it twice already (13a). With the belly selected create a new style in the Graphic Styles palette by clicking on the appropriate icon at the bottom. Apply the style to the spectacles and the wedge (13b). You might need to manually adjust the settings of the individual styles to make up for the objects having different shapes and sizes.

Step 14

Draw the left wing with the Pen Tool (P) on its separate layer above the body and below the head (14a). Fill it with a two-tone brown gradient so the wing becomes darker as it recedes from view (14b).

Step 15

Take a copy of the wing and move it below it. Rotate it counterclockwise around the top edge (15a) and set it to Multiply mode (15b). Now it’s darker (15c). Add a Gaussian Blur effect (15d) so it looks like a real shadow. Use a clipping mask to crop it to the body (15e). Mirror the other wing (15f).

Step 16

Let’s draw a feather now. Create a light brown circle (16a) and delete its bottom point (16b). Mirror this circle and move it down (16c). Press P to select the Pen Tool and join the open circle by drawing the straight sides (16d).

Step 17

This feather looks like a band aid! Let’s fill it with a gradient (17a) to give it a better appearance (17b).

Step 18

Draw a straight path down the middle (18a) and apply a tapered brush (18b). Use a light beige (18c). The feather is complete.

Step 19

Now place many instances of the feather on the left wing (19a). Group them together and set them to Hard Light with 75% Opacity (19b). Mirror the feather to the other wing (19c). Populate the owl’s belly with feathers, too, using less opacity, about 50% (19d).

Step 20

Time to draw the branch now. Using the Pencil Tool (N) draw a fairly irregular shape (20a). Fill it with a brown gradient set so the top is lighter (20b).

Step 21

Draw the bark texture with the Pencil Tool (21a) and crop it to the branch with a clipping mask (21b). Set the bark objects to Color Burn mode with 15% Opacity (21c) to blend the texture with the main color (21d).

Step 22

Arrange the owl behind the branch (22a). We can now draw and position the owl’s toes and claws. On a new layer draw a teardrop-shaped claw (22b). Make two smaller copies (22c) and set them both to Screen mode. Blend them with the main claw with a 5px Gaussian Blur effect (22d).

Step 23

Draw the toe behind the claw (23a) and fill it with the gradient shown in image 23b. When you’re done group the three claw shapes and the toe together. Position the toes on the branch, three per side. Rotate and translate the toes so they follow the bulging outline of the branch (23c).

Step 24

Now let’s set up the final composition. Hit Alt + Command + P to select the Document Setup. From the pop-up window press the button labeled Edit Artboards (24a). Resize the artboard so it’s square and it fully encloses the branch without showing its ends (24b). Click on any icon in the toolbar to return to the drawing mode.

Step 25

On a new layer draw a square that covers the entire artboard and fill it with a multicolored gradient (25a). For the color stops (25b) try to recreate the sky at dusk. The orange and purple shades represent the horizon. With the Pencil Tool (N) draw some sketchy mountains and fill them with desaturated gradients, to suggest depth (25c).

Step 26

The moon (26a) is a perfect circle, cropped to the artboard and filled with the radial gradient shown in image 26b. Go to Effect > Stylize > Outer Glow and use the settings from image 26c.

Step 27

Draw the stars with a lot of small white circles set in Overlay mode. Try to vary their size and opacity (27a). Finally add a drop shadow to the toes (27b). The illustration is done (27c).

Conclusion

Hopefully this illustration didn’t turn out spooky. As always, it was fun to make. I hope you learned an interesting workflow which combines basic shapes, basic gradients and a few effects to achieve a simple but pleasant result.

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Tutorial Details

• Program: Adobe illustrator CS4
• Difficulty: Intermediate
• Estimated Completion Time: 1.5 hours

Step 1

Let’s open a new document in Illustrator (File > New) and select the size "Letter" (but you can choose any size you want). I used the RGB color mode for this one but if you want to use it for printing you should choose CMYK.

Step 2

We will start with the 3D looking font. First, find a nice font (In this tutorial I use Lamebrain BRK, then be sure to have enough space between each letter (I used 100 here), and go to Type > Create Outlines.

Step 3

Take the dot on the "i" away by using the Direct Selection Tool and add a stroke to the text. Be sure to select Round Cap and Round Join in the stroke box to get a smoother effect.

Step 4

Select the text and go to Path > Outline Stroke.

Step 5

Then go to Object > Ungroup. Select one of the letters and click Unite in the Pathfinder box. Do the same for each letter.

Step 6

To get a nice cartoon effect, you can select each letter and move, rotate, and scale a bit.

Step 7

It’s time now to make the 3D effect. I changed the color of the text to red so it’s will be easier to see the 3D effect on them. Select a letter and go to Effect > 3D > Extrude & Bevel.

Step 8

In the 3D Extrude & Bevel panel, check the Preview option and choose an Extrude Depth (I used the default). Then you can move the box to get the angle you want. You can also change the perspective. do the same for each letter and change the angle a bit for each one.

Step 9

For each letter done, select it and go to Object > Expand Appearance.

Step 10

You will see some white space between the shapes, but don’t worry, we are going to take it away. Select a letter and hit Shift + Command + G (Object > Ungroup) twice. Then select only the front shape of the letter (ex. the light red "C") and make a copy (Command + C).

Select the whole letter, including the front shape, and add a small stroke (0,5) with the Round Cap and Round Join selected. Go to Object > Path > Outline Stroke, open the Pathfinder box, and click on Unite. When those steps are done, paste the front shape’s copy back on top (Command + F). You need to do the same for each letter again.

Step 11

You now have your 3D effect! I changed the color of the shapes before the red made me crazy.

Step 12

Remember that we deleted the dot on the "i" previously? Let’s create a nice red star using the Star Tool!

Step 13

Repeat Steps 7 to 10 to get it in 3D and then change the colors.

Step 14

Now add a black stroke to the text. Select everything, copy (Command + C) and paste it to the back (Command + B). Click on Unite in the Pathfinder box.

Step 15

Add a black 10 pt stroke!

Step 16

Go to Object > Path > Outline Stroke and click on Unite in the Pathfinder box.

Step 17

Double-click on the black shape to get into it and create a shape to cover every part left in white.

Step 18

Select the black shape and the new one and click on "Unite" in the Pathfinder box. Double-click outside of the shape, to get back to the text.

Step 19

To add some effect to the text, create some round shapes.

Step 20

Select the front letters in the text and click on Unite in the Pathfinder box. Make a copy of the shape in front (Command + C and Command + F). Select that shape and the round one (in green) and click on Intersect in the Pathfinder box, while holding Alt. Then click on Expand. Do the same with the star.

Step 21

Use some light colors to get a nice effect.

Step 22

For the rabbit part, I will go a bit faster. I think there are enough tutorials about drawing vectors around here. Some will start from a hand sketch, but I prefer to start straight in Illustrator. So let’s trace the lines of the Character by using the Pen Tool, like I did here.

Step 23

An easy way to create shadows is to make a copy of your shape (an arm here), paste it in front (Command + F), and then trace a new shape over it, and by selecting the copy and the new shape, click on Intersect in the Pathfinder box.

Step 24

When the lines are done, choose the colors, and don’t forget to add a nice black stroke in behind your character!

Step 25

When your character is done, create two round shapes in the back.

Step 26

Select the black stroke of your text, make a copy, and then paste it in front. Select one of the round shapes with the copy of the stroke and click on Intersect in the Pathfinder box. Do the same for the second shape.

Step 27

Use the Direct Selection Tool to delete the lowest part of each shape.

Step 28

Use the Pen Tool to draw some short lines around the shapes and choose a brush in the Brush Libraries (Window > Brush Libraries > Artistic > Artistic_ink). Change the stroke Weight to get the effect you want. Make some lines for the first round shape (brown) and some for the second one (black).

Select the lines you made and go to Object > Expand Appearance. Select all the lines in brown with the brown round shape and click Unify in the Pathfinder box. Do the same for the black lines with the black round shapes. Select both final shapes and send them to back (Object > Arrange > Send to Back).

Step 29

The Grunge effect is done, but we will now add a white stroke behind the whole logo to give it a sticker look. Select everything, make a copy and paste it to back (Command + B). Click on Unify in the Pathfinder palette. As you can see, the Pathfinder palette is one of my best friends!

Step 30

Change the color of this shape so you can see it, and add a stroke with a weight of 8 pt. As seen before, go to Object > Path > Outline Stroke and then click again on Unify.

Step 31

To look like a sticker, it needs to be ONE shape. So double-click on the shape to get in and draw shapes to hide the white parts and also to connect the smaller shapes to the big one. Select all your shapes and click on Unify.

Step 32

Now that you have one big shape, change the color to white, and then double-click outside it to get back to your main illustration.

Step 33

Select that white shape, copy it to back (Command + C and Command + B) and move it a bit to the right and to the bottom. Change the color to black. Go to Effect > Blur > Gaussian Blur.

Step 34

I used a Radius of 7.2 pixels here.

Step 35

In the Transparency palette select Multiply and put the Opacity at 50%.

Conclusion

You can now add a nice background or color and it’s done! I hope you enjoyed this tutorial!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

Create new document, whatever size. A4 is fine. Draw the shape of the bird’s body using the Free Hand Tool and make it nice with the Shape Tool. This part requires a bit of creativity

Step 2

Color the shape blue. Then Copy the shape and paste in the same place. Now using the Up Arrow key, move the second shape 4 pixels up. And then change the color of the second shape to a lighter blue. For better a effect use the Radial Gradient Fill Tool with a lighter to darker blue. Still the first shape should be darker to get that dark line at the bottom.

Step 3

Copy the shape and place it in the white area. Copy it again and paste it. Then make it a bit larger and put it over the smaller one (green on pink example). Using the Back Minus Front option Cut the shape off. Then change it to blue (or use the gradient that we did in last step). And place it on our main shape.

Step 4

Do the same again but cut a smaller, thiner part. Those steps are needed to add some light effects, which make it more 3D.

Step 5

This step uses only one simple option: Intersect (marked by red box, shown below). Just as in the steps above, select two object and Intersect. You will get the shape that both object share.

This technique is an easy way to get shapes that you want in many other situations. In the picture below, notice that we used circles on the main shape, then the eye, then the eyeball, etc. Be sure to apply a radial fill to the eye as shown above.

Step 6

Do the same thing again. This time create the bottom part of the bird (that’s the way birds are built, a white patch makes the bird look more real).

Step 7

Coming back to using the Back Minus Front option. Cut off the shape of the first eyelash. Than copy, paste, resize, and rotate to put them together. Now copy the whole thing and paste in place, change to a darker blue, rotate a bit, and move it to the back. Lastly, group it and place it on the bird.

Step 8

To draw the legs and nose you need to use the Free Hand Tool and make it nice with the Shape Tool. In this step, we want to show you how using the same color, but in different brightness, adds more depth and dimensionality.

Step 9

This must be the easiest step because you do do not have to be exact. Just draw away and create some jagged shapes for the eye. The more uneven the better.

Step 10

Now let’s make the wings. In the image below, you can see again how we cut the shape out of the circle using different circles. Then we rounded the corners a bit using the Shape Tool. Also, we added some light effect, just like in Step 4.

Place the wing on the bird. Also, Copy and Paste In Place the same wing, but change color to gray, move to the back, and move to the left a bit. That gives the effect of the second wing on the other side of the bird (you can see tiny gray part near the legs).

Step 11

We’re almost done. The hat is a simple thing drawn using the Freehand Tool to create the shapes shown below. They each were given different brightness, fills, and a radial gradients was placed on the white stripe to add 3D.

Conclusion

Place the hat on the bird. Add a dark blue ellipse under the hat (some kind of shadow of the hat). And our Quirky looking twitter bird in vectors is done!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Final Image Preview

Below is the final image we will be working towards. Want access to the full Vector Source files and downloadable copies of every tutorial, including this one? Join Vector Plus for just 9$ a month.

Step 1

The first step in the process is to dig up a fresh corpse, and in this case I sketch out the zombie I intend to create. My personal preference is a black biro on paper. As I want to scan the image, a biro ensures that the lines are all dark enough to show. Also by sketching in ink, I don’t get too hung up on the image at this stage and have some fun. The great thing about Illustrator is that I can always tweak and amend as I work.

Once I’m happy with the sketch I scan him into Photoshop. Obviously any software is suitable at this stage as no manipulation is required, so the software which came with your scanner should do the job just as well. 72 dpi and grayscale are fine and will help keep the processing power of your computer from having to work unnecessarily hard. You could even use a digital camera to capture the image if you don’t have a scanner.

Step 2

Open up Illustrator and start with an A4 portrait document. I tend to work in CMYK, as alot of my work is for print, but I also find CMYK to be more intuitive when mixing colors.

Once your document is open, import the sketch into the document by going to File > Place and locate your sketch. Once your file is located, check the Template box, which will ensure your sketch is placed upon its own layer. It also gives the layer a faded opacity, which will help in the next step when you are drawing over the top of it.

Step 3

Before we begin creating our little flesh-eater, arrange the document into different layers, each one representing an element of the figure. This figure breaks down into five main groups: “Head,” “Body Front Arm,” “Back Arm,” and “Guts.” I create a new layer for each of these items, and this will help keep things organized as the illustration progresses.

Step 4

For this step, I am going to draw around the sketch of the zombie using the Pen Tool (P). At this point, I have a black stroke with no fill. This way I have the ability to see every element even if they overlap.

I begin with the head, working on the “Head” layer, and draw around each element. As I draw, I keep in mind which elements lay on top of each other, starting with the furthest away and building up until I have a line drawing of the whole head. I then repeat the process for each element until I have the whole zombie.

Step 5

Once I have the complete zombie, I select it all and change the stroke to white and give it a black fill. This will show me which elements are in the wrong order.

I see that the sockets of the eyes are sitting in front of the eyeballs. To move them back, I simply select the sockets and send back a step (Object > Arrange > Send Backward), repeating the process until everything is in the correct order.

Once I’m happy, I begin to block out the basic colors. At this point. I only need four colors: blue (skin), purple (clothes), red (gore), and dark blue (outline). I mix these colors up in the color mixer and add them to my palette, then apply them to the relevant areas.

Step 6

Now that I can see the linework, I’m going to go around the piece and tweak the line weight where I think it’s required. I like the line weight to be nice and chunky, so using the Direct Selection Tool (A), I grab the points on the outline which are then tweaked to my liking.

Also at this point, I notice that the teeth have no outline. I select the teeth using the Select Tool (V) and make a direct copy (Edit &gt ;Copy), which I then paste directly below the originals (Edit > Paste in Back). Then I recolor the new teeth, set the color to black and once again, and resize the outline using the Direct Selection Tool (A).

The left eye currently sits outside the socket, so we just need to poke that bad boy back into his hole. Using the Selection Tool (V), select both the eyeball and the socket, then with both selected navigate over to the Pathfinder window and apply Intersect Shape Areas.

This will remove all the areas outside of what eyeball is peering through the socket. For future reference, if we were to now click on the Expand button located on the Pathfinder window, this would remove all the invisible areas, leaving just the white shape of the eye behind. However, since your eyeball may not be peering in the desired direction at this point, we’ll leave it as it is.

Step 7

OK, so right now we have a straightforward little blue guy, and what we want to do is mess him up a little. You can hack into your artwork any way you please, but in this instance I’m looking at that top lip, which in my original sketch is tattered and torn.

First, I draw the shape of the ripped flesh using the Pen Tool. Once I have a shape I’m happy with, I then select the blue face shape and make a copy, which I then paste directly above (Edit > Copy, Edit > Paste in Front). I also perform the same action for the tattered flesh shape.

With both the copies selected, I once again use the Pathfinder palette and this time I apply the Subtract From Shape Area option. This punches the top shape through the bottom shape, and you are left with the tattered bottom lip. Now click on the Expand button we talked about earlier and you will be left with one shape

Now repeat the same steps with the right eye socket, so we can knock the eyeball back (Object > Arrange > Send Backward) behind the socket. We now have both eyes peeping from within the skull!

Step 8

Now that the face is the shape we want we can create the outline for it. Make a copy (Edit > Copy) and then paste the copy directly behind the original (Edit > Paste in Back). With the object still selected, use the Eyedropper Tool (I) to change the color to black. Now use the Direct Selection Tool (A) to resize and tweak the linework to create a nice chunky outline.

Step 9

I’m now approaching the point where I have the zombie in one piece, so before I start working on the little details I’m going to color the rest of his clothing. The colors I mix for my zombies should have that touch of grubbiness about them, so whatever colors I choose I throw in some black on top. This is where creating the document in CMYK helps, as it’s easier to mix your palette together.

Step 10

Now that I have my colors, I want to give my zombie a bit of depth and to do this I’m going to add some shading. First of all I decide which direction the light is coming from, in this case from the left. Now using the Pen Tool, I begin creating the areas where the zombie’s skin is lighter and the areas which will be darker.

Once I have created the shapes, I mix up a lighter version of the zombie flesh tone and a darker version. Next, I apply these colors to the shapes just created. With the shapes still selected, I drag their layers so the shapes sit below the face shape.

Select the layer with the face shape on top and with all three layers selected I create a new layer mask (Object > Clipping Mask > Make). The top object, in this case the face, becomes a mask with the two other shapes within it. The mask at this point will become invisible, so ensuring only the face is selected, navigate to your swatches where you can reapply the zombie skin color.

Repeat this process for each element until you have shaded the full figure.

Step 11

Now is the time to add the smaller details to the figure, like creases in the clothing and cracks in the skin. Using the Paintbrush Tool (B) and a brush I have previously created, I move around the relevant layers and start painting in the details. You can create your own brush, or use one of the brushes which come with Illustrator. I use the Pen Tool (V) with a black fill and no stroke for larger areas.

Step 12

Now that we have our zombie, we need some blood! I apply the blood the same way that I applied the shading, using the masks I have previously created. However unlike the shading, the blood applied to the figure has the opacity altered.

For this figure, I’m just adding blood stains to where he has wounds, so that means his face, arm, and chest. A lower opacity allows for the details behind these stains to show through, giving a little more depth.

Step 13

This little fellah still needs some added gruel I feel, and with a stomach wound like that, I think a pool of blood is the way to go. I create a new layer that I call “POOL” and place it below all the other layers.

Within this layer, I draw a puddle shape that I then color red. I then make a copy of the lower half of the zombie, and group (Objects > Group) the copied elements together. These grouped items are then placed into the “POOL” layer. Using the Free Transform Tool (E), I flip the group horizontally and then transform it so that it is a shorter reflection of the original zombie figure.

Once I’m happy with its size and position, I select it along with the pool shape and create a mask of the pool shape with the reflected figure within it. Now to give the reflection that crimson tint I simply draw a red shape above the reflection within the pool mask. Once again I alter the opacity to ensure you can se the zombie reflection through it.

Step 14

I want to soften the skin of the zombie, so I select all of the shaded and lit areas which I have masked off earlier in the tutorial. I than apply a gaussian blur to these areas. This gives the skin a spongier feel, as every zombie should have.

Conclusion

You now have the first member of an ever-swelling army of the undead!

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.