Here’s a quick Photoshop setup that helps us make better design decisions when designing for iOS devices.
The primary thing to keep in mind here is that designing for a device like an iPhone, especially one with a retina display, using only a computer monitor leads to a good deal of guess work due to the differences in pixel density. We hate unnecessary guess work. Sure, you can export flats and look at them on the end device but you’re probably not going to do that as often as you’d need to – and it’s a waste of time given that tools like LiveView Screencaster are available. It’s a free app (Nicholas, we’d gladly pay) that let’s you view your Photoshop canvas in real time on your iOS device. It’s the best addition to our toolkit since Photoshop added layers and multiple undos.
Set up Photoshop with a new blank document (640×960 in this case) and make a second instance of it (this is key). It’s done by selecting Window>Arrange>New Window for… in Photoshop. See the screenshot above for reference. Assuming you have 2 monitors, drag one of the instances over to the secondary monitor making sure the entire canvas is viewable at 100%. Leave the other instance on the main monitor. Get LiveView Screencaster running on both devices and line up the LiveView frame to fit perfectly over the canvas on the secondary monitor (use the arrow keys for fine-grain adjustments). You’ll now want to work solely off of the main monitor instance leaving the secondary one alone. This allows you to freely zoom or move the canvas as much as you want for pixel perfection, while simultaneously watching how your actions are affecting the design on the actual device at 100%. Without the second instance, any canvas movement or zooming is mirrored in the iPod, and that’s not a good thing.
Here’s a quick snap of the sample set up:
written by Geoff Teehan
Awesome tip!
I especially love LiveView Screencaster’s ‘interpret touches as mouse events’ feature when combined with a linked up OmniGraffle file. It’s the best way I’ve come up with to create an instant on-device prototype
I only recently discovered that you could open a new window in photoshop for the same document, it’s a great feature. Also LiveView rocks.
I initially invented this method ;)
Smart thinking.
Nice post. LiveView is great! I agree, Nicholas should really make it paid. This process has slimmed my app design time significantly.
I never remember to set up that second window for display. Thanks for the reminder and adding in that LiveView twist!
That’s a clever trick Geoff. I imagine the same would work for Air Display or most other VNC-like apps.
It’s a really good technique. But not having the luxury of a second monitor I used my iPad instead – http://www.flickr.com/photos/konch/4974020028/
Brilliant! thanks for the tip! This will change my work flow for now on.
Thanks a lot! This is brilliant news for me. Works absolutely great. How could I work without this…
I really love this. This will very much help in my U.I. design.
Thanks for the post!
My macbook pro screen is only 1440×900, so how did u fit the liveview on your secondary monitor to view the full 640×960?
Great tip! Thanks Geoff!
Thank so much for your post and share the tips.
Thanks for sharing this Geoff!
Liveview is OSX only. Is there any similar tool for windows?
:)
This is pretty much the greatest thing ever, very useful for a variety of things.
Does anyone else have an issue with the inability to switch back to an iPhone frame? I installed the apps on both my iPhone 4 and my iPad and now I can’t switch it back to an iPhone, its always locked as an iPad frame. I would think it would automatically switch based on my device connected.
Any help would be much appreciated.
Rob, make sure LiveView is closed on all of your devices (iPhone, iPad, Mac). Then open it on your Mac, then on your iPhone. That should resize it appropriately. Repeat the process for your iPad to switch between them.
This is wonderful. Wish I had known about this a while ago. Is this still in development?
Unfortunately if you have a low-res MBP (1440×900) screen and an iPhone with a retina display (640×960), the screen cast area is larger than the height of the monitor. Is there a work around for that? Other than that, this is absolute perfection.
Rob or Travis, We’ve also experienced LiveView locking in iPad mode. We’ve tried the instructions you’ve suggested but have yet to be able to switch to iPhone mode. Any other ideas?
Anthony (and Rob), it seems the LiveView frame looks like an iPad whether you’re connected to it with an iPhone 4 or iPad.
The only way to get the iPhone frame is go to the “Device” menu in LiveView, and selected “Double Pixels for Retina Displays”, which is irrelevant if you’re using an iPhone 4.
If you open a Photoshop doc and view at Actual Pixels (⌘1), the size will be correct on your iPhone and iPad via LiveView. Remember, retina graphics (iPhone 4) need to be 2x the size of non-retina (iPad).
Geoff,
Thanks for sharing yet another great tool / tip to the mobile design community! I have found all of your tips extremely helpful. I do have an additional question, as I am in the same boat as Jitendra above, as I am on a windows machine, and therefore cannot use liveview. Do you know of any windows alternative? thanks again for all of your help!
jonathan bowden
I have also experienced this issue with the iPad frame. Is there an equal (updated) alternative I can download?
Love it! thanks a lot for the tip :)
Wow. Great tip!
I’m having the same issues as some others on here though in that my 15″ macbook has a lower resolution than the screencast window. Are you working on a 17″ or something?
toolkit “liveviewscreencaster” proved to be helpful. thanks for sharing this great idea.
There’s an iOS app called “Photoshop Display” does this better, I think. It doesn’t require any software installed on the computer. Works well with both windows and mac.
Silkscreen is also awesome.
Sounds perfect but it keeps crashing on start-up (the app not the MAc) even though all technical specs are sufficient. Anyone had a similar issue?
What a very nice features!!! You are so wise to share this. Thank you so much…
@ Stewart : Yes ! same here… I’m running on snow leopard (OS X 10.6.8)
LiveView was crashing on me too. I contacted the developer this morning, he’s added the previous version back on the website… but that was after I upgraded to Lion which stopped the crashing.
For others having an issue with their 15″ macbook pro – my solution was to rotate the photoshop canvas (hold down the R key until the tool appears, then drag the top to the left). The view stays right-side up on the iphone and you can get to work!