My Photoshop Classroom

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

iOS App Icon Written Tutorial:

Learn how to design the iOS Camera Icon shown above in Adobe Illustrator CS6 and then in Adobe Photoshop CS6 for some touch-ups. Let’s get started.

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.

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 a 512x512px document size is the preferred corner radius for iOS icon designs.)

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.

6. Go to View -> Hide Grid. Then change Stroke to 0 in the top bar to remove the stroke applied to the rectangle.
7. Give the foreground color of the rectangle a radial gradiant.
8. Adjust the gradient colors as shown above.

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.

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.

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.

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.

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

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.

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.

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.

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.

That’s 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 512′s 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 <Path>), create a new layer (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.

26. Change the layer’s blend mode from “Normal” to “Difference”.

That’s it! You can obviously play around a lot more than I did and add more to this icon; but don’t add too much detail, you don’t 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 1″ layer 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. Let’s adjust the canvas size by going to Image -> Canvas Size and changing width to 1300px. (Note, if you’re working on 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.

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

32. Repeat the above steps two more times.
I’ve 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.