Created @savvyapps by @starrcourt. Find the latest download on GitHub
- The Photoshop template is located in the "Working Files" folder.
- You can create your own documents or lay the grid over an existing document using the Photoshop actions within the "Actions" folder.
- All grid based values are based off of artwork from Apple in the "Research" folder.
- Most iOS app icon templates start out with designing at 1024×1024 and use a single smart object that is then scaled to every size needed. With this approach, it’s quite difficult to gain context for each size. More importantly, there’s no way to tweak the app icons for various devices.
- The iOS 7 OCD app icon template is different than others in the fact that each app icon is its own independent smart object. This allows you to design your app icons at the exact sizes that they'll be used. Another huge difference in our template is that the grid is uniquely crafted for each app icon. Thus, yielding pixel perfect values at every size.
- Since our template uses independent smart objects we recommend starting with your flagship app icon (iPhone or iPad) and working out from there. You’ll notice there are only shapes for circular grid elements but vertical and horizontal grid lines are present as Photoshop guides within each smart object. This is because shapes as guides are not ideal in pixel based programs.
- If you’re designing an iPhone app icon, start with AppIcon60x60@2x.
- Once you’ve completed your design, save and close the smart object.
- Duplicate the smart object, rename it to your next desired app icon
- Open the smart object and resize it as needed.
- Delete and replace the grid folder each time you resize the document.*
- Notice that your design needs to be slightly tweaked each time you resize it.
- Use the size specific grids to help you make each app icon pixel perfect for every use.
- Use the vector masks throughout the template to apply the iOS 7 rounded corners to your designs.
- This masks can be useful for previewing or exporting your app icons.
- Replacing the grid is extremely easy if you use the ios-7_ocd-app-icon-template_grid Photoshop actions included with the template.
- OS Icon Gallery
- After iOS 7 Icons
- An iOS Icon Exploration
- iOS Cheat Sheet
- iOS Rounded Rect Script
- iOS 7 Colors
You may freely use these resources, without restriction for personal or commercial use. No attribution or backlinks are required, but do spread the word if you like what you see.
You are not permitted to make these resources available for distribution elsewhere “as is” without prior consent.
© savvy apps, llc