a Vector Button in Illustrator


Adobe Illustrator is a powerful tool for illustrating various elements of design. This tutorial will enable you to draw icons in illustrator,  So you can apply on your website as buttons or on your mobile apps, in this tutorial we will explore making the call button used by apple on the I Phone.

Step 1

Lets start off by drawing a rounded rectangle, Select from the tool bar the rounded rectangle to draw and color it tree green the the below image. [Fig 1]

fig 1

Step 2

Now make a copy of your rectangle [ edit menu- copy- paste] and color it grey. 

Select the eclipse tool from the tool bar and draw an eclipse just above the rectangle. Then from pathfinder select the divide icon to divide the object


Step 3

-After the object has been divided, delete the top part so all your left with is the rectangle. [fig 3]

-Then select the top curve of the rectangle and place it on your green rounded rectangle to form a reflection, we can achieve this, by selecting  transparency from the windows menu and reduced the opacity t0 12  [fig3.1]

– Select the eclipse tool again from the tool bar to draw another eclipse on the existing reflection [fig3.1]

– Blur [ Effects menu- blur- gaussian blur] the reflection and reduce opacity to 14 [fig 3.2]


                fig 3                                                                                                                   fig 3.1                                           fig 3.2

Step 4

-Now add the grey part to the green rectangle, selecting only the end points [fig4]  make the box a little up enough to get the center of the green box. [fig 4.1]

– Then blur the grey on the green square and multiply it.[ fig 4.2]

Fig 4


Fig 4.1

fig 4.2

Step 5

-We need to draw the icon, in this case we are drawing a telephone, Use your pen tool to draw a curve. Then duplicate the curve and move it the top so its parallel to the other curve and join the points using pen tool.

-Draw a rounded square using the rounded rectangle icon from the tool bar. Place the square, at the tip of the curve make a copy and place at the other end. Then using pathfinder icon merge the vectors.

fig 5


Step 6

– Then make the telephone icon white, and drop shadow [ effect menu- stylize -drop shadow]. Center align it  with the green square. [ fig 6]

Now take a grey box and draw lines using the pen tool, just as shown in fig 6.1. Then select only the  grey box and bring it in front. Then select all and go to object clipping mask- make. Then layout out the strips over the green box  just as shown in fig 6.1

Fig 6

Fig 6.1



Now your icon is complete. So now you need to make it a Png file or Jpg file so that you can apply it on the web. Go to file – save for web and devices, select png and save on your desktop.






Post Details

Posted: March 27, 2012


Post Categories