When developing for iOS, the OS handles the masking of the image to give it a rounded rectangle look, but for the Mac icons this does not currently appear to happen. The icon asset set expects 16×16, 32×32, 64×64, 128×128, 256×256, 512×512 and 1024×1024 square images (they also require 16×16@2 and so on, i.e. 2x the images up to but not including 1024×1024).
If you supply a full sized squared image, as per the stated dimensions, no mask is supplied and hence the icons looks much larger than the standard Mac ones and also lack the style of them (i.e. rounded corners).
This post is basically about creating icons that look more the part using GIMP.
- Create a 1024×1024 image
- Add an Alpha Layer
- Select All of the image and clear it
- Create a second image around 880×880 in size – you might want it larger or smaller depending on the icon but you’re really aiming to have the actual icon smaller than the full image size.
- Now we want to round the image, in GIMP select the Select | Rounded Rectangle option and set the Radius to 42% or you might prefer to right mouse click on the image and select Filters | Decor and then Round Corners (the former will not add any drop shadow whereas the second will.
- You may want to remove the background by inverting the selection then Edit | Clear or simply copy/cut the selected and round image and copy to the larger image we created
- You may need to align the image using Tools | Transform Tools and Align (or short cut Q)
That’s about it – experiment with the radius % and size of the image as I’m not sure I have them as perfect replicas of the Mac standard icons, but they’re a lot close than a full sized image.