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 robot character icon with illustrator

Comments and suggestions in here

Hello guys, on today’s tutorial, we are going to learn how to develop an original robot character using Adobe Illustrator. We are going to need a bit of inspiration, some basic Illustrator tools and most of all, the willing of have fun and enjoy the design process. It ain’t going to be a realistic robot illustration but a cartoon-like one, OK, open up your Illustrator and let’s begin.

Look for inspiration

Well sure not all of us have the gift of being creative, but it’s also true that every person has the ability to imagine an be creative in different levels and areas. We want to make a robot, right?, so check out some robot designs and notice what do they have in common, having that established, it will be easier for you to design your original robot character.

robot01

Create the canvas

First of all, we need to create our canvas, which is going to be 800 px X 800 px, more than enough for us to place our artwork, the other important values are RGB color mode and 72 dpi, these last to are making reference to the fact that we will be working for screen instead of printed medias.

robot02

Time to start our robot

OK, the first thing that we’re going to do is the left arm of our robot; using the pen tool, let’s trace the following shape (remember that for making straight turns you need to click over the last anchor point and then continue drawing, otherwise, you will be making curved turns).

robot03

Try not to use many anchor points because that will reduce the smoothness of our shape.

robot04

Now we need to colorize our robot’s arm, use a gray tone for the stroke, which must be at 1 pt and basic brush.

robot05

As for the filling, we are going to use a radial type gradient, –129 angle and 100 % aspect radio.

robot06

robot10

robot11

robot12

This was a practice exercise for us to determine the proper gradient for the filling, it’s time to make some extra adjustments to make our robot’s arm to look great. Using the knife tool, let’s make some divisions similar to those on Futurama Bender’s arm, hopefully our robot doesn’t get as beer addict as our beloved Bender ha ha.

robot07

Take a look at the first cut, all the rest are exactly the same.

robot08

Complete all the divisions until you finally get something like this:

robot09

With the divisions made, we proceed adjusting each part’s properties, let’s start from above. The stroke will remain the same across the whole arm, is the fill what we’re going to modify, but not on its color properties, just in terms of the gradient position. Hit the G key to see the gradient modifier, all you need to do is switch every part’s gradient position so we can work out a nice volume vibe.

robot13

Notice that the G key allow us to modify the gradient beyond the standard adjustments, let’s see all the remaining part to see where the gradient handler needs to be placed on each occasion.

robot14

robot15

robot16

robot17

robot18

robot20

robot21

Zoom out and take a look at the arm, it looks great, isn’t it?.

robot22

Next thing to do is the shoulder, which is basically an ellipse filled with a gradient and a stroke. Using the ellipse tool, draw the shoulder and give it a 2 pt stroke.

robot38

If you hold Shift while making specific shapes, you can make them perfectly symmetrical.

robot23

As for the fill, let’s use a 5 color gradient (radial type, 0 angle and 101 % aspect radio) and move the gradient center (G) towards the left side of the object.

robot24

As for the other colors, here are the screenshots.

robot25

robot26

robot27

Now copy paste the shoulder (Ctrl + C, Ctrl + F) and there are two things to do initially, first, remove the stroke and second, use the knife tool to divide it in two pieces, then clear the left part.

robot07

This is because we are going to make a shadow over the shoulder, is on these details where we reach quality on any design. Also move the gradient’s center to the left.

robot28

It looks nice but I’m not satisfied, let’s play with the transparency and switch the blending mode to multiply and the opacity to 50 %.

robot29

Next part is the torso, simply use the pen tool to draw it and give it a 2 pt stroke.

robot30

Regarding the fill, we used a 5 color gradient (radial type, –29 angle and 100 aspect radio) and moved the gradient’s center to the left.

robot31

And these are the color values left.

robot32

robot33

robot34

robot35

Using the pen tool let’s add a little detail that will indicate the area where the robot’s head will be placed.

robot03

The stroke properties will be 1 pt and basic brush.

robot36

Copy paste this line and move it a little bit over the original, then change the stroke color for a dirty green.

robot37

After this part, we are moving towards the right arm and for start, we’re going to make the hole where the arm goes into, use the ellipse for fulfilling this purpose.

robot38

Use a 2 color gradient for the filling (radial type, 0 angle and 100 % aspect radio).

robot39

Copy paste twice (Ctrl + C, Ctrl + F) this element, leave the first copy on the exactly same position as the original and as for the second copy, increase its size a little bit and move it towards the right.

robot40

Then select both copies and look for the pathfinder window at Windows>pathfinder.

robot41

Make sure that you still have the two copies selected, then click on the second button of the first row at the pathfinder menu. Apparently nothing will happen, but it did, we’ve just cleared the inner ellipse area from the big copy. We can now change its filling for a 2 color gradient (linear type and 0 angle).

robot42

With this base ready, we can start making the right shoulder, so grab the ellipse tool.

robot38

Assign to this shape a 2 pt stroke, basic brush.

robot43

We need a 5 color gradient for the filling, radial type, 0 angle and 98 % aspect radio.

robot44

Check below the remaining color values for this gradient.

robot45

robot46

robot47

Coming up are the left hand’s finger, simple task for us :), using the pen tool, draw the basic shape and place a 1 pt stroke on it.

robot48

As for the fill, let’s go with a 5 color gradient (radial type, –106 angle and 100 % aspect radio).

robot49

And these are the other color values that conform the gradient.

robot50

robot51

robot52

robot53

We are done with the first fingers, now let’s move on to the division stage, take your knife tool and let’s the operation begin.

robot07

Now we have our finger cut like this.

robot54

Like we did with the arm, let’s adjust the color properties of each one of the divisions. The stroke will remain the same all the time, so the adjustments will only occur in terms of the gradient.

robot55

robot56

robot57

Then we make the main body of the hand, for this purpose we use the ellipse tool.

robot38

For this object we will use a 1 pt stroke, basic brush.

robot58

And how should we fill it?, yes, with a gradient (radial type, 0 angle and 100 % aspect radio) :).

robot59

These are the same color values tan before, but just in case, lets check them out one more time.

robot60

robot61

robot62

Move to the right so we can start making the right arm, trace it using the pen tool.

robot03

And use a 1 pt line for the stroke of the object.

robot63

And now the gradient that fills the arm, you know what to do, the fill parameters will be radial type and 199 aspect radio.

robot64

And the other color values are the following:

robot65

robot66

robot67

robot68

And then comes the division, so grab the knife tool and start cutting.

robot07

And it will look like this.

robot69

As you know, every division must keep the same properties than before the original was cut, I’m talking about both the stroke and the filling gradient. All we need to do is hit the G key and start adjusting the gradient centers.

robot70

robot71

robot72

robot73

robot74

And done with this part, so far our robot character must be looking closer to this.

robot75

Let’s add another finger to the left hand, select the pen tool and start vectorizing.

robot03

We are using a 1 pt stroke for this finger.

robot76

Filling goes like this, a 5 color gradient (radial type, –116 angle and 100 % aspect radio).

robot77

And now take the knife tool and make the cutting, you already know how to do it :).

robot07

You must leave the finger looking like this.

robot78

And as usual, keep both the filling and stroke properties untouched, then hit the G key and start making the proper adjustments.

robot79

The two left have the following gradient’s center position.

robot80

robot81

Great, we are doing fine so far, it’s to finish this hand by making the last finger.

robot03

As usual, we set a 1 pt stroke for the exterior of the figure.

robot82

Then comes the gradient filling (radial type, –116 angle and 100 % aspect radio), the colors are exactly the same than the ones used on the other fingers.

robot83

After that, you know that it’s time for the cutting to start, so hurry up and select your knife tool.

robot07

And the cutting process must leave us with something like this.

robot84

We removed intentionally the filling so you can look with detail the figure, but on your computer, the filling should be there. Now hit the G key and start making the gradient adjustments.

robot85

robot86

robot88

robot87

And that finishes our left hand, next thing to do is our robot’s neck.

robot03

After drawing the basic shape, give it a 1 pt stroke, basic brush.

robot89

As for the filling, we will use a similar gradient with similar tones but the angle changes to 44.

robot90

Pay attention to the gradient’s center, you need to adjust it by hitting the G key. But anyway, we are going to divide it right now with out mighty knife tool.

robot07

The color values will remain the same both for the stroke and the gradient filling, all we need to do is press the G key and adjust the gradient centers.

robot91

robot92

robot93

Let’s add a subtle glow over the robot’s torso, for start select the pen tool and draw the basic shape. Then fill it with a black and white gradient, linear type and 0 angle.

robot94

Now to make our element more glow-like, let’s switch the blending mode to screen and reduce the opacity to 50 %.

robot95

Great guys, know we have reached the final part and we’re done with our robot, so keep it up.

Making the head

Right, things have been pretty easy this far, now it’s time to increase the difficulty of this tutorial, we are going to create our robot’s head. For start, we need to select the pen tool and draw the basic shape that will determine the working space from now on.

robot03

We now proceed implementing a 2 pt stroke to the object with a basic brush.

robot96

As for the fill, let’s use a five color gradient (radial type, 88.4 angle and 77.6 aspect radio).

robot97

robot98

robot99

robot100

I bet you’re probably saying at this moment something like “What the hell?, my gradient looks different!!!” and you’re right, that’s because we haven’t hit the G key, which allows to make changes to the gradient’s center. Use it and you will be able to get the same gradient as we did.

robot101

The next shape we need to trace is the first insinuation of our robot’s mouth.

robot03

This shape is particular in terms of the gradient, because we need to reduce to 0 % the opacity of one of the gradient’s colors, (the properties are linear type and 54.3 angle), there’s also a need of using the G key to move a little bit the gradient’s center.

robot102

robot103

Now a tiny line to demarcate the last gradient, just trace it with the pen tool.

robot03

And with a 1 pt stroke (basic brush) is more than enough.

robot104

Using the ellipse tool, let’s make a small shape on the top of robot’s head.

robot38

Use a black and white gradient (linear type and 0 angle) to fill it, then switch its blending mode to screen and reduce the opacity to 60%.

robot105

Maybe another glow will be a nice complement for this ellipse, let’s do it.

robot03

Similar process, fill with the black and white gradient (linear type and 0 angle) and adjust the blending mode to screen, then reduce the opacity to 50 %.

robot106

Let’s begin with the eyes, you can make them however you like, for example we are making them big and rounded.

robot03

OK, follow these next steps to complete the shape. First you need to fill the object with a 2 color gradient (radial type, 0 angle and 136 % aspect radio), then adjust the gradient’s center hitting the G key, finally, switch the blending mode to multiply.

robot107

robot108

Copy paste this element (Ctrl + C, Ctrl + F) and reduce its size a little bit, then move it to the right. After doing that, we need to modify the gradient’s colors, the new gradient will have a total of 4 colors, do not change the type, angle or aspect radio.

robot109

robot110

robot111

robot112

Copy paste (Ctrl + C, Ctrl + F) these two ellipses and place them at the left side of the head, as you can see, there’s a perspective issue, and that’s why you need to decrease the size of the duplicated element.

robot113

The next thing to do is the pupils, let’s start with the right eye, select the ellipse tool and draw it.

robot38

We used a 1 pt stroke (basic brush), check it out.

robot114

This is probably the most complex fill on the entire tutorial, but don’t worry, we will show you step by step. The gradient filling consists of five colors and comes in radial type, 94.6 angle and 79.86 % aspect radio. It’s important to check the position of each color inside the gradient bar, otherwise you won’t get the result that we’re looking for.

robot115

robot116

robot117

robot118

robot119

Great work guys, we’re doing well, just a few more steps and our robot will be completed. Copy paste (Ctrl + C, Ctrl + F) the pupil and put it over the left eye, now our robot can stare to the infinite and beyond!!!.

robot120

Because it’s a robot, it’s necessary to place occasionally dividing lines indicating that our robot is made of assembled parts. Select the pen tool and trace the next line.

robot03

The line must be 2 pt width and basic brush.

robot121

Copy paste (Ctrl + c, Ctrl + F) the line and move it over the original line, then change its color towards a darker green tone.

robot122

Now our robot wants to yell, but he does not have a mouth, let’s give him one, this is what you need to do. Draw a large shape and give it a 1pt stroke.

robot03

The shape must look closer to this:

robot123

Remember what we did with the arms?, well we need to repeat that process, select the knife tool and start cutting until you get the following result.

robot07

OK, now let’s adjust the gradient fill for each part of the object.

robot124

Look at the following screenshot in order to complete each part’s filling, all the divisions have the exactly same gradient properties, so when you complete the first one, the rest will come out easily.

robot129

That was the stroke, now let’s see how the filling goes.

robot125

robot126

robot127

robot128

We need to reunite all this divisions into a single layer, select all the layers that you have used so far on the making of our robot’s mouth, then make click over the right menu at the layer section and select “Collect in one layer”.

robot130

And now that we have done this, we can assign some extra properties to the layer that will affect all the divisions of the previous shape that we were working at.

robot131

Pay attention to these part, go to Windows>Appearance and then we can begin working with layers.

robot132

From the appearance window, let’s start by adding a new fill, click on the button “add new fill”.

robot133

This fill is going to be a 2 color gradient (radial type, 0 angle and 57.16 % aspect radio), both colors are the same, but one of those (the right one) has a 0 % opacity.

robot134

Add another fill to the appearance section and adjust the gradient to the following parameters: Radial type, –0.15 angle and 81.52 % aspect radio, also leave in 0 % the opacity of the left side color.

robot135

Now we need you to draw a clipping path, for doing this, you need to first vectorize the figure with the pen tool.

robot03

Then adjust the stroke to 1 pt basic brush and fill it with a solid color.

robot136

Yes, the previous object should be seeing, we removed manually in Adobe Photoshop to help you realize better the structure of the figure that we will be using for the clipping path. Select everything (of the mouth of course) and go to the layer menu, then open the contextual menu and select “Make Clipping Mask”, now our robot’s mouth has been completed.

robot137

robot138

That was the tuffest part of this tutorial, what comes next is very simple, that means that our robot is almost ready, hurry up and grab the pen tool and start making the next object.

robot03

This next figure is a glow, fill it with a black and white gradient (linear type and 0 angle) and then change its blending mode to screen and reduce its opacity to 50 %.

robot139

Then we’re going to add a subtle shadow over the mouth, draw it using the pen tool.

robot03

Assign a 1 pt stroke to our shadow object.

robot142

Adjust its filling to a two color gradient (radial type, 0 angle and 100 % aspect radio) and reduce its opacity to 53 %, also make sure that the gradient’s center is at the same place that the screenshot.

robot140

robot141

Then we add a highlight over the left eye of our robot.

robot03

Fill it with a black and white gradient (linear type and 0 angle) and adjust the blending mode to screen, after that, you need to reduce the opacity to 60 %.

robot143

Same thing for the right eye.

robot03

No further changes on this part.

robot144

More highlights, the next one goes on the lower part of the left eye.

robot03

Once again, do not make any changes to the gradient values.

robot145

Keep it up, we’re almost there, just a couple of minutes before we finish our robot, next part is another highlight.

robot03

This one needs you to change the angle to –37.8.

robot146

Let’s add another classical structure line to our robot’s head.

robot03

The line must have a 2 pt stroke, basic brush.

robot147

Copy paste (Ctrl + C, Ctrl + F) the line and put it a little above the original, the switch the stroke color for a darker tone of green.

robot148

Perhaps an additional glow near the mouth will look nice, let’s give it a shot.

robot03

Fill this one with the classic black and white gradient (linear type and 0 angle), then adjust the blending mode to screen and reduce the opacity to 50 %.

robot149

And here comes the final part, a true robot must have an antenna!!!, right Bender?.

robot03

This one has a 6 pt stroke, basic brush.

robot150

And the little ball that goes on top of any robot’s antenna.

robot38

First is the stroke, I think that a 2 pt basic brush is more than enough.

robot151

As for the filling it goes like this: 5 color gradient (radial type, 0 angle and 100 % aspect radio).

robot152

robot153

robot154

robot155

And that’s it, the robot is finished, aren’t you happy?, I think this has been one of the most amusing tutorials to the date, take all the time you need to fulfill it and let us know your results. We also like to ask you to leave all your suggestions and comments regarding Tutorialshock, we are always looking to improve the quality of our contents, thanks for reading us and well, see you next time.

robot156


26 Responses to “Vector robot character icon with illustrator”

  1. Nikolita
    September 8th

    Hello guys, I can see that you’re starting to improve your tutorial’s level, I need to finish once and for all the camera icon tutorial.

    • TS Editorial
      September 8th

      Sure Nikolita, hurry up because coming soon we will be posting more great tutorials and articles…

  2. Nice tutorial, I absolutely love the Mazinger reference at the beginning, thanks for posting it.

    • TS Editorial
      September 8th

      Hi Angie, we always try to make friendly articles that went beyond the technical part, the Mazinger pic is an example of it, anyway, thanks for your comment…

  3. Little Pablo
    September 8th

    Man this is awesome, it’s hard to lose focus with these many screenshots, I’ll definitely give it a shot.

    • TS Editorial
      September 8th

      Sure thing LP, let us know if you managed it :)…

  4. Good looking character. I especially like the head.

    • TS Editorial
      September 15th

      Good you liked Marius, please leave us your suggestions regarding how to improve our tutorials…

  5. This is an awesome tutorial! I love Futurama!

  6. i think im gonna change the design of the face and turn him into Bender form Futurama and good job with the tutorial.
    Bookmarking your site now
    :D

    • TS Editorial
      February 1st

      That’s an interesting idea, leave us a link when you complete it to see how it looks like :)…

  7. Dave Agnew
    May 3rd

    Nice to see more and more on this style…

  8. Cool! That’s a celevr way of looking at it!

  9. Hey Velvet, that’s great mate, we’re glad to help!

  10. [...] to Add Finger-Swipe Support to Your WebpageCreate an Eerie Underwater Composition in PhotoshopHow to make a robot character in Adobe IllustratorAn Illustrator Wireframing ToolkitOffice Vector IconsQuality Control – Turn WordPress [...]

  11. … track backe bei http://thegraphicsleague.com/sanfordrovelto/ ……

    grand , votre weblog modèle est vraiment grand, je suis recherche pour la nouveau disposition style pour mon moncler doudoune personnel blog , j’aime vôtre, maintenant je vais aller recherche le exacte même disposition style !…

  12. [...] Vector robot character icon with illustrator [...]

  13. [...] Vector robot character icon with illustrator [...]

  14. [...] 3. Make A Robot Character in Illustrator [...]

Leave a Reply

Comments

*