Designing Touchscreen Interfaces in Photoshop in True Life Size
Often, what you see on your computer monitor is not what you get on your touchscreen; here's how to perfect-size your GUIs
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.
NewsFour Key Things to Look for When Selecting a True Smart Light Switch
ProSource: ‘We’re Two Years Ahead of Everyone Else’ in Remote Managed Services
Chromis Fiberoptics Targets Resi Market with Plastic Optical Fiber
Product Briefs: MQA Live; Roon Labs Automation; Dirac 2nd Gen VR; C4 Training
Audeze and Waves Partnership Creates Improved 3D Headphone Listening Experience
View more News
Take Our Latest QuizzesDo You Know the Origin of These Brand Names? Take the Quiz
So You Think You Know Smart Lights? How about a Dimesimeter?
Cover Your AAS: 4 Questions to Reveal if You’re Ready for an As-a-Service Model
Test Your CES Knowledge! Take This Short Quiz
Who Buys Smart Home Tech? Test Your Knowledge of the Home-Tech Market