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:
