Robot

Step 1

Use the following sketch as a guide to help you create the robot. Copy or save the picture and open it in Illustrator.  

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_906dccadff2e00de6329269921b49958.jpg

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_cd6c1c41cce2b337c4f27bee9c36ff56.jpg

Step 2

Now, looking at the sketch, create the basic shapes of the robot. Take the Ellipse Tool (L) and create a head, body, and hands of the robot.https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_25d91aa4648b023a2052edd1808b3bdb.jpg

Ellipses that correspond to the robot's hands are turned according to their axes. With the help of the Pen Tool (P) create the robot's feet.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_a7d62f84f90f738383fc5047229e1cd1.jpg

Step 3

Define the location of the light source, and according to it fill the robot's head with a radial gradient consisting of various shades of gray.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_717e92392c46e3c1b9a5268b34d50732.jpg

The gray color on the periphery of the radial gradient is lighter than it is in the center. It is a reflection - the reflection of light from other objects, for example such as the floor. Use the same radial gradient to fill the robot's body.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_ce1d8b7680a1b138ef671a852bea0420.jpg

Step 4

By controlling the position of the center of the radial gradient and the location of the sliders and their color, create a light and shadow on the hands of the robot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_70905029d8f6060a65fc16fd3c1191f2.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_121bd2c6be5466db130ad8b972435184.jpg

In this work, your attention should be focused on the shape of the border between shadow and penumbra and its intensity.

Step 5

Fill the robot's feet with a linear gradient that contains a white color and two shades of gray. Place the white slider of the gradient so that the mostly lighted spot is on the edge of the foot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_6ffccb1573d90d57dee646096b9b9c8c.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_a50c7cd5d8742f2aa5875e0fafdcca45.jpg

Step 6

With the help of the Pen Tool (P) create a connection between the body and robot's limbs. Pick the required thickness of the line in the Stroke palette.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_b871d80c29404d46129bc157f4fe0e4a.jpg

Keep the line selected, then go to Object > Expand and place the object in the Layers palette, as shown in the figure below.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_24c679664edc3a30145af056de16f162.jpg

Using this technique, combine all the limbs with the body of the robot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_57e4c23ab455926f144755e519a6e6c8.jpg

Step 7

Create a lateral surface of the right foot (it is to the left for you). With the help of the Pen Tool (P) create the shape shown in the figure below.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_34669a585adda0ba0790daaed05317d9.jpg

Now we need to remove the excess part of the shape which goes beyond the border of the right foot. If you work in Adobe Illustrator CS5, perform this operation with the Shape Builder Tool (Shift + M). Select the right foot and the shape with the gray color, hold Alt, click on the part of the gray shape that goes beyond the border removing it.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_6b069cff2e299e7bd1ea25784fdae2f6.jpg

If you are working with earlier versions of Illustrator, do the following: Copy and Paste the shape of the foot in front (Command + C; Command + F); select the shape of the foot and the gray shape, then click on the Intersect button from the Pathfinder panel.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_4d225819ee22d5e0d0a0597f4f0a7808.jpg

Now fill the resulting shape with a linear gradient, which contains shades of gray.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_03a6d02d63543518a0396ee9c91a934a.jpg

Step 8

With the help of Pen Tool (P) create the robot's hands. It is not too difficult to do it while having a sketch on hand.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_616d5f1789ad53bacdfa6866e67914e7.jpg

Step 9

Now proceed to the creation of the robot's eyes. Take the Ellipse Tool (L) and create a gray circle.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_47ac765294625069b68eb1ce21cf2fbd.jpg

Now create another dark gray circle that is smaller than the first one and coinciding with it as its center.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_869f1fd1c8490811c5698807f0e5f76d.jpg

It's easy to combine the centers of the circles if you have the Smart Guides on (Command + U). Create the third circle, and fill it with a radial gradient consisting of shades of blue.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_36c93d106bdbf62a5d30bb4133ade998.jpg

In order to make the colors bright, you have to work in RGB color mode (File > Document Color Mode > RGB color). Images created in this color model are suitable for the Internet, but are not suitable for printing. If you are going to print your image, you have to work in CMYK color mode (File > Document Color Mode > CMYK color).

Step 10

Now create glares on the robot's eye. Copy the circle with a radial gradient, and paste it in front (Command + C; Command + F), then fill this circle with a white color.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_00326e253ff668bad76b6d4cb4ad7ac4.jpg

With the help of the Ellipse Tool (L) create an ellipse, then fill it with a black and white radial gradient.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_a9cb81bbd21e93aa3e05c467d6f1412c.jpg

With the help of Pen Tool (P) create a shape with a fill of white, which is indicated in the figure below.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_9a7fed4f582f2c5f61882aa75d69e9e4.jpg

Step 11

Keeping this shape selected, go to Effect > Blur > Gaussian Blur... and set the Blurring Radius in the dialog window.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_56533afcecdb9d9392f2999435b5ceaf.jpg

Group up the shape and ellipse with a radial gradient (Command + G) (Be attentive and make sure that you don't skip this step!). Now select the group and white circle and choose Make Opacity Mask from the Transparency panel menu.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_e13106f4009441eaa712362ae93ec2c0.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_3bfae22e46bd1c772e48b15e77839910.jpg

Using this technique, create the second eye of the robot. I'm showing you the basic steps of this technique for better learning of the material.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_cb6368e30aac9b09924a1b393d4b08ee.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_2bf80ed14454eb4037e59959b15d0062.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_e05c1e48a82364a5098a84b13dde1093.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_1d2d72ce2690109e847ffaaafc2d7e40.jpg

Step 12

Create light bulbs on the head of the robot. With the help of the Ellipse Tool (L) create an ellipse.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_adafaf254dcc97bf14c9dfe22342e03c.jpg

Drag the ellipse up, while holding down Shift + Alt, duplicating it.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_cd6dc288c7deaab5a4a500ddf022f81e.jpg

Take the Scissors Tool (C) and cut the bottom ellipse at points A and B, removing the upper part of this ellipse.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_dc91e23dd8c0bfc03e49620a7e7ef84b.jpg

Take the Pen Tool (P) and close the path as shown.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_f76c5f9209567d72a777b680fc78ba6a.jpg

Fill the shape with a linear gradient consisting of shades of gray. Fill the upper ellipse with a light gray color.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_d62459ab9c99fbd2666c751f375f9455.jpg

Step 13

With the help of the Pen Tool (P) create a bulb shape, which we will fill with a radial gradient consisting of three shades of blue.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_ccaee1e95cdcd8e263bec14c2e8b33ab.jpg

Group up all the objects of the bulb and turn the group using the Selection Tool (V).

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_1d4b4f8ad73446c6b9cb30f0bc9f5d27.jpg

Using this technique, create the second light bulb on the head of the robot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_9555e513ecfae2499bef6542e9126909.jpg

Step 14

With the help of the Pen Tool (P) create a mouth shape and shadow on it.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_d1663e0aff2c2d5714290073a2917318.jpg

With the same tool, create a line parallel to the mouth of the robot and a line on its forehead.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_b5148c10b634c8edbc71c37adabac5ae.jpg

Create a horseshoe-shaped path with a gray fill on the side of the head.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_407ef00027630e50bb04682dcdd8b89c.jpg

Next to this path and with the help of the Ellipse Tool (L), create two ellipses filled with the same color.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_da09a7a6a48ad59628f429f6b3751b27.jpg

Step 15

Now create an arch-like line over the eyes of the robot, and a lighter one over it.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_87cdd9970d407043d4313603aecda434.jpg

Create glares around the eyes. Take the Ellipse Tool (L) and create four ellipses as shown.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_9d13b73157edfa5cc633fbe9699148cf.jpg

Select the two ellipses on the left eye and press the Minus Front button from the Pathfinder panel.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_36befb0cc8aa81ee62a201fa7f639cd0.jpg

Do the same actions with the ellipses on the right eye of the robot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_070c8d6321d27b149761c0afb3c8d23b.jpg

Part of this glare goes beyond the contour of the head. It should be removed by one of the methods described in step 7 (Shape Builder Tool or Intersect from the Pathfinder panel).

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_a9ad741d17203039e5920791d083f83e.jpg

Fill the glares with a linear gradient which consists of the same shades of gray, one of the gradient sliders has 0% Opacity.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_10bec61b052b64cccdb4bc15c5c6b0ac.jpg

Step 16

With the help of the Ellipse Tool (L) create an ellipse, and using the Pen Tool (P) create the black shape shown in the figure below.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_6ae21182ff37a8acbdb99f1508d5f031.jpg

Select both shapes and press Minus Front from the Pathfinder panel.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_ba91e0dcc98b82198150c1be835dceee.jpg

Use the Pen Tool (P) to create a new shape on the bottom of robot's body.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_fe781ca1be599b3636282d50d8e249be.jpg

Fill these shapes with a linear gradient that goes from white to white with 0% Opacity.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_6a6173df3264c3fd5bf7a02dab8d92fc.jpg

Step 17

With the help of the Pen Tool (P) create four curved lines on the body and set the Multiply Blending Mode for them in the Transparency panel.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_4d2ab5289dc9630e19cac4eec10aeecc.jpg

Now create two curved lines on the side of the robot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_23e88bd8320a58a653288e48091e7268.jpg

With the help of the Ellipse Tool (L) create an ellipse at the place of the robot's hand attachment.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_40da50ddee377a6f5e4d2c3ada47abd3.jpg

Step 18

Create a shadow from the head to the robot's body. Create an ellipse which we fill with a radial gradient consisting of two shades of gray color. Set the Multiply Blending Mode for this ellipse and reduce its transparency in the Transparency panel.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_24908ecf2304d202fb4a7acfb368e85e.jpg

Using a similar technique, create a shadow from the robot's hand.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_5c5fccfbeb5354af3e23894a4ec00379.jpg

Step 19

Now create a monitor on the robot's belly. Basic elements of the monitor are created with the help of the Pen Tool (P). I do not think there will be any difficulties doing this work, so I will only show the process of its creation.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_d8773cb867e84596476614d2bd18a6cb.jpg

Create the shape of a glare on the screen and fill it with a white linear gradient with one transparent slider.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_e5d1991a63e8f727ce9c33eb676798ee.jpg

Create a rectangle-like button under the monitor.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_73b4633ec4e954b67de46724bff9cf11.jpg

Step 20

Now proceed to the robot's hands. With the help of the Pen Tool (P) create shapes from the picture below and fill them with a linear gradient that consists of two shades of gray.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_742d0ac8bbfa0fb8535a0c90d5885d50.jpg

Now create shapes of shadows on the hands.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_42f697e2fe11f1f4d63c45f0e72a54e8.jpg

Create glares on all the parts of the robot using shapes filled with white linear gradients. You can set the necessary transparency for both sliders to achieve the desired result.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_ce3326830a9f98b60174e34a44f40148.jpg

Step 21

With the help of ellipses and radial gradients create a luminous element on the robot's hand.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_c169c04c47ca9fbc3a6d670416619e2f.jpg

Create another ellipse with no fill with a gray stroke.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_aaaa2d34dd8785470f05f6c6f0dffb9b.jpg

While keeping the ellipse selected, go to Object > Expand. Using the Direct Selection Tool (A), change a little bit the position of inner points of the shape. Such an ellipse in projection cannot have a stroke of the same thickness.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_72a7c39181f17cb3e64b6fbda4a428d5.jpg

Now with the help of the Pen Tool (P) create two curved segments, as shown in the figure below.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_bcfb9043d68bae681532d71488e7a2e4.jpg

Select these segments and go to Object > Expand.

Step 22

Select the ellipse and the two segments, then press the Add button in the Pathfinder panel.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_250911c8b92cd58f9259e80757e80a98.jpg

Set for the created shape the Multiply Blending Mode in the Transparency panel.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_7c55b00b099b855dddf132903d883b21.jpg

Now, remove the part of the shape that goes beyond the hand's contour (see Step 7).

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_c5f5ea98d8176791c16dbc4879806c5c.jpg

With the help of the Pen Tool (P) create a glare-like shape on the left shoulder of the robot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_1a7de7e4abb6eff8519b116ec62101f7.jpg

Step 23

Using similar techniques, create elements of the right hand.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_667904876578db72d258bde64923d779.jpg

Now let's create the elements of the robot's legs. When creating them we used the above-described techniques.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_47fdb94fbb3b32091a495191e9f4eb45.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_678cfacfc7d41719eb7e3e72d3e537fa.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_07cedc260cd20aedc146be8714bb4da9.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_ba07392ac1b0ac49d6f42340ffb9fbe1.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_e2940583200f31cd986d57b2f1fa92f3.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_cffc94ae799b7e5d73ad3de19ea1daad.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_7b10a4d3985e3a7d2c6fa43c32325711.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_0745ad77412a00709306aeb110c9bc15.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_46eff3c91a9792299041582f56e5964d.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_9386515d4f014c91d1caa9994f4c8c5a.jpg

Advertisement

Step 24

Create the background. Take the Rectangle Tool (M) and draw a rectangle with a linear gradient fill consisting of shades of blue.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_c8ce50de0c27736b3b04a8ec935d8d72.jpg

Create shadows from the legs of the robot. Take the Pen Tool (P) and create a shape filled with blue. While keeping the shape selected, go to Effect > Blur > Gaussian Blur and set the Blur Radius in the dialog window.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_e04ce26908c2e75dc15a2eaec3bb8c65.jpg

In the same way create a shadow from the second leg and body of the robot.

https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_866a88eb89bf520880703d5ab4269a3e.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_773cb3356f60c87b985290ee44554e7e.jpg
https://cms-assets.tutsplus.com/legacy-premium-tutorials/posts/21174/images/21174_a62e433f3b2ba1223ef8a84e40a70969.jpg