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.

This character was originally made for an Envato site which didn’t take off, and the artwork wasn’t being used, so I’ve reworked this a bit to become a Vectortuts+ character. Let’s check out the process of making this website mascot and learn loads of tips along the way!

Introduction

Character and mascot design are nothing new and have been around for a long time, but with the advent of the internet it has seen somewhat of a renaissance. On the net we are faced with a daily barrage of information, data and imagery. The use of a site mascot can be an effective way to cut through this information overload and connect with the viewer on an emotional level. Mascots and characters can be used as part of a logo, or independently, but the advantage they have over a logo alone is that they have character and a personality all of their own.

I used Adobe Illustrator to create the mascot using its most basic of tools and functions, and for that reason I am going to concentrate on showing the development and workflow involved. Hopefully this will give you an insight into character creation and will assist you to create your very own mascots.

I’ll also be giving a roundup of some of the best character design sites on the web and dropping some tips as we go along.

Character Freebie

For added inspiration and as a bonus the good people at Vectortuts+ are giving you the opportunity to download the original files for your own use, which is a super freebie. See the download file for further usage information. The character is available in both AI and EPS formats.

The Brief

Although this is fictitious study, it was originally based on an actual Envato project. However, for the purposes of this tutorial, I’m going to take it that this mascot is going to be for the Vectortuts+ site, which gives us a target to use as an example.

The mascot is to be “The Tuts Guy” and he’s to be representative of of the Vectortuts+ readership, and also the writers of the tutorials. A positive, friendly disposition and appeal to all age groups. To appear professional but still casual. Also, he needs to fit in with the site’s color scheme, to be able to incorporate the character into the page layout easily.

Before I start, Here are a Few Things to Keep in Mind

By their nature site mascots are for use on the web. Remember to set your file to RGB.

As mentioned in The Brief, the character must be able to fit into the color scheme of the site. With a human mascot this can be done by using the clothing and hair to match or accent the site. With an animal or a fictitious creation you have much more flexibility.

Give careful consideration to the target audience, the image, and the site. Let’s look at some more tips as well.

Proportions

Is the character to be integrated alongside a logo or header? If so the canvas is usually a wide strip and using a tall upright figure can lead to it looking lost and the facial features diminishing. So what can be done about this?

Make the characters height as close to it’s width as possible.

Cropping the Image

By cropping the upper part of the body and concentrating on the most important features, you can save valuable space and increase the mascots impact. You can also see how the more condensed character lends itself much better to the format of the header.

The Dynamics of the Image or Depth of Field

It can be very helpful to the designer putting the site together, if you provide them with a mascot in a flat, side on elevation as this can make it much easier to integrate into the layout of the site. Alternatively, depth of field can make for a more interesting image.

Line Weights and Outlines

I have no hard and fast rule when it comes to line weights or wether to use line work at all. While not using any line work at all can give a light feel to the mascot, it can also become lost in the background, especially if it’s a busy one. Using line work and/or a heavier outline can give the image more presence and definition.

It’s All in the Eyes

There is a saying that the eyes are the window to the soul. With character design the eyes are the first thing that we connect with. We connect when we first view a character in the same way as when we first meet someone, so it’s important to consider this in your design. The eyes can communicate a wealth of emotions very quickly and add life to a character.

It’s easy to think that the more complex the rendering of the eyes are, the better, but in fact when done properly, a couple of dots can do this just as well.

Getting Started, and Putting My Ideas Onto Paper

Although I have a Wacom tablet, I very rarely use it for sketching out ideas. I opt in favor of pencil, paper, and the ability to make sense out of a chaotic pile of ideas spread around my work area.

At this stage, I try to get anything and everything down on paper before sifting through it to see what works for me. I then refine the roughs before using a layout pad for the final roughs. I prefer layout pads to tracing paper, as they are much cheaper and the pencil work is less prone to smudging.

Time to Go Digital

I very rarely send out pencil roughs to a client. I usually go the extra mile and work them up into vectors, especially if there are to be a number of poses of the same character so they have a clear idea of the finished result. This has led to me hardly using a scanner in favor of taking a snap of the pencil roughs with a digital camera, or even the camera on my cell phone, which is quick and easily imported via bluetooth.

Here I have worked up a number of variations for the client to look at.

I’m going to take it that I’ve had feedback and we’re going to go for the No.4 character, but I feel it would work better with a goatee beard removed.
Here is the main character (minus goatee) to appear on the home page of the web site, but I now need to develop the characters for the rest of the site.

Back to the Visuals

These are all going to have a very similar placement to the main character so there is the opportunity to re-use elements of the original character. This not only cut down your workload dramatically, it also adds a sense of continuity to the site. Having the separate parts of the character on individual layers is a great help here, as moving the arms and tilting the head can transform the pose.

There is to be no background to the the mascots to suggest their purpose, but adjusting the posture and the addition of some simple props can communicate this with the viewer.

Using the original drawing for the main character in conjunction with a layout pad gives me a bit of a head start when it comes to the other poses. As for the rest of the poses, it is a case of submitting these to the client and making amendments as necessary until they are happy with them.

Below are the finished characters. All that’s left to do is to supply them to the client in the format of their choice. In this case, you can download the original files for your own use here.

Further Information and Inspiration

Here is a roundup of some of my favorite character design based sites for further inspiration:

• Mojizu.com – Moji is the Japanese word for character and that’s what this site is all about. It’s a community of character designers where you can sign up for a profile and submit your own Mojis. A weekly Moji War pitches them against each other in a contest to find the Moji Champ through a series of rounds.

• Ilikecharacters.com – A fairly new site dedicated to showcasing the best in character design created by the artist Steve Rack.

• characterhunter – A blog following a continued search for character design on the streets of Tokyo. A good one if like me you like kawaii (cute). Written in French about Japanese design, this site shows how mascot design can traverse language and cultural differences.

• Smashing Magazine 40 Character Illustration Tutorials – A monster round up of 40 character design tutorials.

• vinylpulse – Character design that has crossed over into the 3D world.

• patchtogether – If you’ve ever fancied getting your work made into vinyl this could be the place for you.

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