Photoshop Template for App Store and Market Icons
When submitting a digital magazine to either Apple’s App Store or Google’s Android Market, you need to supply App Icons and more artwork. Typically these icons include the homescreen icon and one icon for the market place. You provide these icons to the Viewer Builder.
A valid App Store app or Android Market app needs a few more icons that will be used in differnt places (like search results, popup windows, …). Providing these Icons is can be an elaborative task: 512px here, 72px there, applied shine there, no shine here …
But there are ways … Here is a photoshop file that automaticly generates all needed icons both for Apple iPad and Android from one artwork.
Template
How to work with the template
This template uses the great smart object feature in Photoshop. Take your time to get used to the file. Everything is grouped in sets/folders and named properly.
In every set of layers you will find one smart object layer called “ICON Artwork”. Double click this file to open it in Adobe Illustrator. Edit it there, save and come back to Photoshop. All other Icons will update accordingly.
Please note: You will notice that all smart object layers are linked. Updating one artwork will change every other version. To create a separate version of, say, the 512 px Icons, select that smart object layer, right-click and choose “New smart object by copy”, delete the previous layer.
Apple App Store Icons
A branded viewer for Apple’s App Store needs three symbols: 29px, 50px, 72px and one 512px graphic for the App Store detail page.
Note that you provide square format graphics, apple takes care about the rounded borders. If you include a shine effect yourself, make sure to check the setting accordingly in the viewer builder. A sample shine effect is included in the file (just make the iOS shine layers visible).
Please note: Create a custom viewer app for the iPad in the Digital Publishing Help.
Read more: iOS Human Interface Guidelines - Custom Icon and Image Creation Guidelines
Android Market Icons
A branded viewer for the Android Market includes three icons: 36px, 48px and 72px. There is also a 512px graphic. There is some banner like artwork used in different places in the Market (uploaded during market upload process).
The Icon Design Guidelines for Launcher Icons for the Android Market recommends to not use the full space provided by the icon. Instead you apply a rounded border and a shine effect yourself and keep the graphic inside a safe space (details on the linke before). You can use transparency in the icon.
You can use the whole space, though, but your icon will look bigger than the most Android Icons. If you have some special shapes in your icon (like stars, circles) they can reach to the outer edges. Android Market Icons include alpha, so the artwork is placed on a transparent background in Photoshop.
Read more: Create a custom viewer app for Android Devices in the Digital Publishing Help
Export your icons
In that Photoshop file you will find predefined slices. They produce distinctive named .png files on export.
Save for “Web and Devices” and use PNG-24 as a format. Make sure to choose “All User Slices” in the save dialog.
Result:
Give these icons to the viewer builder and you are fine.
Download
Download Template for Viewer Builder Icons.psd (4 MB)
—Johannes
Recent comments