Design Your Touchscreen Interfaces in Photoshop in True Life Size

When you’re designing a touchscreen interface in Photoshop, what you see onscreen 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 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 onscreen 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 this handy dpi calculator or 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.

You may also enjoy:

Refrigerator Touchscreen Interface

Our refrigerator GUI was featured at Embedded World, the largest trade show of embedded technologies in the world. In addition to normal dispensing operations, the dynamic