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.

Download our Photoshop templates for Crestron, AMX, RTI, and Universal Remote Control touchscreens with the resolution and dpi already set for you. We’ll add to this collection upon request.

© 2009 Morgan Strauss

Add a Comment   |   July 1st, 2009 (8:00am)   |   Uiology   |   Posted by Morgan

1. Dan  |   July 2nd, 2009 at 9:08 am  

   Ok, I know I work here and everything, but I just have to say… this article is awesome!! Great job Morgan!

2. Tan  |   July 3rd, 2009 at 3:07 pm  

   Wow this is great! Awesome Awesome. Thank you.
   Can’t wait to try it.

3. JJ Adkisson  |   July 4th, 2009 at 4:31 pm  

   umm.. thats great but how do you do it in windows…

4. Morgan  |   July 4th, 2009 at 4:50 pm  

   @JJ. The process itself isn’t platform dependent. The preferences on Windows however, I believe are in the Edit menu. Feel free to give me a shout if you want a walkthrough or some additional information. I’m happy to help in any way I can.

5. Nicolas  |   July 6th, 2009 at 8:09 am  

   Hi there, I followed your tutorial but when I click “print size” on my iPhone Template photoshop scales the image to 54.63% and it gets small, that’s not what an iPhone user would see in reality… I’m using a 22 inch screen 1680×1050 resolution, that made my DPI: 90.05 , here’s a screenshot of what I’m experiencing after clicking “Print Size”

   http://img297.imageshack.us/i/picture1aos.png/

   Thanks for the tutorial.

   _NG

6. Morgan  |   July 6th, 2009 at 8:24 am  

   @Nicolas. That looks correct. The iPhone is a pretty small screen. Use a business card to confirm the scale. The iPhone display’s width (1.94″) is a hair shy of the short side of a standard business card (2″). You can also right-click Photoshop’s ruler, select inches, and confirm the scale with that.

7. Andy Gongea  |   July 27th, 2009 at 10:49 am  

   I don’t know how I got here, I think I’m one of those who actually click on sidebar ads. Anyway, I’m glad I did it. Great value here in the blog and also showcase of great designs.

   Cheers and keep up the excellent work.

8. mdelzer  |   September 11th, 2009 at 3:51 pm  

   I gotta agree with Nicolas. I can’t get this to work with my setup, trying both my 22 inch 1680×1050 monitor and my 15.4 inch 1680×1050 laptop display. I set the preference per the calculator both times and both give me a dimension that is way too small for it to be actual size. For example on my laptop I opened your TPS-6 template and selected Print Size and the diagonal is less than the width of a 2 inch business card. The TPS-6 is a 5.7 inch diagonal display. Thoughts?

9. Morgan  |   September 11th, 2009 at 6:31 pm  

   @mdelzer. Feel free to give me a call and we can walk through it. Our toll-free number is listed at the top of the page.

10. mdelzer  |   September 11th, 2009 at 11:16 pm  

    @Morgan. I figured out, thanks for offering further support, now perhaps you can tell me why? Basically if I go to the View menu and select Print Size the zoom goes way too small making the image about half actual size. But if I select the zoom tool and pick Print Size from the tool bar options for the Zoom tool it works. Thoughts or is this a potential bug? I’m using CS (8.0).

11. Morgan  |   September 11th, 2009 at 11:48 pm  

    @mdelzer. That is interesting. You may have found a bug. On my display the difference between View > Print Size and Zoom-Tool > Print Size is very slight — almost immeasurable — but I was once an engineer and fortunately have the proper measuring instruments on hand. The results? The Zoom-Tool > Print Size is, in fact, more accurate. I have no idea (yet) why this would be. Adobe docs ( http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WSfd1234e1c4b69f30ea53e41001031ab64-7935.html ) clearly show that these two commands are identical.

12. harvested  |   November 5th, 2009 at 11:21 am  

    @mdelzer
    hey, I have the same problem, but unfortunatly your solution doesn’t work for me… I don’t know why.. the zoom tool’s print size and the view menu print size ar almost the same, but they are have the way they should be… I’m using CS 4 (v11)
    do you guys know what’s wrong??
    thanks

13. Anand  |   December 22nd, 2009 at 8:29 am  

    Morgan,
    I was searching for something like this desperately. This is very useful. Thanks.

    -Anand

14. hehe  |   January 16th, 2010 at 1:12 pm  

    hello! could uz give me some instructions how to build up a touchscreen? i know that u can design it in photoshop, but how the structure should look? how do i make the buttons etc? where could i finde any usefull documentation about touchscreen design?
    thank u

15. Kevin Cannon  |   February 18th, 2010 at 3:58 am  

    Nice tip.

    One problem I have with this is that it throws off point sizes for text. Do you have any recommendation of what to do?