iOS App Icon Design Tutorial in Illustrator CS6

8/13/2019 iOS App Icon Design Tutorial in Illustrator CS6

1/19

iOS App Icon Design Tutorial in

Illustrator CS6 (Video & Written)

Posted onMay 26, 2012byGary Simon

Below is both a video tutorial and a written tutorial that shows the design of the iOS app icon below.

iOS App Icon Video Tutorial:

iOS App Icon Written Tutorial:

Learn how to design the iOS Camera Icon shown above in Adobe Illustrator CS6 and then in AdobePhotoshop CS6 for some touch-ups. Lets get started.
http://www.garysimon.net/blog/2012/05/26/ios-app-icon-design-tutorial-in-illustrator-cs6-video-written/http://www.garysimon.net/blog/2012/05/26/ios-app-icon-design-tutorial-in-illustrator-cs6-video-written/http://www.garysimon.net/blog/2012/05/26/ios-app-icon-design-tutorial-in-illustrator-cs6-video-written/http://www.garysimon.net/blog/author/dreamache/http://www.garysimon.net/blog/author/dreamache/http://www.garysimon.net/blog/author/dreamache/http://www.garysimon.net/blog/wp-content/uploads/2012/05/final2.jpghttp://www.garysimon.net/blog/author/dreamache/http://www.garysimon.net/blog/2012/05/26/ios-app-icon-design-tutorial-in-illustrator-cs6-video-written/


2/19

1. Create a new document (File / New). Make sure the settings match as shown above. 512px by

512px.

2. Make sure show grid and snap to grid are on in the View menu.
http://www.garysimon.net/blog/wp-content/uploads/2012/05/full-2.jpghttp://www.garysimon.net/blog/wp-content/uploads/2012/05/full-1.jpghttp://www.garysimon.net/blog/wp-content/uploads/2012/05/full-2.jpghttp://www.garysimon.net/blog/wp-content/uploads/2012/05/full-1.jpg


3/19

3. Select the Rounded Rectangle Tool from the menu (Select the Rectangle Tool, left click, and drag

out to access the rounded tool).

4. Go to Edit -> Preferences -> General and change the Corner Radius to 80px. (Note: 80px on a512x512px document size is the preferred corner radius for iOS icon designs.)
http://www.garysimon.net/blog/wp-content/uploads/2012/05/full-3.jpg


4/19

5. Start by clicking the at the very top left corner of the document space and dragging out the rounded

rectangle, and end at the very bottom right corner.


5/19


6/19

9. Hit the G key to bring up the gradient tool and double click inside the upper left corner of the

gradient circle. This will give it the spotlight effect as shown above.

10. Select the Ellipse Tool. While holding SHIFT and ALT, drag out a perfect circle in roughly the

same size and location as shown above.


7/19

11. Re-adjust the gradient in the center as shown above. Give the ellipse a 6pt stroke. Click the orange

Stroke button and change the Align Stroke to inside. Roughly match the gradient colors and

options as shown in the screenshot.


8/19

12. Hit CTRL-C and CTRL-F to duplicate the ellipse. While holding SHIFT and ALT together, drag

the new ellipse in.

13. Change the Stroke to 14pt and adjust the gradient slightly as shown in the screenshot.


9/19

14. CTRL-C and CTRL-F again to duplicate this ellipse. Drag it in a lot and then change the stroke to

4pt. Remove the background color and adjust the gradient colors to match the screenshot above.


10/19

15. Select the Pen Tool. Change the stroke to 0 in the top toolbar, and change the foreground color to

radial (adjust the colors after the shape is drawn). Draw a shape roughly equal to the screenshot shown

above. Change the gradient to match the screenshot. The inner color is white, and the outter color is a

dark gray, the opacity is set to 0%. Also click the transparency tab and change the opacity of this glare

to 70%.


11/19

16. Select the Ellipse tool and draw out a new ellipse in the center holding ALT and SHIFT. Drag it to

the size of the lense. Change the opacity to 70%, and slightly adjust the gradient as shown above.


12/19

17. CTRL-C and CTRL-F to duplicate the ellipse. Resize it and position it to match the screenshot.

Change the opacity (in the transparency tab) to 10% and adjust the gradient settings to match the

screenshot above.


13/19

18. Select the first ellipse we created and duplicate it. Scale it down and position it to match the

screenshot above. Adjust the foreground gradient colors to light and dark red. Also change the stroke to

4 pt.


14/19

19. Select the glare we created and duplicate it. Move it and scale it down above the new red lense.

You can also adjust the gradient colors to both white, and select G to resize the gradient.


15/19

Thats it for the design in Illustrator.To present the icon better, you can go to File -> Document

Setup, and click Adjust Artboard. You can then drag out the artboard to create for some padding

between the icon as shown above.

Further Steps in Photoshop:

21. You can take this design a step further by bringing it into Photoshop. In Illustrator, go to File ->

Export and save it as a PSD. In the PSD options box, make sure Write Layers is selected with a

resolution of 72.

22. In Photoshop, open the PSD. Go to Image -> Image Size and change both 512s to 800. Hit OK.

Create a new layer and drag it to the bottom of the layer 1 group. Fill it with white.

23. We can give the icon a leather texture. Visit:http://www.flickr.com/photos/webtreatsetc/4563281265/sizes/o/in/photostream/for a free leather

picture set. Right click the image and copy image (this option is available in FireFox and Chrome

browsers).

24. With the first layer we created in Illustrator selected in Photoshop (named ), create a newlayer (CTRL-SHIFT-N) and make sure Use previous layer to create clipping mask is selected. Hit

OK.

25. CTRL-V to paste the copied leather texture. Hit CTRL-T, then hold SHIFT+ALT and drag in to

scale the size of the leather texture more consistent with the size of our icon.
http://www.flickr.com/photos/webtreatsetc/4563281265/sizes/o/in/photostream/http://www.flickr.com/photos/webtreatsetc/4563281265/sizes/o/in/photostream/http://www.garysimon.net/blog/wp-content/uploads/2012/05/full-15.jpghttp://www.flickr.com/photos/webtreatsetc/4563281265/sizes/o/in/photostream/


16/19

26. Change the layers blend mode from Normal to Difference.

Thats it! You can obviously play around a lot more than I did and add more to this icon; but dont add

too much detail, you dont want it to scale down badly and become hard to decipher.

If you want to save this image and present it with the multiple sizes, follow the steps below:

27. Select the Layer 1layer group and hit CTRL-E to merge the group (First, make sure to move the

background layer we created beneath the group).

28. This will give you two layers, the background layer and the actual icon layer. Lets adjust the

canvas size by going to Image -> Canvas Size and changing width to 1300px. (Note, if youre workingon a different resolution, use what works for you).

29. Use the bucket tool to fill in the side areas with white on the background layer.

30. Move the icon layer over to the left, and hit CTRL-A and then CTRL-C. Go to File -> New, Hit

OK and then hit CTRL-V. Go to Image -> Image Size and change it to 50%. Then hit CTRL-A and

CTRL-C to copy the new smaller sized layer.


17/19

31. Go back to our original document and CTRL-V to paste. Position the new icon as shown above.


18/19

32. Repeat the above steps two more times.

Ive also added some shadows to give it some depth. Hope you enjoyed this tutorial!

Developing the icon further..

I decided to work a little more with the icon by adding color on the lens (a simple blue shape created

with the pen tool in Photoshop, rasterizing the layer, giving it a gaussian blur and adjusting the blend

mode). I also added a sparkle (a shape created with the pen tool with opacity), and some reflections

with reduced opacity.


19/19

- See more at: http://www.garysimon.net/blog/2012/05/26/ios-app-icon-design-tutorial-in-illustrator-cs6-video-written/#sthash.xNvafrQH.dpuf
http://www.garysimon.net/blog/wp-content/uploads/2012/05/final2.jpg

Documents

iOS App Icon Design Tutorial in Illustrator CS6