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.

Units & Rulers...
Screen Resolution

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.)

New File

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.

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

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

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

  4. @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. 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. @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. 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. 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. @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. @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. @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. @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. Morgan,
    I was searching for something like this desperately. This is very useful. Thanks.

    -Anand

  14. 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. 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?

  16. seems it doesnt also works for me. After Print Size button sclaed image is much smaller than realistic iPhone screen size 🙁

  17. If you’re not getting the expected results, please contact me directly to walk through it. I’m eager to discover the issue.

  18. I figure it out! Checked with my iPhone and real life ruler 😛

    First, iPhone DPI is not 164,83 (like set in template downloaded wrom this post) but as documentation says 163 (http://www.apple.com/iphone/specs.html)

    Second, I have 13.3″ laptop, but this is what Apple says. I used my ruler and real visible diagonal is about 13.1″.

    After setting up with REAL values everything works like a charm!!!!

    P.S. Take a ruler. Turn on PS rulers (Viev->Rulers). Press Viev->Print Size and check PS rulers with your real life ruler. Metrics should be IDENTICAL !!! If not, you have fucked up DPI configuration.

  19. @Morgan, please update the templates. iPhone template is corrupted, should be 163dpi. Dont know if others are correct.

  20. @neX. Glad you got it working 🙂

    For ease of process, we use the documented screen size and resolution to calculate DPI since most manufacturers don’t publish it. In the iPhone’s case, Apple rounded the diagonal screen size (presumably for marketing purposes) so the DPI is slightly off in our calculation, but that difference is small and barely noticeable.

    I will add a troubleshooting step to physically measure the display. I’ll also note that there seems to be an optical illusion that the iPhone screen is bigger than the Photoshop canvas even though a quick measurement proves they are nearly identical. The important thing is that your preview is very close to the physical size so you can properly test for usability.

  21. Great! I was wondering about this the other day. Too bad the Flash editor isn’t this simple.

  22. Cool blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your theme. Bless you

  23. for iPad data here is what I calculated:

    1024 X 768
    9.7 Diagonal
    131.96 DPI

    Source:
    http://www.pxcalc.com
    http://en.wikipedia.org/wiki/IPad

Leave a Comment

You must be logged in to post a comment.