Colorful iOS Style App Icon in Adobe Illustrator CC

We’ll use the transform tools in Illustrator to duplicate a series of shapes to quickly and precisely build a floating 3D shape for our iOS icon.

The inspiration for this tutorial.

In this Adobe Illustrator tutorial, we’ll create a simple disk shape with edges and light glow to build depth in our object and then we’ll use Move and Scale transform tools to duplicate and scale our floating disks exactly as we need them to be. I’ll also show you how to quickly reduce the opacity of multiple objects and then apply an entire color scheme across multiple objects while preserving the transparency of those objects using custom settings and the Eyedropper tool.

Creating the Base Shape

01-create-iOS-icon-vector-illustrator

Grab the Ellipse Tool and click once in your document and choose to create a circle that is 1000px by 1000px in size. Use the Move tool and the alignment options in the top control bar to align this circle to the center of your artboard. Go Object>Transform>Scale and tick on Non-Uniform and set horizontal 91% and vertical to 15% to get a nice, flat circle.

Creating the Lip of the Base Shape

02-create-iOS-icon-vector-illustrator

Next, go Object>Transform>Scale and tick on Non-Uniform again and set the horizontal to 100% and the vertical to 130% and hit the “Copy” button. Hit OK and select both shapes and open the Pathfinder (Window>Pathfinder) and hit the Divide icon in the bottom left. Go Object>Ungroup and select the very top-most of these three shapes and delete it. You should have two shapes left. Select the bottom most and give it a darker gray and the top most and give it a medium gray. You have created the base shape.

Duplicating the Base Shape (& So Much More!)

03-create-iOS-icon-vector-illustrator

We now need to duplicate and resize these two shapes eight times to create a total of nine stacked floating disks. We will use Object>Transform>Move to move and copy the shape and then use Object>Transform>Scale to size the object into its proper place. I would recommend checking out the video at the top of this post to see exactly how I went about doing this. You’ll also learn all kinds of little tips and tricks about creating multiple graphics in Illustrator. Thanks for checking out this tutorial!

Tags: Adobe Illustrator, Illustrator, Illustrator Tutorial, Illustrator Tutorials, Graphic Design, How to, App Design, Icon Design, Icon, Make an Icon, iOS, Smart Phone, App Icon, Web Design, Floating, 3D, Colorful