10 Awesome Resources & Tools for Touchscreen Design

GUI developer Aaron Craig of NTDesigns shares great online tools, tutorials, and tips for beginner and expert interface designers offers tutorials, free graphics and other goodies for GUI designers
Aaron Craig · March 11, 2010

Whether you are a self-taught beginner in the field of interface design, or you’re a veteran touchscreen designer, these 10 tools, tutorials and tips can improve your graphics skills.

1. Audio Player Photoshop Tutorial
PSD Tuts Plus is a fantastic blog that regularly features articles and tutorials that are useful to interface designers. This post shows how to create a “handheld” style audio player in Photoshop and illustrates several techniques that could be used to create touchscreen elements such as buttons and sliders.

2. Software Training
I don’t think I could put a value on the skills I have gained from using this website. It contains an enormous library of high-quality training videos from professional instructors who are highly respected experts in their fields. Learn anything from Adobe Photoshop to Javascript to the latest Mac and Windows operating systems. It is a paid service, but membership is very reasonable and there are plenty of free videos to evaluate.

3. iPhone Screenshot Trick
With the popularity of the iPhone and it’s slick interface, it is often useful to capture the current image on your iPhone’s screen. Press the “home” button while holding down the “power” button and voila, you now have a pixel for pixel screenshot in your photo library. This is especially useful when you want the buttons in your iPhone layouts to be the same size as the standard iPhone elements.

4. PX Calc Screen PPI Calculator
Make sure your buttons are properly sized! Figure out the PPI (pixels-per-inch) for your computer screen or any touchscreen device. This tool is provided by Guifx and there is a link to a great blog entry that explains how and why PPI is a very important spec to be aware of when you’re designing touchscreens.

5. Must-have Firefox Add-ons
The most common place to find design inspiration is undoubtedly the internet. These three, great Firefox add-ons allow you to capture images and pertinent data directly from your browser window! MeasureIt will get the dimensions of an area on the screen, ColorZilla can capture all kinds of useful color data for use in other applications and Screengrab takes a screenshot of a user-defined area of the screen. offers tutorials, free graphics and other goodies for GUI designers" />
  About the Author

Aaron Craig is principal of NTDesigns, which has served the Crestron integrator and independent programmer community since 2005. NTDesigns provides a host of services such as graphics for standalone, handheld remote controls and company logos. Visit or follow @NTDesigner on Twitter for more graphics tips and tricks. Have a suggestion or a topic you want to read more about? Email at

Follow on social media:

also participates in these groups:
LinkedIn · Google+

View Aaron Craig's complete profile.

  Article Topics

News · Aaron Craig · Design · GUI · All Topics
CE Pro Magazine

Read More Articles Like This… With A Free Subscription

CE Pro magazine is the resource you need to keep up-to-date on the latest products, techniques, designs and business practices. Subscribe today!

Subscribe Today!