ImageMagick: An App Builder's Best Friend

ImageMagick is one of those must learn tools for every programmer. In the past, it saved my butt while creating a custom Google Map. Tonight I put the package to use to assist in some PhoneGap development I'm doing.

Between the different screen sizes and resolutions, Android and iOS seem to call for an endless number of resized images to fully implement the icon and splash screen requirements. Luckily, ImageMagick makes the image generation a walk in the park, compared to manually updating all these files.

First off, I created a 150x150 pixel image which would serve as the source for my icons and splash screen. I named this bad boy icon.png.

Next, to replace the default PhoneGap icon images with my custom one I ran the following in both the www/res/icon/android and www/res/icon/ios directories:

for f in *.png ; \
 do dim=`identify -format "%wx%h" $f`; \
 convert  -size $dim  ../../icon/icon.png $f ; \
done

That one-liner loops through every image in the directory, determines the target size and then resizes the source icon.png file to the specific dimensions.

Creating a set of splash screens is a tad bit trickier. The icons are all square, so it's trivial to size them down from the large source image. Splash screens, on the other hand, vary in size, as well as orientation.

My solution was to take my large icon image and overlay it on a gray'ish white gradient that was sized to the splash screen dimensions. Here's what that looks like as a bash command:

for f in *.png ; \
  do dim=`identify -format "%wx%h" $f`; \
  convert -composite -size $dim \
     -gravity center gradient:'#a7a7a7-#e4e4e4' \
     ../../icon/icon.png $f ; \
  done

The above code was inspired by this example. ImageMagick allows you to get much fancier than this trivial example, but for my purposes this was all I needed.

One Gotcha I discovered along the way was that my icons weren't updating for iOS. I'd update my www's iOS icon directory, and yet the old icon would still be in use. I fixed this by explicitly resizing the images found in: platforms/ios/MyApp/Resources/icons. I'm not sure this is the cleanest way to solve this problem, but given that it takes only a single command and a few seconds to resize the images, this worked well for my purposes.