Design 2
Tools: Optimizing your Images
You have finished all the code for your app, integrated the design, tagged everything for analytics, now you’re ready to release to the App Store right? Wrong. One of the last steps before finally releasing your new app is to optimize your images. This is important for two reasons. The first, it will slightly help the performance of your app. Since your views will be a little smaller they’ll load a little faster. You will especially notice this if you are supporting older devices (i.e. iPad 1st Gen and iPhone 4). Also if you have many assets on a view it should respond a little better. The second reason to optimize your images is the crucial 50 MB limit Apple sets for downloads over cellular networks. If your app is over 50 MB users will not be able to download your app unless they are on a Wi-Fi network. This is a barrier that you can’t afford, anything stopping a user from downloading your app may cost you that download if they forget about your app or move onto the one next to it that’s similar in the store.
ImageOptim
The tool that I use is ImageOptim, it’s a really easy tool to use and it’s FREE! ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations. Most importantly it does so without affecting the image quality.
The interface to ImageOptium is very minimal and simple. Drag images onto its window or dock icon, or click on the plus (+) button to select images from a standard open dialog box. The app immediately starts optimizing the images, using one or more of a slew of command-line image optimization tools: PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle. Beside each file name you’ll see the file size (in bytes), and the percentage by which the file size was shrunk from the original and at the bottom it will tell you the total amount of savings for all the images you optimize at once.
ShrinkIt
Another great tool for optimizing images is ShrinkIt. The difference between ImageOptim and ShrinkIt is ShrinkIt allows you to optimize PDFs. If you have a magazine app or a PDF reader it will be quicker for users to download your PDFs if they are smaller.
ShrinkIt is a simple, small tool (for Mac OS X Snow Leopard) that will automate the process of stripping needless metadata from PDFs by re-saving them using Apple’s PDF processor. This is 100% lossless – it’s not compressing anything, just removing unneeded data. Simply drop a bunch of files onto it to have it do its magic. The original files will be renamed with the prefix “_org_” for safety, but you’ll probably just want to delete them.
Both of the apps above are great for reducing the size of your images and PDFs without losing any quality, so why wouldn’t you optimize?
Tutorial: Designing and Exporting Your App Icon
After coding your app it’s time to make that killer icon that’s going to make your app stand out from the rest in the store. There are many things to consider to designing the best icon to fit your app.
Tips to Designing the Best App Icon
1. If your app is an already established brand, then it’s best to use that brand recognition in the icon by using the logo (i.e. Facebook, Twitter, Digg, etc..). If you don’t have a big brand then your icon should represent what the app does. Instagram is a good example since it shows that it’s a camera app.2. Stay away from using text that’s longer than one word within the icon. It makes it very difficult to read when it’s sized down for the iPhone. It may read well in the 1024×1024 version of the icon, but test it on the phone to see if it’s still legible.
3. The design and colours of the icon should mimic the look of the app. It gives the experience that it’s truly a miniature representation of the app. When the user taps on the icon to open the app it should be a fluent transition of style.
4. Try to make your icon original. Since there are so many apps out there, yours may stand out if it looks different than the other ones in your category.
5. Emotion. You want your user to get an emotional connection to your app through the icon. You’ll notice that most of the top games all have a character or animal representing their game. That gives an emotional connection through the characters expression.
Icon Inspiration
Below are a couple links to collections of nice icons to give you an idea:What Do the Top 100 Paid App Icons Have in Common?
iOS Icon Gallery
Icons Feed
iOS App Icon Designs (iOSpirations)
40 Brilliant iPhone & iPad Application Icons
45+ Fantastic iOS App Icon Designs for Inspiration
Exporting your Icon
Once you have designed your fabulous icon, you’ll need to export it to all the sizes required by Apple.This is the best Photoshop template for creating iOS App Icons:
PixelReport’s App Icon Template
With this template, you can see what your icon will look like in situation, within the app store and on the springboard. Then with a simple action all icons are saved out for you including in the proper naming conventions required.
