How to create an app icon in Illustrator

In this tutorial, I’ll show you how to create a calculator app icon in Adobe Illustrator. We’ll use different shape tools, pen tool, along with the 3D features of Illustrator. Hopefully you will learn few handy tips along the way.

You will also need to download a couple of free fonts for this tutorial: DS-Digital and Bebas Neue

But first, let’s have a look at the final result:

Step 01.

Click image to enlarge

Create a new document in illustrator with 600px width and 450px height.

Step 02.

Click image to enlarge

Select the Rectangle Tool (M) and pick #44484D fill color to draw a rectangle covering the canvas as the background.

Step 03. 

Click image to enlarge

We’ll start by creating the icon’s base. So select the Rectangle Tool (M) and click the canvas to view options window. Enter 280px width, 265px height and hit “OK” to draw a rectangle as shown below. Pick #E7DED0 as the fill color.

Next, we’ll convert it into a rounded rectangle. Select this rectangle with the help of Selection Tool (V) orby clicking the ring-shaped target present at right side of respective layer. And go to “Effect”> “Stylize”>“Round Corners”. Enter 50px for the radius and hit “OK”.

Click image to enlarge

Step 04.

Click image to enlarge

Select this rectangle and go to “Effect”> “3D”> “Extrude & Bevel”. Apply given settings here.

Step 05. 

Click image to enlarge

To apply subtle gradient over the base, draw a rectangle covering the entire 3d shape using any fill color. Now convert it into a rounded rectangle with 50px corner radius.

Now replace its fill with a “Black-White-Black” gradient using Gradient Tool (G). Change its blending mode to “Color Burn” with 20% opacity in the Transparency Panel (Shift + Ctrl+F10).

Click image to enlarge

Step 06.

Click image to enlarge

Next, draw another rectangle with 280px width and 178px height using #E9E3D9 fill color and white color stroke. Choose 1pt stroke weight from top control bar.

Now convert it into a rounded rectangle by 40px radius.

Click image to enlarge

After that, apply following gradient on it and change its blending mode to “Multiply” with 50% opacity in the Transparency Panel (Shift + Ctrl+F10).

Click image to enlarge

Step 07. 

Click image to enlarge

Draw another rectangle of 230px with and 35px height using #BCBA95 fill color and for stroke apply light to dark grey gradient as shown below. Select 3pt stroke weight from top control bar.

Convert this rectangle into a rounded rectangle by 10px corner radius.

Click image to enlarge

Step 08.

Click image to enlarge

Next, select this new rectangle and go to “Window”> “Appearance” to view the Appearance Panel or press Shift + F6. Now select the fill attribute and click the icon of “Duplicate Selected Item” at the bottom of Appearance Panel to duplicate the fill. And replace this new fill with “Black & White” gradient at 90 degrees as shown above.

Keep this rectangle selected and go to “Effect”> “Stylize”> “Inner Glow”. Apply given settings here. Once you are done, change gradient fill blending mode to “Multiply” with 30% opacity.

Click image to enlarge

Step 09.

Click image to enlarge

Select this new rectangle and press Ctrl+ “C” to copy and press Ctrl+ “B” to paste in back. Drag this copy1-2 steps downwards. Now remove its fill attributes by dragging them to “Delete” icon at the bottom of Appearance Panel and give it 3pt stroke of #D1D2D4 color.

Step 10.

Click image to enlarge

Next, we’ll add some text over the screen. Pick the Type Tool (T) to type the text using #404041 fill color. I have used “DS-Digital” font here.

Now press Ctrl+ “C” to copy and press Ctrl+ “B” to paste in back. Drag the copied text 1-2 steps downwards and change its fill color to #808284.

Click image to enlarge

Step 11.

Click image to enlarge

Next, we’ll create button’s base. Select the rectangle tool to draw a rectangle with following dimensions using #847D72 fill color and same light to dark grey gradient on the stroke as used in step 7. However, choose 1pt stroke weight here.

And convert it into a rounded rectangle by 25px radius.

Click image to enlarge

After that, duplicate its fill attribute in the Appearance Panel and apply “Black & White” gradient at 90 degrees. Change its blending mode to “Multiply” with 50% opacity.

Click image to enlarge

Next page: The final steps to creating an icon app in Illustrator...