And with the basic shape you can determine if our character is going to be slim, fat or standard.
And we can fill it with any color we want, remember that we’re doing a generic character. We decided to use a blue gradient on this case.
And now we proceed by making the muscles, which are going to be created individually.
Radial gradients can help generate volumes easily and using only two basic colors, remember that if you want to change the gradient’s position you can always hit the G letter in your keyboard.
Now the next muscle, similar to the previous one.
Continue with the next abdominal muscle, select your pen tool and draw it.
The gradient will remain the same across all the muscles, what will change are the angle and aspect radio values of each object.
For the upcoming set of muscles (deltoid), we will make use of the mesh tool, which is an awesome way of working with volume, first of all draw the muscle’s shape with the pen tool.
Now select the mesh tool and by clicking on the extremes make the following.
Using the Mesh tool click over each one of the handlers and give them a black fill.
And now click over the middle handler and switch its filling for a blue tone.
And finally switch the blending mode of the object to screen.
Copy paste (Ctrl + C, Ctrl + F) the muscle and paste it on the left arm, you won’t need to repeat the whole mesh process.
For the pectorals we will do the following:
And then copy paste it (Ctrl + C, Ctrl + F) so you can reflect it after that.
And now another mesh, just like before, take your pen tool and draw the initial shape.
And once again, you need to make use of the mesh tool to develop the following structure:
And from this point is exactly the same, black on the extreme handlers, blue in the middle and finally switch the blending mode to screen.
Duplicate the muscle and you will be done with this part of our character’s body.
There’s no gradient on the next object, just a plain solid color.
On top of that it goes the first revealing skin, draw it using your pen tool.
It’s time to go for the neck, so let’s make it.
Additional color details come at next, copy paste the neck (Ctrl + C, Ctrl + F) and you will work directly with the duplicate.
Usually when you see a person’s neck, you can notice the sternocleidomastoid, and our character won’t be the exception.
To add some texture, let’s add a similar shape inside this last one we did.
We can start insinuating the presence of our guy’s face.
We can start with the face from this moment, it’s not difficult if you pay attention to each step of this tutorial.
Keep adding shapes, you can achieve nice volumes by placing shape after shape and making a proper gradient management.
He can’t hear anything, I think we should give our guy a couple of ears :).
The inner part of the ear goes like this:
Select the two last elements to duplicate the whole ear and then reflect it to save you from having to draw the second ear too.
On top of this we draw a smaller object with the following properties:
And the last object of this highlight goes like this:
More highlights, this time we will be working with the nose.
On top of this highlight we’re going to place another shape.
More details, in any moment you will be surprise that the face is complete.
That was the nose, a couple of pixels down and we will be at the mouth’s location.
Proceed by adding details to our character’s mouth.
As usual, a smaller shape goes on top of the last one we did.
The lips are necessary to define every mouth’s contour, and that’s exactly what we will draw now.
Don’t forget to save often your progress, you will not know when the light will go off or your Illustrator will stop working, let’s make the next shape.
The chin’s highlight is also made out of 3 different elements, the first and larger one goes like this:
The middle highlight will have the following filling values:
Finally the little highlight that goes on top of the other two.
Our character is doing awesome this far, let’s zoom out and take a look and then we can proceed with the next element.
If you want him to be bald that’s fine, but we want to see him with hair.
You think that haircut is sexy?, well yeah but he can’t look himself at the mirror, he should have eyes.
Making eyes is something that requires plenty of details and careful to achieve a truly expression and just a plain sketch.
You’re doing great, don’t forget to eat for being entertained with this tutorial.
Copy paste (Ctrl + C, Ctrl + F) the first object that we made of our eye, make sure that it gets in top of the rest.
Let’s add a subtle detail at the bottom of the eye.
The white part of the eye is easy, it will take you not more than a minute.
Using the ellipse tool we will create the pupil, just 3 ellipses and you’re almost done with the eye.
As you can see the pupil is falling out of the eye’s area, to fix this you need to copy paste the white area and paste it on top, then select it along with the pupil and go to Object>Clipping Mask>Make.
And our eye is complete, now you only need to duplicate it and reflect it to save a lot of time.
The basic design is ready, now we just need to work on the highlights and shadows, like the next one:
Duplicate the shape but do not place it exactly in front of the original to avoid our character of looking extremely symmetrical.
The cheeks require some highlights to provide some texture to our character’s face, so we will repeat the 3 objects formula.
Now the middle shape, you know what to do.
Then we select the 3 objects and duplicate them to reflect them and put them in front of the left cheek.
Maybe a little highlight above the mouth will look good.
As usual, just duplicate them and reflect them to save time.
Our stylist is suggesting us to add many highlights and play with the opacity values in the meantime.
You can fly solo on this part, just let your imagination take over and add as many highlights as you want.
Some highlights at the sides of the neck will be a great idea.
Duplicate and reflect it and you’re done with that part.
You could add some extra highlights to the hair, let’s see how that looks.
And now repeat the formula across the whole hair, I can assure you that it will look really cool.
So far our character is looking really great, we only need to add a few more details and we’re done.
Some shadows need to be added below the chest, because it’s looking a little strange without them. We are about to add a 5 shape shadow to our character’s chest.
Now something simple, copy paste (Ctrl + C, Ctrl + F) this 5 shape shadow and resize it to fit over the abs, then group the 5 objects by hitting Ctrl + G and reduce the whole group’s opacity to 50 %.
Awesome, we’re just a couple of steps away, draw the following shape in front of the chest and turn it into a mesh, you know how to do it.
Fill all the mesh with black but the center, which must be filled using white.
Finally switch the blending mode to screen and reduce the opacity to 55 %.
And you’re done, duplicate the object to place it on the other side of the chest and our character has been completed, just add a subtle shadow to give it some ground and then let’s take a look at it.
Having this basic character design you can easily generate awesome designs such as the latest Iconshock set featuring social networks and classic superheroes, we hope that you have enjoyed this tutorial and feel ready to start making your own designs, see you on our next tutorial.
Hakim El Hattab
Hakim, contrary from what the name may imply, hails from Sweden and brings us his amazing development and code skills through his website, in which he periodically publishes his thoughts on code and interactivity. He has also gained some renown as one of the few pioneers who pushes the limits of web development in regards to interactivity, as he often says that he’s “motivated by a need to create distracting interactive contraptions” for which he has won several awards. When he’s not working on further developments of the Qwiki social sharing platform (which is his current stable job) or playing around with one of his personal projects, you can find him writing articles for .Net Magazine, which are high quality tutorials on HTML5 basics, his preferred platform. In an interview, he emphasizes: “There are still projects that are more suitably executed in Flash but my rule of thumb is if it can be done in HTML then it should be done in HTML. Flash is my fallback.” One of the aforementioned articles gives you four essential HTML5 Canvas tips, which are always useful, while another one is a detailed tutorial on how to make a “page flip” effect using HTML5. Hakim has made several interactive web apps in his free time to explore his passion for interesting and fun interactions and his virtuous-level proficiency at HTML 5. You can check out his most famous projects Sketch Toy and Sinuous, and have a good time.
