How to create iOS7 icons in Adobe Illustrator? #02 – Videos

After releasing the new iOS 7, app designers and developers needed to adjust their visual language to match the new design of iOS7.
Every app needs a beautiful, memorable app icon that attracts people in the App Store (or any other app marketplace) and stands out on their Home screen. iOS can use versions of the app icon in Game Center, Search results, Settings, and to represent app-created documents.

Here on Vectorgraphit we will share with you every week a new tutorial about how to create one of the new iOS 7 flat icons in Adobe Illustrator. Remember, these tutorials are featuring some Adobe Illustrator technics, some changes may apply. If you want to create iOS 7 icons, you can read more about the Interface Guidelines here.

In the following weeks you will learn to create these iOS7 icons:

Today you learn to create the Videos icon. You will learn to use the basic tools, the Gradient Tool and the Blend Tool. The first 3 steps are similar to the first steps in the other tutorials so if you’re already familiar, you can skip them.

To start, download the grid we created. The file is an EPS file so you can use in other vector editing software too. You don’t need to use this grid but we want to create icons like the originals, so this is the easiest way to do it.

1. Now that you have the grid, insert to a new layer and lock the layer. Make sure that the layer with the grid is on top of the other layers (see image in step 2).

2. Create a square with the Rectangle Tool (M) while holding the Shift key. Set its size to 120px (width and height). Place the square bellow the grid.

3. Go to Effect -> Stylize -> Round Corners and set the Radius to 27°.

4. Create a Rectangle with the Rectangle Tool (). Fill it with black. Align the rectangle to the grid as you see on the image below.

5. Copy the first object to Clipboard (Ctrl + C). Select both objects then go to Window -> Pathfinder Panel and Intersect them. Press Ctrl + B to place back the object from the Clipboard.

6. Create a rectangle with the Rectangle Tool. Fill it with light gray. Set its size to 22x18px. Go to Object -> Transform -> Shear. Set the Angle to 45°. Create two more copies from this object (Ctrl + C, Ctrl + F, Ctrl + F) and distribute equally. On the Pathfinder Panel select Unite.

7. Select the three shapes, and Flip Vertically on the Window-> Transform Panel – options.

8. Create a copy (Ctrl + C) of the black shape, you will need it later. Select the three shape that are outside of the black shape’s area. While pressing the Shift key, select the black shape. Select Intersect on the Pathfinder Panel while pressing the Alt key. Press Expand on the Pathfinder Panel. Paste back the black shape from the Clipboard (Ctrl +B).

9. Fill the green shape with a gradient. Use these colors: #46ECC6 – #58CAFC.

10. You need only a shadow. To create it, duplicate the black shape (Ctrl + C, Ctrl + B). While selected, move it down with the Down Arrow key and fill it with white. Select the white and black shapes, then go to Object -> Blend -> Make. You can edit the Blending Options later in Object -> Blend -> Blending Options. You can specify the number of steps and / or orientation.

11. On the Window -> Transparancy Panel change the blending mode to Multiply. Press Ctrl + F to place back the black shape to its place. And you’re done!

I hope you enjoyed this tutorial. Feel free to return for the next iOS7 icon tutorial (Safari icon) or check out the one from last week (Photos icon)!