I’ve been quiet recently, a lot of this is due to me focussing on a couple of key titles for me for iOS. One you already know about and one is totally unannounced. With all this work on little screens I was doing all sorts of UI and HUD design and one of the things that bothered me was previewing the work I was doing in Photoshop on a device at native resolution. (especially with retina display when the native resolutions screen area is tiny compared to most computer monitors displaying the same resolution). I’ve researched some solutions but inevitably came up with my own that suits me best.
There’s an app for that.
Currently there’s a couple of apps out there suited to this. First up is LiveView from Nicolas Zambetti. This is a free screencast type affair that broadcasts a select area of your screen to your device. Setup is super simple, you do need a host app installed on your computer and it is only available for Mac, once installed the device connects over wifi and everything works. You need to specify an area of your screen just for the screencast, this means if you move your photoshop windows about a lot it’ll break the illusion and you might spend time re aligning to the capture area.
The second app i tested is called Review by Kevin Kalle and Pieter Omvlee. This is a more bespoke tool for the task, specifically targeting photoshop users. It is a file sync solution that again requires a host application and again is Mac only. (I use both a mac and pc throughout development so I prefer cross platform solutions)
Once you’ve got both the iOS app and the mac app running syncing them was easy enough and to use it, there’s a system wide shortcut for syncing any images selected in the finder or any active window open in photoshop as a png. Very nice. The only negative thing i found was the process to update an image currently being displayed was slightly convoluted. It requires you to go back to the start of the app, hit the refresh button, wait for the update and the click on the image again to show the updated version. The iOS app of Review is also not free. It’s currently being sold for £1.99.
So one app (LiveView) provides instant updates as you make them via screen casting techniques but requires you to have a reserved area of your monitor specifically for this so didn’t really allow for folks like me who chuck photoshop windows around reckless abandon. On the flip side Review was more suited to me, just a keyboard shortcut and a file is ready to be viewed on the device, however the price and process to view a file I may of only changed a couple of things in meant it wasn’t right for me. The other problem I had with both these apps was having to install another helper app on the mac side was something I’d like to avoid if possible (and ideally, get a cross platform solution) and with liveview, broadcasting a screencast does have an impact on your processor.
My solution (Dropbox / custom website)
So what was the end result? Well I chose to use neither. Instead I utilised what I already had available to me… Namely a Dropbox account and a tiny little web site on my domain. How this works is as follows… I’m messing around with a mockup in photoshop, I hit a keyboard shortcut, an action runs to save a copy to my Dropbox public folder with a specific name (in my case iospreview.png) and I just tap my iPhone screen and the image magically appears.
(One added bonus of using Dropbox is the nice little icon that tells me when the image is done. And if the changes are minor it only uploads the delta so it’s pretty darned fast)
As an added bonus I included a swipe control on the website that toggles a “screen-door” effect. This basically emulates a non retina screen on a retina display device. So when viewing images on my iphone4. I can see how they would look on an iphone 3gs and lower just by swiping across the image. For information on how this works (and why it is different to just viewing a half resolution image on your retina screen) visit Louie Mantia’s blog here
If you want the source code for the html page to do this click the big blue button