ios_icon_videos_0000_Layer 29

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:

#01 – Photos icon
#02 – Videos icon
#03 – Safari icon
#04 – Weather icon
#05 – Calculator icon
#06 – Compass icon
#07 – Phone icon
#08 – FaceTime icon

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.

Downloaded 2344 times

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.

ios_icon_photos_0004_Layer 1

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

ios_icon_photos_0003_Layer 3

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.

ios_icon_videos_0007_Layer 17

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.

ios_icon_videos_0006_Layer 20

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.

ios_icon_videos_0005_Layer 24

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

ios_icon_videos_0004_Layer 25

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

ios_icon_videos_0003_Layer 31

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

ios_icon_videos_0002_Layer 27

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.

ios_icon_videos_0001_Layer 28

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!

ios_icon_videos_0000_Layer 29

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)!

I'm a graphic designer from Transylvania, working with Adobe Illustrator and Photoshop, I just love vector illustration. My design interests include user interface design, icon design, branding and identity design.