iPhone App Icon Template

Having designed a number of iPhone icons, I’ve spent some time gawking at the array of beautiful ones out there. One of my favorite concepts is to turn the 57x57 icon into a 3d object like a package or a radio, rather than an image inside of a gem casing. I’ve spent some time figuring out the array of techniques needed to design these “object” icons, so I thought it might be helpful to share them. You can download the source file and (be sure to put your OCD hat on) read below to gather some insight.

From Square Art to Rounded Icon

As you already know, an application icon is a 57x57 rectangle, to which Xcode masks with a 10px rounded corner. This may work fine if you have a photograph or an illustration but what if you want to use the rounded corners as edges to your “object” icon?

Figure 1: Example Icon, full bleed and masked.

Your initial thought might be to duplicate the rounded corners in Photoshop and export a transparent png. Unfortunately, doing so would mask an already masked edge causing the anti-aliasing to have too much contrast, resulting in a very jagged look. What we want to do is create the edge effects (highlights and shadows) in a way that gives us a full bleed to all four corners, thus allowing Xcode to mask our edges properly as you can see in figure 1 (magnified to show detail). At first glance this might seem easy but it requires a reversal of the techniques you would use to achieve such effects.

Flipping the Script on Highlights and Shadows

Look closely at the edges of the “Masked Result” in figure 1. As you can see we have 3 effects going here:

1. Top edge highlight created by a light source from above
2. Bottom edge shadow, also created inversly by the same light source
3. Very slight reflected highlight on the left and right edges

Lets focus on the top highlight. Were it not for the Xcode applied mask I would just created a rounded rectangle, add a white inner-shadow of 1px and call it a day. Unfortunately, as mentioned before, we must have a full bleed so we actually have to build this highlight in reverse.

Figure 2: Example icon exploded, showing the different layers of effects.

In figure 2 we have an exploded version of the Photoshop file, showing the 3 layers of effects overlaid onto our icon artwork. Lets focus on the “Top Edge Highlight” on the far right of the diagram. What we have is a layer that is 10px wider all around the 57x57 knockout in the center. I make it 10px wider, as any effects applied to the very outer edge of this layer will be well outside of your 57x57 viewable area. The knockout matches the size and rounded corners of the icon. This provides a window to which we add a drop-shadow layer effect. When overlayed onto our artwork, this drop shadow acts as a highlight to the top edge. I’m a big fan of Overlay for highlights and this looked good at 50% opacity. I also apply the same layer style (Overlay) and opacity to the layer itself so the bleed matches all the way through.

Now I won’t break down each effect but pretty much the same principle applies to the bottom edge shadow (identical to the top edge highlight, just black and -90 degrees direction) and the left/right edge highlights. The left and right highlights layer has a knockout that is 1px inset so that it covers all around.

The result of this obsessive work is that we get full bleeds that match our desired effects, thus allowing Xcode to mask our icon property and get a nice soft edge. You’ll notice a slight noise effect on the art which I added for no reason other than force of habit; with 3d surfaces, noise gives you a nice texture and works very well at diffusing gradients which can sometimes “stagger” if they are of high contrast.

Framing Your Icon

In the source file you will see a copy of our icon, but it now has a raised frame around the edge. Sometimes your icon is a container of sorts, as I’m sure you’ve seen many other icons with this effect, so you need a raised edge. We use almost all of the same effects on the very edge of the frame, but one thing I’d like to point out is the math used to generate a smooth frame. In figure 3 you’ll see a close-up of the frame. You’ll notice that the corner points line up horizontally and vertically. As mentioned, the app icon has a 10px rounded corner. For every pixel of thickness of your frame you need to remove 1px off the rounded corner for your inside wall to get a mathematically smooth corner. Here we have a 3px thick wall, so the outer edge is 10px rounded and the inner edge is 7px rounded. The math is pretty easy to remember which I like, and getting it right gives you a much more believable effect.

I hope you found some useful tips in this tutorial! I didn’t run over every single detail so spend some time poking around in the source file and if you have questions, or anything to contribute, drop a comment.