How to Create a Classic Table Phone in Illustrator

In today’s Illustrator Class, We are going to draw a classic telephone in Adobe Illustrator CS4. We will start from sketch and then will turn it down to a Digital Graphics. I have tried my best to write each step so even beginners can understand it. But Still, If you are not sure about some step, let us know in comments and we will do our best.You can also download the final source file (*.ai) here.

Step 1

Open your Adobe Illustrator. Create a new document with 450px x 450px size.

Step 2

Open your sketch file in Adobe Illustrator. Create a new layer above the sketch picture layer, and name it as phoneBody.

Step 3

Now We are going to paint each parts, We will try to draw each part of the body and color them with corresponding colors. To paint them we do use solid color plus Gradient colors. Ok, now take pen tool(P) with no fill color. Draw borders of every separate parts. Shall we start from receiver?

Draw borders of top side of receiver and then apply gradient color. I am using #de2126 as my red color. Once you colored this object you delete borders ( Delete means just choose no color for stroke)

Step 4

Next step is draw other parts, Left side of the receiver. Draw this object, color with Gradient tool(G) and then select no color for stroke. I used #880303 for dark red and #bb141a for light red.

Step 5

Next is right side of the receiver. Draw this object and fill with Gradient tool(G). #ce171f for dark red and #d48168 for light red.

Step 6

Next draw this object which is top of the telephone. 1st draw this rectangle, color with gradient tool (T). Colors that i used – #ac0f15 for dark red and #e61f25 for light red.

Step 7

Ok, Lets move to front side of the phone. Draw a rectangle with the help of pen tool and fill with gradient tool. Colors are #ab0f14 dark red & #ed1c24 light red

Step 8

Next is right side of the telephone. We do the same method to draw up. Draw this object and color with gradient tool. Once you colored, select and go for no color to lines. Colors i used are dark red #ce171f & white

Step 9

Now friends, We want to draw speaker which is in a telephone. Draw an object like this and color with gradient tool, type is redial. 3rd picture shows you, how to place this gradient. To color this i have used these colors. #a70e13 for dar red and #ed1c24 & #de2126 for light red. After colorings select this object, choose no color for stroke. Then you send this object back to handle. So you will see just like a picture in 3rd illustration.

Step 10

Now draw mic part as well. Follow those illustrations you will understand. We finished the object in #4, send this object back to all other objects.

Step 11

No We need to draw receiver holders (Sorry, I don’t know the exact name of this)

#1 :- Draw three side parts

#2 :- Color with gradient tool to front side. Colors i used, Dark red #aa1f23, light red #ec2227

#3 :- Color right side of the holder with solid color #ec2027

#4 :- Finally color top side with gradient tool. Dark red #cd2127 & white

Step 12

Have a copy of the object which we created in previous step and paste it as another holder

Step 13

Now we draw an object and put it under the receiver. Just draw a rectangle with pen tool (P) and color with #bf2e27 and then send this object back.

Step 14

Now Draw this objects as well.

Step 15

Now We need to give shining effects. Lets draw a two borders to give a shining effect. You can do this by Pen tool and gradient tool.

Step 16

Ok, lets add some shadow effects to our phone. Draw an object and fill with #b31317 (see #1), apply feather up to 7.06 mm and reduce opacity to 95%. After that send this object back.

Step 17

Ok friends, We will add some more shining to our phone. At 1st make shining to receiver. Please see the illustration below.

Step 18

Now we will give another shining to main body.

Step 19

Next is draw shining to the speaker. You draw an object just like in #1, color with white gradient colors. Then send this object to back.

Step 20

Ok friends, now We came to number roll. Create an oval shape and fill with white color, & reduce its opacity to 70%. Then make a copy of that, move a bit to downside and change the color to #5d140b. So you will end up with a picture like in #3

Step 21

Draw another oval and apply gradient colors with different tones of ash color. See #2. Then apply inner glow. Inner glow option can be seen in Effects > Stylize > Inner Glow… Select #e8e7e7 and set blur to 2.8mm. See #3

Step 22

Then Draw a small oval, color by using Gradient tool (G). Colors i used, #201d63 for dark blue & #11baee for light blue

Step 23

Apply a shining effect with Gradient tool. Draw a oval and then you can color this by using Gradient tool.

step 24

Now Create a white color oval and go to Effect > 3D > Extrude & Bevel… Make adjustments as i shown in #2. Then Copy this and paste it 11 times. So you will see a picture like #3.

Step 26

Now we want to draw wire which is connected phone and the receiver. This is quite simple. Take Pen tool (P) and draw these shapes as given in #1. Then Copy, paste for many times. So it should be like a rolled wire.

Step 27

Now select all the shapes which we created previous step and create a New Art Brush. (This option is found in brush window)

Step 28

Take Pen tool and draw a line like this with no fill color and black line color. Then select that line and choose new brush that we created.

Step 29

Now select this wire and Choose Expand Appearance. (Object > Expand Appearance) Erase unnecessary parts by using Eraser (Shift+E) and draw some shapes to show that wire is connected.

Step 30

Almost We done. Now We need to place numbers and some outlines to make this phone beautiful.

That’s all!

Draw a shadow to your phone and background color as well. I hope you enjoyed this tutorial. Thank you for reading.

Kanthavel Jatheepan

I am from Canada, working as a Graphics and Web designer in J11 IT Solutions Inc. (j11.ca) and running http://cutedrops.com blog. I like web designing, graphics designing and developing RIAs. I have knowledge in Adobe Photoshop, Illustrator, Flash and Dreamweaver. If you like to conduct me just send a mail to theepan@cutedrops.com. Thanks :)

15 Smart Tools To Help You Build Your Freelance Business

Discover the awesome tools we use in making our clients comfortable and happy in learning new things every day.

Download Now

Comments

  1. Tim says

    I’m sorry, I can’t control myself. I have to respond to this. While it’s nice of you to post a tutorial about using Illustrator to create something like this, it is a very poor effort from an illustration standpoint. You needed to do a better sketch to start from. Perhaps you should have used some reference? Here is a photo of a phone like this: http://www.flickr.com/photos/joeshlabotnik/700445115/sizes/l/

    Being an illustrator and former industrial designer, I have to say that your perspective a way off. The receiver would not be sitting on the phone like that. The handle of the receiver would not meet the earphones so abruptly – especially the far earphone. And the lighting and shadows are not correct. You are attempting to draw an object that exists in real life as a technical illustration, not fine art, which means you need to make it look as close to the real thing as possible. I would suggest tracing a photo in Illustrator before attempting something like this without reference. Study perspective more and study lighting more.

    Since you are still a student, perhaps ask your art instructor for some pointers on how to improve on this.

  2. Shawn McConnell says

    Very nice tut, I could use that brush technique else where too

    Shawn

  3. Manuel says

    I’ve just realized this website is in English hehe

    Ok, what i meant was:

    I think you could use some of the 3D rotation effects in Illustrator to give it a better looking perspective to circle with the numbers. In other hand the gradients are not real enough, nor the shadows, I’m sure you can improve it. I gave you an example on how the shadows can help us to improve the depth perception, hence you can make it look much more like ‘alive’ somehow.

    See the example here:

    Thanks for sharing!!