Here is what’s covered:
In his tutorial, Chris creates a main menu interface for a fictional iPhone game. He goes through setting up Photoshop to accurately display target screen size, sets up a wire frame for the project, creates a background, makes a logo, designs rock texture for the sidebar and wood texture for the saved games-box and buttons. Finally, he adds greenery for detail and good measure. See the full tutorial here.

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

58 Symbols

By Guifx

Based on Guifx v2 Transports, this TrueType font (TTF) has labeled icons which improves usability. A keyboard map of all symbols is included.

Download:

Two of my favorite gadgets are my iPhone and my TiVo Series3. DVR Remote [App Store Link], by Stutsman Software, is an iPhone app that controls compatible TiVo boxes over your wireless network using telnet commands that were originally written to support control systems like Crestron and AMX.

While DVR Remote won’t replace your regular remote, I find it useful when I step away. My remote just isn’t something I’d grab on my way off the couch — especially since it’s a tabletop touchscreen. But my iPhone is always on me. So now when I get up to grab the popcorn out of the microwave, I don’t have to surrender my ability to pause and fast-forward.

Last month, Stutsman Software released DVR Remote 2, which introduced support for skinning the app. Being that I’m in the touchscreen interface design business, you know what immediately came to my mind: The Guifx skin was born.

To install the Guifx skin, simply press the [ + ] button on the DVR Remote skins screen and enter the following url: tinyurl.com/guifxskin

And when you do, let us know what you think in the comments below.

Special Note: I’d like to thank Derek Stutsman of Stutsman Software for promptly incorporating our request to add active states to DVR Remote’s skinning capabilities. Since the Guifx skin was the first to include active states, there was a minor bug that went unnoticed by the DVR Remote development team that will be fixed in DVR Remote 2.0.2. In the meantime, our down button incorrectly shows the up button’s active state when pressed. Just think of it as a temporary conversation piece.

On November 11, 1996, one day before the official announcement, Landmark Entertainment Group artists finished painting interior and exterior renderings — beauty shots — of the proposed first Apple Cafe in its Los Angeles location. Small sections and tiny black and white copies of these renderings can be found online and in the book “Apple Confidential 2.0” (page 272). The actual paintings, though, which are in my personal collection, are breathtaking — and I’d like to share them with you as best I can.

(© Landmark Entertainment Group. All rights reserved.)

Sadly, Apple was in poor financial shape in 1996, and the licensee pulled out before that first Apple Cafe was opened. But the Apple Cafe still lives on for us in these fascinating images.

Installing a touchscreen microwave is a great way to enhance and modernize the appearance of any kitchen. But it’s not all about a pretty face. There’s something playful about the intuitive navigation of a touchscreen … and that improves the user experience.

Conventional microwave keypads are often cluttered and confusing. A well-designed touchscreen interface can reduce the confusion by showing the user a limited set of available functions specific to their goal. The ability of the interface to be dynamic also allows for easy personalization far beyond what’s possible with traditional microwave controls.

At the end of the day, a touchscreen makes microwaving faster, easier, and even fun. And that’s good for your business.

3 Icons

by Guifx

The perfect compliment to our PS3 wallpapers. Three Hi-Res Playstation 3 icons. Contains the Playstation logo, controller and PS3 console.

Download:

2 Wallpapers

by Guifx

Great companions to our PS3 icons these backgrounds will give your screen the same look as the beloved PS3’s XMB interface!

Download: