For those familiar with iOS devices (iPhone, iPad, iPod Touch), you’re probably also familiar with the App Store and the 500,000+ applications that are available. Let me show you how to create a 3D icon template, which will make some of my future tutorials a bit easier. Of course, if you’re looking for the easy way out, you can always download an iPhone app website template.
In terms of document size, most icons are requested at 512px X 512px. I like designing my icons at 1024px, but it’s a personal preference. When you create the document, fill the background with whichever color you like. I’m starting with a neutral grey.
Let’s start creating the shapes! Grab the Rounded Rectangle Tool () from the tools on the left. Now on the options bar at the top, the Radius is the important value here. I found that a radius of 60px works for creating an iOS icon.
With your Shift key held down, draw out a perfect square on your document.
This next step will give us the “3D” look. We need to duplicate the current shape, and move it up. One way to do it, would be to use the following shortcut combination:
Mac: Option+Shift+Up Arrow
PC: Alt+Shift+Up Arrow
This will duplicate the shape, and bump it upwards. Once you make the initial duplication, it might be a good idea to change the color of the shape. In your Layer’s Panel, you can double click on the thumbnail to the far left to choose a new color.
From here, you can decide how much of a “3D” effect you want. Using the Shift+Up Arrow shortcut, you can continue moving the duplicated shape upwards. I’m going to bump it up a few more times.
Now obviously, our top shape is sticking out the top. We need to fix that! With that layer still selected, in your Layer’s Panel, Command/CTRL+Click the Vector Mask of the original shape to create a selection.
Once the selection has been made, click the Add Layer Mask () button at the bottom of the Layer’s Panel. You should be left with a “3D” looking iOS icon!
From here, I’d suggest adding a gradient on the bottom layer to give it a ’rounded look’. Here’s one possibility.
In the coming weeks, I’ll be using this template for icon based tutorials, stay tuned! Click the image below to download the template!