Android Icons: Get more than 15000 android icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Vector superhero tutorial

Comments and suggestions in here

When you’re starting to work in digital media, some things are a little bit difficult to translate for the analogical style to the vectorial and bitmap fields. Usually doing things like smooth gradients, using the pen’s hardness to define volume and more manual techniques are difficult to adapt at first to the graphic interfaces of programs such as Illustrator and Photoshop. Today we are about to take a lesson like the ones you took when you were at design school, you’re going to learn how to create the basic character design for an illustration.

1. Set up your workspace

The first thing you need to do is go to File>new and setup your canvas, we defined a 650 X 400 px document and color mode set to RGB while resolution has been adjusted to 72 dpi, these last two are specifically design for working on digital designs (not going to be printed).

characterh01

2. Starting to work

OK, the first thing we need to do is the trunk, select the pen tool to draw the basic body shape.

characterh02

And with the basic shape you can determine if our character is going to be slim, fat or standard.

characterh03

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.

characterh04

characterh05

And now we proceed by making the muscles, which are going to be created individually.

characterh02

characterh06

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.

characterh07

Now the next muscle, similar to the previous one.

characterh10

characterh09

Continue with the next abdominal muscle, select your pen tool and draw it.

characterh02

characterh11

The gradient will remain the same across all the muscles, what will change are the angle and aspect radio values of each object.

characterh12

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.

characterh02

characterh13

Now select the mesh tool and by clicking on the extremes make the following.

characterh14

characterh15

Using the Mesh tool click over each one of the handlers and give them a black fill.

characterh16

And now click over the middle handler and switch its filling for a blue tone.

characterh17

And finally switch the blending mode of the object to screen.

characterh18

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.

characterh19

For the pectorals we will do the following:

characterh02

characterh20

And then copy paste it (Ctrl + C, Ctrl + F) so you can reflect it after that.

characterh21

And now another mesh, just like before, take your pen tool and draw the initial shape.

characterh02

characterh22

And once again, you need to make use of the mesh tool to develop the following structure:

characterh14

characterh23

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.

characterh24

Duplicate the muscle and you will be done with this part of our character’s body.

characterh25

There’s no gradient on the next object, just a plain solid color.

characterh02

characterh26

On top of that it goes the first revealing skin, draw it using your pen tool.

characterh02

characterh27

characterh28

It’s time to go for the neck, so let’s make it.

characterh02

characterh29

characterh30

Additional color details come at next, copy paste the neck (Ctrl + C, Ctrl + F) and you will work directly with the duplicate.

characterh31

characterh32

Usually when you see a person’s neck, you can notice the sternocleidomastoid, and our character won’t be the exception.

characterh02

characterh33

characterh34

To add some texture, let’s add a similar shape inside this last one we did.

characterh02

characterh35

characterh36

We can start insinuating the presence of our guy’s face.

characterh02

characterh37

characterh38

We can start with the face from this moment, it’s not difficult if you pay attention to each step of this tutorial.

characterh02

characterh39

characterh40

Keep adding shapes, you can achieve nice volumes by placing shape after shape and making a proper gradient management.

characterh02

characterh41

characterh42

He can’t  hear anything, I think we should give our guy a couple of ears :).

characterh02

characterh43

characterh44

The inner part of the ear goes like this:

characterh02

characterh45

characterh46

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.

characterh47

Time to add some highlights, on this case the chosen spot is going to be the forehead.

characterh02

The first object has a reduced opacity of 50 %.

characterh48

characterh49

On top of this we draw a smaller object with the following properties:

characterh02

characterh50

characterh51

And the last object of this highlight goes like this:

characterh02

characterh52

characterh53

More highlights, this time we will be working with the nose.

characterh02

characterh54

characterh55

On top of this highlight we’re going to place another shape.

characterh02

characterh56

characterh57

More details, in any moment you will be surprise that the face is complete.

characterh02

characterh58

characterh59

That was the nose, a couple of pixels down and we will be at the mouth’s location.

characterh02

characterh60

characterh61

Proceed by adding details to our character’s mouth.

characterh02

characterh62

characterh63

As usual, a smaller shape goes on top of the last one we did.

characterh02

characterh64

characterh65

The lips are necessary to define every mouth’s contour, and that’s exactly what we will draw now.

characterh02

characterh66

characterh67

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.

characterh02

characterh68

characterh69

The chin’s highlight is also made out of 3 different elements, the first and larger one goes like this:

characterh02

characterh70

characterh71

The middle highlight will have the following filling values:

characterh02

characterh72

characterh73

Finally the little highlight that goes on top of the other two.

characterh02

characterh74

characterh75

Our character is doing awesome this far, let’s zoom out and take a look and then we can proceed with the next element.

characterh76

If you want him to be bald that’s fine, but we want to see him with hair.

characterh02

characterh77

characterh78

characterh79

You think that haircut is sexy?, well yeah but he can’t look himself at the mirror, he should have eyes.

characterh02

characterh80

characterh81

Making eyes is something that requires plenty of details and careful to achieve a truly expression and just a plain sketch.

characterh02

characterh82

characterh83

You’re doing great, don’t forget to eat for being entertained with this tutorial.

characterh02

characterh84

characterh85

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.

characterh86

Let’s add a subtle detail at the bottom of the eye.

characterh02

characterh87

characterh88

The white part of the eye is easy, it will take you not more than a minute.

characterh02

characterh89

characterh90

Using the ellipse tool we will create the pupil, just 3 ellipses and you’re almost done with the eye.

characterh91

characterh92

characterh93

characterh94

characterh95

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.

characterh96

characterh97

And our eye is complete, now you only need to duplicate it and reflect it to save a lot of time.

characterh98

The basic design is ready, now we just need to work on the highlights and shadows, like the next one:

characterh02

characterh99

characterh100

Duplicate the shape but do not place it exactly in front of the original to avoid our character of looking extremely symmetrical.

characterh101

The cheeks require some highlights to provide some texture to our character’s face, so we will repeat the 3 objects formula.

characterh02

characterh102

characterh103

Now the middle shape, you know what to do.

characterh02

characterh104

characterh105

characterh107

Then we select the 3 objects and duplicate them to reflect them and put them in front of the left cheek.

characterh108

Maybe a little highlight above the mouth will look good.

characterh02

characterh109

characterh110

As usual, just duplicate them and reflect them to save time.

characterh111

We need our stylist to help us beautify our character’s hair, he needs a lot of highlights to gain volume.

characterh02

characterh112

characterh113

Our stylist is suggesting us to add many highlights and play with the opacity values in the meantime.

characterh02

characterh114

characterh115

You can fly solo on this part, just let your imagination take over and add as many highlights as you want.

characterh116

Some highlights at the sides of the neck will be a great idea.

characterh02

characterh117

Duplicate and reflect it and you’re done with that part.

characterh118

You could add some extra highlights to the hair, let’s see how that looks.

characterh02

characterh119

characterh120

And now repeat the formula across the whole hair, I can assure you that it will look really cool.

characterh121

So far our character is looking really great, we only need to add a few more details and we’re done.

characterh122

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.

characterh02

characterh123

characterh124

characterh02

characterh125

characterh126

characterh02

characterh127

characterh02

characterh128

characterh02

characterh129

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 %.

characterh130

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.

characterh02

characterh14

characterh131

Fill all the mesh with black but the center, which must be filled using white.

characterh132

Finally switch the blending mode to screen and reduce the opacity to 55 %.

characterh133

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.

characterh134

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.

characterh00


63 Responses to “Vector superhero tutorial”

  1. It is an excellent tutorial, many thanks for your time and for sharing this knowledge.

  2. great vectors of these tutorials! I love especially the super-hero !

  3. shane shaw
    November 10th

    Great tutorial, thanks.

  4. nice tutorials i think u take a lot of time to create it

    • TS Editorial
      November 10th

      Hi Joseph, thanks a lot for your kindly message, we put our best efforts on pulling out each one of our articles…

  5. Great tutorial…really in depth, good work and congrats!

    Thanks!

    • TS Editorial
      November 24th

      Thank you for the kindly message Fergus, we put all our effort in every tutorial that we release to always surprise our community…

  6. Coolest of the month….

  7. This is a great tutorial. I love the details.

  8. Very good tutorial. Its gradient using system is so nice! :)

  9. I always struggle when it comes to creating character images like this so thank you for such a thorough walk through.

  10. Charles Swift
    April 30th

    Great! I’d like to see more tutorials like this one. Do you have more already? I’ll keep on the look. 

    • TS Editorial
      May 2nd

      Sure Charles, we’re always working on new great tutorials for all of you, is there anything special within your mind?…

  11. very cool tutorial ! I really like the super heroe !

    • TS Editorial
      May 23rd

      Hey thanks buddy!, glad you liked it…

  12. The vectors are really cool, only I think the muscles and pecs stand out to much, my opinion.
    What I did to solve that is use less gradiant and more color in them.

    Thanks.

    • TS Editorial
      July 7th

      Hey that’s a clever idea, thanks for the suggestion :)…

  13. So effective post of Vector superhero tutorial.
    Thanks for sharing this awesome article.

  14. That’s great, I’d love to see the results.

  15. An unknown thing have learned in a few minutes just having your teaching by post.

    • Designer
      September 17th

      We are glad we have served you well. keep tuned for more awesome tutorials

  16. Clipping Path
    October 21st

    thanks for share a great tutorial about Vector wait for your next tutorial

  17. Nice tutorial…Thanks a lot 

  18. Amazing tutorials. Thanks for share such a great post.

  19. A nice presentation that will help others to learn it.

  20. Meer Anis
    February 13th

    A good presentation that helps the people to learn easily. 

  21. Manjorul
    February 13th

    Just thinking what should I write to appreciate the blog you have posted. In a word awesome except nothing!

  22. [...] More here: Vector tutorial: Character superheroes illustration set … [...]

  23. [...] Vector tutorial: Character superheroes illustration set … [...]

  24. Fencing Post says:

    [...] Vector tutorial: Character superheroes illustration set « Photoshop tutorials & illustrato… [...]

  25. [...] design school, you’re going to learn how to create the basic character design for an illustration.Source LinkHelp Us Grow And Share This Post! Tweet Share(function() { var s = [...]

  26. [...] Vector tutorial: Character superheroes illustration set … [...]

  27. [...] Vector tutorial: Character superheroes illustration set [...]

  28. [...] Vector tutorial: Character superheroes illustration set [...]

  29. [...] Vector tutorial: Character superheroes illustration set [...]

  30. Vector tutorial: Character superheroes illustration set…

    Today we are about to take a lesson like the ones you took when you were at design school, youre going to learn how to create the basic character design for an illustration….

  31. [...] Vector tutorial: Character superheroes illustration set [...]

  32. [...] Vector tutorial: Character superheroes illustration set [...]

  33. [...] Vector tutorial: Character superheroes illustration set [...]

  34. [...] Vector tutorial: Character superheroes illustration set [...]

  35. [...] Watch Out for in New ClientsView the article50+ Creative Chocolate Package DesignsView the articleSuperhero Character Illustration TutorialView the article20+ Brochure Design Examples: Ideas for Your Print ProjectsView the [...]

  36. [...] 20. Character superheroes illustration set                  [...]

  37. [...] 20. Character superheroes illustration set                  [...]

Leave a Reply

Comments

*