This post first appeared on www.vickiwenderlich.com
As an artist working with a developer on iOS apps, I have to provide my art in both retina and regular versions. This means every button state, toolbar background, or character must be supplied both in a normal resolution, for older iPhones and iPads, and a retina resolution, at double the normal pixel size. Also, I have to tack on “@2x” to each retina image name so that it can be used properly.
Artists and graphic designers go about creating these regular and retina images differently, but what I do is create graphics for the retina screens. Then, unless the art needs to be pixel-perfect (more on that later), I save out the retina art and finally resize the images by 50% for the regular screens.
This would take forever if I had to resize and rename each image, even with batch processing. However, since this is a common problem in the iOS field, some developers have created apps to help out!
There are two mac apps that I’ve found very useful when resizing my retina art. Read on to find out how you can save time and effort resizing images!
Note: I received a free copy of both apps mentioned here, but I would never recommend a product that I don’t personally use and consider well worth its price.
Second note: Both of these apps provided the same level of image quality. I compared a scaled-down image from each app and could not tell the difference.
The name of this app is fitting, since it helps you get the app shipped faster! It takes any image and exports it, properly named and sized, for retina and normal resolutions. It does other resizing and exporting things too, but this is the one I use. And I use it a lot.
First, you select where you want to export your images. Then you choose the file types you want. The only one I use (though there are plenty of choices, including custom settings) is “Retina Package”. This means that if you drag your retina-sized art (the 2x size, although it doesn’t have to have “@2x” in the filename) onto the Ship It! app, it will rename the retina-sized art to have “@2x” at the end, copy it, and resize the copy by 50%, saving it with the original image name. You can resize multiple files at once.
If you want a simple image resizer that will name your files correctly for iOS apps, Ship It! is close to perfect. At the time of this writing, it is 99 cents on the mac app store.
This app is far more comprehensive than Ship It! and offers far more functionality, especially for a developer. It also has a price tag to match, but it can save you a lot of time and worry.
Not only does it take your retina images and resize them (although the retina images have to have “@2x” already in the filename), but it also will take your image folder and tell you if you are missing images and if there is a problem with the images. I learned that I haven’t been paying attention to my Retina images being even in pixel size, which is important when scaling down the images correctly!
It has a bunch of other features too, like batch processing and generating lists of issues with the art (that you can pass on to your designer).
Resource Helper is more of an image-management system than a simple resizing/renaming app, with a lot of functionality designed with iOS developers and designers in mind. It is $9.99 on the mac app store. You can find more information on their web site.
A Note On Image Quality
I know that many designers out there are shaking their heads at me for even considering scaling down a pixel image rather than scaling down the art in Photoshop or Illustrator and resaving.
And they have a point – to get the highest quality graphics, you need to scale down the graphics within Photoshop (or Illustrator), allowing the layer styles, patterns, and vector shapes to scale crisply. This means you need to make and maintain documents for each size (so a document with normal iPhone graphics, and a separate one with retina iPhone graphics) and save them out individually.
However, that’s not only a huge hassle but a big investment of time. And time is usually what we don’t have, especially when trying to get an app out the door!
Firstly, we often make changes to the art after we get it working in the app, as we iterate on our user interface. If I had to maintain two separate documents during the app creation process, I would go insane and make a ton of mistakes.
Secondly, it’s more important to us to get the app shipped than it is to have pixel perfection. We can always update the graphics for the final version, or even for an update, if we feel the image quality is not great on the regular screens.
We feel that the slight compromise in quality is worth the time savings when developing an app. We often will go back and replace the scaled-down art with properly scaled and resaved art when the app is finalized, but during development we have to be pragmatic.
Jason Jardim, the creator of Ship It!, has generously offered five promo codes to the readers of this blog. They are first-come, first-serve, so get yours while they last!
Other image resizing tools?
Do you know of other image resizing tools that I haven’t mentioned? To be useful in iOS development, they have to include two key features:
- Resizing images by 50%
- Naming the images properly, so that the retina version has “@2x” on the end
If you know of another tool to check out, let us know in the comments!