06.24.2009 — When you're designing a touchscreen interface in Photoshop, what you see on the screen is often a very different size than the way it will actually appear on the touchscreen display.

This is problematic when you're trying to size and space all of the elements of a user-friendly interface. Fortunately, there is a way to preview your design in the true size of your target display.

Photoshop has a "Print Size" command in the view menu. This not only allows you to view the canvas on screen at the actual size it would print, it's also great for viewing the canvas at the actual size of your target touchscreen.

To do this, you first need to tell Photoshop the dpi (dots per inch) of your computer display. Mine, for example, is 113.21. You can figure out yours with the handy dpi calculator at pxcalc.com or using the following formula:

dpi = sqrt (width_pixels^2 + height_pixels^2) / diagonal_inches

Once you know your display's dpi, open Photoshop's Units & Rulers preferences and set the Screen Resolution (under New Document Preset Resolutions) to that dpi. You'll only need to set this once.





And, by the way, if you've ever done print work and were frustrated because the Print Size view never provided you with accurate results, you've just solved your problem.

Now let's put this to work.

For our example, we'll create a new project for designing an iPhone interface. The iPhone has a pixel resolution of 320 x 480. The screen size is documented as being 3.5" diagonally. So, using the dpi calculator, we know it has a dpi of 164.83.

Whenever you create a new project, Photoshop provides you with text fields to enter this information. You enter the width and height in pixels and the resolution in pixels/inch. (Pixels are dots, so this is the same as dpi or dots per inch.)



And then, when you activate Print Size from the view menu you'll be experiencing your design in all its glorious true life size. You can also apply your new dpi knowledge to any application that allows you to zoom to a user-entered percentage. Simply take the dpi of your display and divide it by 72 if you're on a Mac or 96 if you're on a PC.

When I divide my display's dpi by 72, I get 1.57 as a result. Now just multiply that result by 100 to get your display's true life size zoom percentage. By zooming to 157%, I can work on documents, like Word and Illustrator, in the actual size they would print.

Morgan Strauss is Director of Operations for Guifx, developer of touchscreen interfaces for integrators. He has 16 years of experience designing digital and analog interfaces for the aerospace, medical, automation, and entertainment industries. He's taught many classes and seminars, including 'Interface Design for Touchscreens' at the Consumer Electronics Show (CES). For more design tips visit the guifx blog.