Creating iPhone Icons With GIMP
Posted on September 14, 2010
One of the nice things about Lucky developing for the iPhone is that it’s pretty easy to conform to the standard look in your app icons. The rounded corners are automatically applied, and unless you go out of your way to prevent it, a “gloss” is applied to the top of iPhone icons when they are displayed on the device. The result of these automatic transformations is that the standard iPhone app look is pretty easy to achieve.
That works great wholesale nba jerseys on when your icon is displayed on an iOS device, but what if you want to wholesale nba jerseys use your icon on Store your website, or even your business card? Well, that’s where an artistically challenged developer like me runs into problems. If you don’t get the gradients just right they look “off” and they’re distracting to anyone that knows what an iPhone icon is supposed to look like.
Luckily, for those who know how to use Photoshop, there are solutions. Several people have been generous with their time and cheap jerseys skills and have distributed templates for iPhone icons that can be used with Photoshop to get the correct corner radius and gloss. Developer One of the best templates that I’ve found was created by Sebastiaan de With who distributes the template on his blog Cocoia.
Unfortunately, I don’t have Photoshop. It’s pretty expensive, and I don’t have the budget for it. So I use GIMP which is a free image manipulation program that provides almost all the features that I (as a non-artist) will ever need. In fact, I’ve never run into a graphics lamenta problem that I felt capable of tackling that I couldn’t solve using GIMP. Except one: Wholesale Seattle Seahawks Jerseys GIMP won’t correctly open the PSD file that contains the iPhone icon template from Cocoia.
Luckily I have friends who have Photoshop and skills to make the most of them. Mike Berg of We Heart Games offered to pull out the parts of the template that apply to 512×512 cheap nba jerseys pixel icons and export them to PNG files that can be used in GIMP. I took the results of his work, made Management a few modification, and now offer up to the Internet as an iPhone app icon template for Gimp.
This template provides everything that you need to make faithful renderings of iPhone app icons at a size of 512×512 pixels. You can resize from there if you need to. Inside the ZIP file are a number of files. The file 512-shape-mask.png
can be applied to a 512×512 pixel image as a layer mask to get rounded corners with the correct radius. The files 512-topBevel-and-gradient.png
and 512-topGloss.png
can be applied as layers to get the correct glossy look of an iPhone app icon. I also included a sample file Localization (512 demo.xcf
) that demonstrates how you can use these images to generate the proper look.
I hope that this example proves helpful to other developers that use GIMP for their artwork, and a big thank you to Sebastiaan de With who created the original template.