Preview your photoshop design directly on the iPhone/iPad

Too many screen designers are not yet familiar with mobile touch screens. There, you have to look carefully for buttons large enough to hit with your thumb, fonts that are readable on the go and colors that compensate those energy-saving displays. As with print, you should proof your design against the actual output early and regularly. But since we are in the 21st century we can choose a more effective way than using color calibration, DPI adjustments, or print-outs to do this.

A week ago I stumbled across a small and free tool by Nicholas Zambetti called LiveView you can find on the App Store. Its concept is easy: On your Mac you run the LiveView ScreenCaster. That counter part renders an iPhone/iPad frame in its actual (huge!) dimensions on your monitor. Anything that shines through the screen of that imaginary device is being sent over the Wi-Fi. On the iPhone/iPad you can now run the LiveView app. It automatically finds every Mac currently running a ScreenCaster via Bonjour, asks you for the one to display and… Well, that’s it. You can now see your screen pixel perfect without exporting and importing images anymore.

The liveview app+screencaster copies the content of your screen directly to your device over the air.

Get a live copy of your screen on the iPad with the LiveView app.

As it turns out, this is just the way you can immediately test out anything you mock on your big screen. The ScreenCaster frame gives you the right idea about the actual dimensions of the device including its borders. You can adjust its position pixel by pixel with the cursor keys and finally press CMD+H to hide it. This is far more convenient than any VNC-based approach I tried before.

From there, work with Photoshop, Pixelmator, OmniGraffle or any other tool as usual. You can hide layers, resize elements, and change your font size while watching everything live on your device.

Impress your client and hand over the iPhone to your stunning audience while swapping layers. Or, use the tool as I did it with my current project at itemis. I looked at a flash website through the iPhone! That way, I was able to gain a first impression of what can be improved with a true iPhone app.

Unfortunately, the ScreenCaster cannot be rotated to send the data in landscape mode. Another flaw is the lack of a Windows version of the ScreenCaster. Nicholas, if you read this: I meant it the way I mailed it. Let me know if I can help you with the Windows port!


Support my Work

Writing an article like the one you have just read takes me quite an amount of my personal time. Way too often, I invest this time in different interests and decide against another blog post. On the other hand, you can motivate me with your feedback, your thoughts and your ideas. Please leave a comment below or flattr this post if you think it's worth it.

Leave a Reply