If you create apps in addition to using them, then you know that it can be a real pain to optimize your artwork for various devices. Prepo is a free application that aims to make the task of converting retina display artwork to ‘normal’ app artwork less tedious.
Does it succeed in making the conversion process quick and pain free? Read on to find out.
What Is This For Again?
As a designer, it’s important that your application looks great on both the retina iOS displays and the older, non-retina displays. To do this you have to have two different versions of the same graphic.
For example, in order to have an application’s icon look decent on both retina and ‘normal’ displays, one would have to have a version of the icon, aptly called Icon.png, at 72x72px and a retina display artwork, entitled [email protected], at 114x114px.
Many applications on the App Store contain hundreds upon hundreds of different images making up their interfaces and all the different elements of the application, so when the retina display was announced, developers had to work tirelessly to convert their artwork to double the resolution of what it originally was. This is where Prepo comes in and tries to help out.
The purpose of the Prepo is to make that task easier and to make developers more efficient by saving them time by letting Prepo convert their artwork; eliminating the need of the developer to manually resize and save the original artwork as something like a Photoshop document alongside it.
Prepo goes to work when the user drags and drops their retina artwork onto the main window (for this article, we’ll use a [email protected] at 200x200px). The app resizes the image and renames it so that iOS knows which is the retina artwork and which is the non-retina artwork.
In this case, Prepo would resize [email protected] to 100x100px and rename the file to Button.png. This is in contrast to the developer having to modify the retina display artwork’s canvas and image size, removing the “@2x” suffix from the end and saving a whole new file. Sure, this doesn’t sound all that time-consuming, but as I said, many apps can contain hundreds of images so it can potentially take vast amounts of time to convert them without the aid of something like Prepo.
Working with Icons
A terrific feature of Prepo is that you can convert your icons to work with all of iOS’ different icon formats, including the icon that would be used within the built-in Settings app as well within iOS’ Spotlight functionality.
Effortlessly drag your iTunesArtwork.png (512x512px) icon to Prepo and then check whether you want your new icons to be compatible with iPhone and iPad, then press Export, choose a location for the files to be saved and then an additional dialogue will appear that tells you all the different outputted icon files that have been exported and what they correspond to.
Additionally, there’s a supplementary button at the bottom of the new dialogue, “Copy plist”. What this does is copy the names of each icon file and puts them into a Property List format (under the CFBundleIconFiles key to be exact), which you can simply copy into Xcode and then each of the icon files will correspond correctly with your application and inside iOS.
Working with Icons
Interface
Prepo’s interface, like its functionality, is simple and clean and features only a heads-up-display dialogue telling the user that their artwork will be reduced by 50%. When you drop your artwork onto the application, the artwork appears within the application and then you’re able to click the Export button.
Prepo then prompts you and asks where to put the resized file to be saved. After this, the application saves not only the new file with the correct naming, it also duplicates the native retina file in the same location for convenience.
Prepo's Main Interface
Weaknesses
In spite of the fact that Prepo is a considerable application and something that I can see saving many developers lots of time and effort, I believe that it does somewhat lack settings and customization.
For instance, you’re not able to customize an automatic path in which your exported files will be saved. This would be handy and especially useful for large projects in which you’re using the app constantly. At the present time, the user has to keep specifying the output path.
Another issue I’ve found is that the heads-up-display dialogue can become tiresome to manage because every time you close the window then you have to navigate to the Window menu and open a new one. Something else that doesn’t really sit right with me about Prepo is that each of its windows are on top of all other windows, so you cannot simply have Prepo open in the background because it will stick to the top and appear above all other applications, making it a nuisance.
Unretiner
Unretiner is another application that aims to aid developers in making their artwork compatible with both iOS screen types and despite the flaws I just mentioned, Prepo is definitely the superior application in the way that it features the icon conversion. Regardless of that, I believe that Prepo should take a leaf out of Unretiner’s interface-book and go for something slightly more conventional. Unretina, like Prepo, has a disappointing lack of settings and customization – maybe it’s just a retina-app conversion trend – but it’s something that needs to be improved.
Unretiner (top) and Prepo (bottom)
Conclusion
Overall, Prepo is something that I’d definitely recommend you downloaded from the Mac App Store. After all, it can save you a heck of a lot of time and doesn’t cost anything as it’s available for free. Mother Ship Software (the developer of Prepo) also say on their website that there’s plans for Prepo to be made open source in the near future so it will be interesting to see what others addonce the source code is available.
Until then, developers rejoice at the fact that no longer do you have to save multiple Photoshop documents for multiple artwork sizes. Let Prepo take all the drudgery out of screen resolution optimization.