Creating iOS style icons with ImageMagick

Icons for iOS apps are generally provided by the app with square corners and no "sheen". The rounded corners and glossy sheen are added by iOS.

If you want to achieve the iOS icon look on icons used elsewhere (Android, Web, etc), you need to round the corners and apply the sheen yourself.

What follows is my quick attempt to give the iOS treatment to this 512x512 icon:

Transparent Rounded Corners

OK, transparent rounded corners are actually the easy part. There are several ways to get ImageMagick to do this. The easiest (read: shortest) command i've found looks like this:

convert -size 512x512 xc:none -fill white -draw \
    'roundRectangle 0,0 512,512 50,50' in.png \
    -compose SrcIn -composite rounded.png

So now we have this:

Overlay some sheen

The sheen is trickier. I imagine that real ImageMagick pro's could generate the sheen mask with some deft command-line, but I'm nowhere near that proficient.

Instead I created the following image in Gimp - exactly how is a topic for another post :). The black background is coming from the div containing the image - where you see black is actually transparent in my png, and the grey highlight at the top is semi-transparent:

To composite the rounded-corner image with the glossy overlay (gloss-over.png), I use this ImageMagick command:

convert -draw "image Screen 0,0 0,0 'gloss-over.png'" \
    rounded.png final.png