Mascots are becoming increasingly popular in web design. In this intermediate Illustrator tutorial we will show you how to create a vector character mascot from a sketch in Adobe Illustrator CS4. The techniques in this tutorial can easily be applied to other illustrations, icons, and design elements; as well as legacy versions of Illustrator.

Final Image

Below is the final illustration we will be working towards.

Tutorial Details

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

Step 1

To start, create a sketch of your character. I like to use my Wacom pen tablet and Photoshop to create the sketch, but you can use whatever medium you choose. After creating the sketch, scan it (if you are using traditional media) and save it on you computer in an easily accessible spot.

Step 2

Now to Illustrator. Create a new document and place you sketch in your new document by going File > Edit > Place. Find you sketch on your computer and center the image on your document.

Step 3

Once placed, choose Template from the pop-up menu of the Layers panel, making it a little easier to trace the image in the following Steps.

Step 4

Now that we have the sketch on a template layer we can create new layer to trace the sketch. To create a new layer, press the new layer button in the bottom right of the Layers panel. Creating multiple layers helps with organization and workflow. It is also a good idea to name the layer by double-clicking on the new layer and renaming it in the Layers Options dialog. Name the first layer Face.

Step 5

With the Pen tool (P), start tracing the dominate shapes of the face, making sure you close the paths for easy filling, like the skin of the face and the hair. For some of the other face elements like the nose and mouth outlines, you can keep them as open paths. In the next Steps we are going to create a brush that make it easy to give the paths a tapped stroke look.

Step 6

Now that we traced the shapes and lines of the face we can create the irises of the eyes with the Ellipse tool (L). Create three ellipses, one big, the second smaller and centered within the bigger one, and the third off to side of the centered ellipse.

Step 7

Use the Ellipse tool (L) a create an oblong ellipse, considerably wider than it is tall. Drag the ellipse in the Brush panel and chose New Art Brush from the New Brush dialog. Once in the Art Brush Options dialog, change the Colorization to Tints, making it easy to change the color of the brush.

Step 8

Select the open paths from your trace, and select the new brush form the Brush panel. You might have to change the Stroke Weight on some of the paths from the Stroke panel depending on if the stroke needs to be thicker or narrower.

Step 9

Fill in the closed shapes with appropriate color and change the stroke color for the brushed paths.

Step 10

Using gradients creates a sense of a light source. For this tutorial we are going to imagine the light source coming from the left side of the character. Start with the face shape, and create a linear gradient from the Gradient panel. Use your skin color for the left Color Stop and a darker skin color for the right Color Stop in the gradient. By default you gradient is probably already looking correct, but if not, use the Gradient tool (G) and adjust the gradient from left to right, making the lighter part of the gradient on the left of the face.

Step 11

Go through the rest of you closed shapes and create linear gradient keeping in mind your light source. Also keep in mind you want smooth transition from shape to shape. A good example is the right ear shape. If you adjust the gradient so the lighter part of the gradient is on the left side, the ear will look funny. A simple fix is to reverse you gradient so the colors next to each other match. For the eye make the gradient vertical so the darker part of the gradient is at the top of the iris shape.

Step 12

The face is starting to look pretty good, but let’s add some more shapes and gradients to give a little more depth and character. Start by creating an ellipse with the Ellipse tool (L). Make the ellipse about the size of an eye and place right below the right eye. Fill the ellipse with a radial gradient from the gradient panel. Change both of the Color Stops to a pink skin color. Then, change the Opacity in the Gradient panel of the second Color Stop to 0. Copy (Command + C) and Paste (Command + V) the ellipse and place under the opposite eye.

Step 13

For the next shape, use the Pen tool (P) and create a shape that distinguishes the contour of the nose mouth and eyes. Next, select the main face shape, Copy (Command + C), and Paste in Front (Command + F ). Select the copy and the new face shape and press the Intersect button from the Pathfinder panel. FIll the intersected shape with the same gradient as the previous Step’s ellipses except make the gradient linear. Adjust the gradient with the Gradient Tool (G) and go Object > Arrange > Send Backward (Command + [) until the shape is arranged right after the face shape.

Step 14

Create a new layer from the Layers panel and name it Body. In the Layers panel drag the Body layer below the Face layer.

Step 15

In the new Body layer, trace the body of you character, like you did the head. Also trace the keyboard of the laptop, but not the screen.

Step 16

Fill the shapes in with some basic color like with the face.

Step 17

Also just like the face, fill the shapes in with gradients and draw extra shapes to create more depth. Great places to do this are in the clothing and skin.

Step 18

Create a new Layer and name it Computer.

Step 19

Trace the laptop screen with the Pen tool (P) like you have previously done.

Step 20

Again, fill it in with some basic color, add some gradients to create some depth, and finish it up with some extra Pen tool (P) drawn shapes. Use the technique in Step 13 to Intersect the new shapes so they align with the object below.

Step 21

Create a new Layer and call it Background. Arrange the Background layer in the Layers panel so it is behind all layers except the Template layer.

Step 22

To create the background shapes, first create an oblong ellipse with the Ellipse tool (L). With the Selection tool (V) rotate the ellipse slightly to the right. Copy (Command + C) the ellipse and Paste in Back (Command + B). With the copy selected, scale it slightly with the Selection tool (V). To scale it proportionally from the center, hold down Command + Option/ Alt + Shift. while scaling.

Step 23

Hold down the Option/Alt key and drag out a copy of the original ellipse to the bottom right side of the other two ellipses. Copy (Command + C) the original ellipse and Paste in Front (Command + F). Select the copy and offset copy and press the Intersect button in the Pathfinder panel.

Step 24

Fill the first two ellipse with a light blue-green and a dark blue-green. For the offset ellipse, fill it with a radial gradient with the first Color Stop a light green-blue and the second a darker blue-green color.

Step 25

We are pretty much done, but we can customize it more by adding a logo to the t-shirt and computer screen. For this tutorial, Grant was kind enough to let me use the Colorburned logo. No matter what logo you are using, place a copy on the Body and Computer Layer.

Step 26

After placing the logos, we want to make sure that the look like they have the correct perspective. For both logos we can get away with just rotating them slightly to the left. For some logos you might have to alter them considerable more. I suggest using the Transform tool. With the Transform tool (E), click and hold an anchor point, then press the Command Key (Ctrl for Windows), and adjust accordingly. Make sure you click and hold on the anchor before you press the Command Key, or else it will not work.

Step 27

For the logo on the t-shirt, we are going to keep the Colorburned branding color, but for the logo on the computer, we are going to make it look like it is stamped into the laptop. To start fill the computer logo with a gradient similar to the lightest gradient in your computer, but with both Color Stops lighter. Adjust the Gradient so the darker color is at the bottom of the logo. With the logo still selected, go Object > Path > Offset. In the Offset dialog, change the Offset to 3 px (this can change depending on the dimensions of your illustration) and choose Round from the Joins drop-down menu. Fill the offset shape with a linear gradient with the first Color Stop white and the second Color Stop a dark computer color. Adjust the gradient so the darker part of the gradient is at the top of the offset.

Step 28

Now all that is left to do, is press the visibility icon in the layers panel for the Template layer and you are done!

Final Image

Again is the final character illustration.

You may download the source file for this tutorial below.  The contents of the download however are for educational purposes only and cannot be used for personal or commercial use, sold, or redistributed without the expressed consent of Colorburned Creative.

File type: .ai
Compatibility: Adobe Illustrator
Size: 170 KB