There are a lot of graphics resources needed when building a web application for iOS and Android platforms. To simplify the process (at least for demonstrations), I've created a script file that uses ImageMagick to generate all of the icons and launch screens as the various resolutions and sized needed for the different devices. Soon (but not yet) I will add the script for Android.
The script assumes three files:
- 'source' image that is not larger than 768x768 but is on a canvas of 1024x1024 where the difference is just disposable background and may or may not get cropped
- Pre-generated image which provides the iOS glossy icon look (layer.png and with the same construction as the source)
- Pre-generated mask which provides the rounded corners (mask.png and with the same construction as the source)
Since both the layer and mask files never change, the only real work is creating the one source file.
The script is a command file and currently assumes it is running from a command prompt on a Windows PC. IT also assumes that ImageMagick has been installed and the 'convert' command is available without need for providing directory or path information.
Here are links to the files used:
Here are links to the files generated:
- App Icon 57px (iPhone classic)
- App Icon 72px (iPad)
- App Icon 114px (iPhone Retina display)
- App Icon 512px (App Store)
- Settings / Spotlight Icon 29px (iPhone classic)
- Settings / Spotlight Icon 50px (iPad)
- Settings / Spotlight Icon 58px (iPhone Retina display)
- Launch Image 320x460 iPhone classic)
- Launch Image 640x920 (iPhone Retina display)
- Launch Image 768x1004 (iPad portrate)
- Launch Image 748x1024 (iPad landscape rotated)
- 16px favicon
- 32px favicon
Here is an example !