In this article, I'll walk you through the entire process I went through in order to design, create, and publish an iPhone icon. I have included pictures for each step since this is a visual process, however this is not for novices. I don't explain everything, but the entire process as a whole.
- Think. It's important to understand what you're making. Think about what would convey your app's function. For Battery Go! the main color would be green, since that conveys battery life, and a battery icon, like the one found on the iPhone itself.
- Sketch. I always sketch ideas out since
that helps me think. I drew out an idea I had for Battery Go! even though it looked crappy at first. - Scan. I scan artwork I draw onto my computer because I suck at drawing. I am much better with a mouse than a pencil. Make sure that you scan any artwork in color and at 600 DPI to preserve any small details that you sketched in step 2.
- Edit. This may seem silly and can be skipped, but it's helpful for me to edit the scanned image to be only what I need. For me that meant cropping the image so that I would only worry about my sketch and not the entire page.
- Vector-ize. For logos, it's important to create a vector version early on so that you can scale your icon as big or small as you need it. The smallest icon that an iPhone will need is a 20 x 20 pixel version for Spotlight Search, and the largest is 512 x 512 pixel version for the iTunes store. You'll also need a 57 x 57 pixel version for the iPhone icon itself, but I'll cover all of that later on in this post. I hand-drew the "Go!" part of the image, but the rest is either a font (Accidental Presidency) or just lines/curves.
- Export. Now that you have a nice vector logo, you'll need to get it into Photoshop to make the magic happen. In Adobe Illustrator, go to File -> Export -> PNG. That will create a .PNG image that you can open in Photoshop. There's other ways, but this is my way.
- Photoshop. I took the png file of my logo and opened it in Photoshop. I then went and made a green background with a grungy texture. I then added visually appealing elements like paint splatters, wings, shine, and other patterns that would subtly complicate the image. Below is an animate .GIF that shows the building process.
- Export (again). Now that you have your image, you'll have to export at least 2 versions of this logo. One at 512 x 512 pixels as a flattened, high quality .JPG and at 57 x 57 pixels as a flattened .PNG. Since this is kinda crazy to do each time you make an icon, I made a photoshop action that exports these images for you. It's available for download now.
That's it! Now you just have to use the images in your iPhone app. If you have any questions about this process, feel free to email me at Jeff@CollegeKidApp.com