Photoshop templates to preview iPad icon designs

When I’m designing an icon, I find it useful to preview how it will look in situ on an iPad’s home screen. To make this easier, I’ve created a couple of Photoshop templates to help me mock up how they’ll look on an actual device.

I’ve created separate templates for retina and non-retina devices. The names of each app on the home screen can be changed, and you can drop in your own 144px-square / 72px-square uncropped icon images to see how they’ll look when rendered on the iPad. The template automatically adds the curved corners and drop shadows.

Download a zip file containing both Photoshop templates (6.3 MB).

Here’s a preview of how it all looks:

iPad Icon Preview template

The templates were created in Adobe Photoshop CS6 for Mac, but should work with older versions of Photoshop too.

To change one of the icons, open the group called ‘Icons’; then open the group for the row you want to change (e.g. ‘Row 1’); and then open the group for the icon you want to change (e.g. ‘Icon 1’). Finally, open the group named ‘Icon Image’, and paste your own icon in front of the existing ‘Icon’ layer:

How to put your own icon into the icons template

Make sure that the icon you paste in is 144px by 144px square for the Retina template (iPadIconPreview@2x.psd), or 72px by 72px square for the non-Retina template (iPadIconPreview.psd). Don’t apply any curved corner cropping yourself – the template will do that for you.

Note that each ‘Icon image’ group has a vector mask that crops the icon to the appropriate size (with rounded corners). If you’ve pasted your icon into the ‘Icon Image’ group, but can’t see it, it might be that it’s positioned somewhere else on the screen, and hidden behind the vector mask. You can always temporarily disable the vector mask to see where it is, by right-clicking on the mask for the appropriate ‘Icon image’ group and selecting ‘Disable Vector Mask’:

Disable the vector mask to find out where an icon is

The default icons in the template use a range of color gradients based on the standard Apple icons, and the background is the current default desktop image from iOS 6. This should give a representative idea of how your icon will look on an average user’s iPad. There’s also a pre-populated icon dock layer that you can turn on or off.

Here’s how I use these templates while designing an icon myself. First, I use Air Display from Avatron Software to turn my iPad into a Wi-Fi-connected external monitor for my Mac. With this enabled, I open two document windows for the template in Photoshop, and position one of them on the iPad ‘monitor’ in Photoshop’s full screen mode. (You can create a second document window for a Photoshop document by selecting ‘Window > Arrange > New Window for iPadIconPreview.psd’.)

I keep the other document window on the main window of my Mac. I then drop various icon design permutations on top of the icons in the template as I go, so that I can see how each one looks, and see which works best on the iPad’s screen. Every time I drop a new icon design into the template on my Mac’s main screen, it also appears in the second document window on the iPad via Air Display, so that I can get a true idea of how it will look on a device. (Thanks go to Rob Corradi for originally tipping me off about using Air Display in this way.)

If you find these templates useful, or have any suggestions as to how they could be improved, do let me know – I’m @daveaddey on Twitter.

2 thoughts on “Photoshop templates to preview iPad icon designs

  1. This is great, but would be even more useful if there was an option both pre-rendered and regular icons (i.e. the gloss effect)

  2. This is fantastic! Thank you so much. I searched the internet for so long today and nothing came close to anything this good.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>