How to create an app icon in Illustrator

[Rss Bot 1]

In this Illustrator tutorial, I’ll show you how to create a calculator app icon in Adobe Illustrator CC. 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. If you don't already have it, you can get Adobe Creative Cloud here.

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

01. Open a document

Click image to enlarge

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

02. Create the background

Click image to enlarge

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

03. Make the base

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

04. Set effect

Click image to enlarge

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

05. Apply a gradient

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

06. Create another rectangle

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

07. Make rounded rectangle

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

08. Make a glow effect

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

09. Copy rectangle

Click image to enlarge

Select this new rectangle and press Ctrl+ C to copy and press Ctrl+ B to paste in back. Drag this copy 1-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 colour.

10. Add text

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 colour. 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 colour to #808284.

Click image to enlarge

11. Make the base

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...

12. Add depth

Click image to enlarge

Now we’ll give some depth to the button’s base. So, select the shape, press Ctrl+ C to copy and press Ctrl+ B to paste in back. Drag the copy 2-3 steps upwards. Keep the copy selected and change its stroke color to #E2E2E1 with 2pt stroke weight and fill color to #DDD9D3 in the Appearance Panel as shown above.

13. Create 3D button

Click image to enlarge

Next, I’ll show you how to create a 3d button. Pick the Rounded Rectangle Tool (M) to draw a 60 x 38px rectangle using #C5BCB4 fill color. Select it and make its corners rounded by 12px.

Select the button and go to Effect > Stylize > Inner Glow. Apply given settings here. And apply Black & White gradient on it with Multiply blending mode and 40% opacity as we did in step 11.

Click image to enlarge

Click image to enlarge

14. Extrude and bevel

Click image to enlarge

Select the button and go to Effect > 3D > Extrude & Bevel. Apply given settings here.

15. Make the button's shadow

Click image to enlarge

We’ll create button’s shadow now. To do so, duplicate the button. Select the bottom copy and remove all the effects in the Appearance Panel. Now change its fill colour to black and hit the down arrow twice to move it down. Duplicate it and change fill colour of the copy to white. Hit the down arrow on your keyboard 6-7 times downwards as shown above.

Select both the black and white shapes and go to Object > Blend > Blend Options. Choose Specified Steps with the value of 20 and hit OK. Once again, go to Object > Blend > Make to blend them. Once you are done, change blended shape mode to Multiply with 60% opacity in the Transparency Panel.

Click image to enlarge

Select the shadow and go to Effect > Blur >  Gaussian Blur. Apply 8px Gaussian blur effect on it.

Click image to enlarge

16. Apply the symbol

Click image to enlarge

To apply symbol over the button, draw a small rectangle with #56524C fill color. Select it and go to Object > Transform > Rotate. And rotate it at 90 degrees and hit Copy option to make the + symbol. Make its copy, turn the backside copy white and drag it 1-2 steps upwards.

17. Make more buttons

Click image to enlarge

You can make as many buttons as you want by using the same technique. And make the shadow of icon the same way as explained in step 15.

18. Fill in colour

Click image to enlarge

Now pick the Rounded Rectangle Tool, click the canvas to view options window and enter 210px width and 8px height here. Give it #404041 fill colour and #F1F1F2 colour stroke (Stroke weight: 1pt).

19. Make the paper

Click image to enlarge

To make the paper, draw a rectangle with following dimensions and #F7F5E8 fill color.

Pick the Pen Tool (P) to draw a small line using any colour as a stroke. Select it and go to “Effect”> “Distort & Transform”> “Zigzag”. Apply given settings here to make the path wavy. Now draw a rectangular shape by clicking one end of the wavy path using Pen Tool (P) and close it on the other end. And give any fill colour to the resulting shape.

Click image to enlarge

Now place this shape over the top edge of paper, select both shapes and hit “Minus Front” in the Pathfinder Panel (Shift+ Ctrl+F9).

Click image to enlarge

20. Apply gradient to paper

Click image to enlarge

Select the paper, duplicate its fill attribute in the Appearance Panel and apply given gradient on the copied fill.

Change gradient fill blending mode to “Multiply” with 40% opacity.

Click image to enlarge

21. Add text

Click image to enlarge

I’ve used “Bebas Neue” Font to type some text over the paper with given settings.

To make dashed line, draw a straight path using Pen Tool (P) with no fill color and #404041 color stroke (Stroke weight: 1pt). Now apply given settings below in the Stroke Panel at the top control bar.

Click image to enlarge

To make paper shadow, draw a rectangle as shown below with black fill. Apply 8px Gaussian blur effect on it and change its blending mode to “Multiply” with 30% opacity.

Click image to enlarge

22. Draw a knob

Click image to enlarge

Next, we’ll draw a knob. Draw the following path using Pen Tool (P) and give it #DF7F5E color fill with no stroke.

Select the shape and go to “Effect”> “3D”> “Revolve”. Apply given settings below.

Click image to enlarge

23. Place the knob

Click image to enlarge

To place the knob parallel to the calculator we have to rasterize it first. Select the knob and go to “Object”> “Rasterize”. Apply given settings above.

After that, rotate the knob at 90 degrees and hit “OK”. To reflect it you have to rotate it at 180 degrees and hit “Copy”.

Click image to enlarge

Now position both knobs as shown below.

Click image to enlarge

Related articles:

• 75 best Adobe Illustrator tutorials
• How to make an app
• The 17 best Adobe Illustrator plugins

View the full article