Adobe Illustrator continues to receive praise from the press. Read our materials to discover the joys of using it on your own.  Home Vector Graphics Adobe Illustrator Character Superheroes Illustration Set

Character Superheroes Illustration Set


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.

image 1

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

image 2

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.

image 3

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

image 4

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.

image 5

image 6

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

image 7

image 8

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.

image 9

Now the next muscle, similar to the previous one.

image 10

image 11

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

image 12

image 13

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

image 14

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.

image 15

image 16

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

image 17

image 18

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

image 19

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

image 20

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

image 21

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.

image 22

For the pectorals we will do the following:

image 23

image 24

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

image 25

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

image 26

image 27

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

image 28

image 29

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.

image 30

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

image 31

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

image 32

image 33

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

image 34

image 35

image 36

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

image 37

image 38

image 39

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

image 40

image 41

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

image 42

image 43

image 44

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

image 45

image 46

image 47

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

image 48

image 49

image 50

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

image 51

image 52

image 53

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

image 54

image 55

image 56

He can't  hear anything, I think we should give our guy a couple of ears image 57 .

image 58

image 59

image 60

The inner part of the ear goes like this:

image 61

image 62

image 63

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.

image 64

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

image 65

The first object has a reduced opacity of 50 %.

image 66

image 67

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

image 68

image 69

image 70

And the last object of this highlight goes like this:

image 71

image 72

image 73

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

image 74

image 75

image 76

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

image 77

image 78

image 79

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

image 80

image 81

image 82

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

image 83

image 84

image 85

Proceed by adding details to our character's mouth.

image 86

image 87

image 88

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

image 89

image 90

image 91

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

image 92

image 93

image 94

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.

image 95

image 96

image 97

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

image 98

image 99

image 100

The middle highlight will have the following filling values:

image 101

image 102

image 103

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

image 104

image 105

image 106

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

image 107

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

image 108

image 109

image 110

image 111

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

image 112

image 113

image 114

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

image 115

image 116

image 117

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

image 118

image 119

image 120

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.

image 121

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

image 122

image 123

image 124

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

image 125

image 126

image 127

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

image 128

image 129

image 130

image 131

image 132

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.

image 133

image 134

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

image 135

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

image 136

image 137

image 138

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

image 139

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

image 140

image 141

image 142

Now the middle shape, you know what to do.

image 143

image 144

image 145

image 146

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

image 147

Maybe a little highlight above the mouth will look good.

image 148

image 149

image 150

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

image 151

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

image 152

image 153

image 154

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

image 155

image 156

image 157

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

image 158

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

image 159

image 160

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

image 161

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

image 162

image 163

image 164

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

image 165

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

image 166

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.

image 167

image 168

image 169

image 170

image 171

image 172

image 173

image 174

image 175

image 176

image 177

image 178

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

image 179

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.

image 180

image 181

image 182

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

image 183

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

image 184

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.

image 185

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.

Character superheroes illustration set



Author's URL: tutorialshock
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Adobe Illustrator continues to receive praise from the press. Read our materials to discover the joys of using it on your own. More Adobe Illustrator Tutorials: Featured Materials | Fresh Materials | More Adobe Illustrator Tutorials at Vectorials.com


Like us to: