Need help/advice with touchscreen graphics

mrholder

macrumors regular
Original poster
Jan 3, 2009
146
6
I've been tasked with designing a touchscreen for an electronic device and I'm doing a majority of the layout in Adobe Illustrator CS6.

The specs that I've been given are:
Live area: 5.5"W x 3.13"H (buttons must stay within this range)
Resolution: 732px x 444px
Pixel pitch is 132ppi on horizontal axis and 142ppi on vertical axis (averages to 137 ppi).

My question is what resolution do I need to export my vector button graphics at to look the best in these specs and not require any resizing by the coders?
I can export each button as a png. Is that the best? If so, what resolution (137ppi)?
 

ezekielrage_99

macrumors 68040
Oct 12, 2005
3,336
16
Honestly I wouldn't be using Illustrator for the type of job you're doing, it's rubbish for design at multi-screen densities and has that colour shift issue...

I'd suggest Sketch and using this resource for calculating densities. Sketch will allow you to design for 100% then as exports letting you render out at all the different DPIs.
 

lucidmedia

macrumors 6502a
Oct 13, 2008
702
37
Wellington, New Zealand
Honestly I wouldn't be using Illustrator for the type of job you're doing, it's rubbish for design at multi-screen densities and has that colour shift issue...

I'd suggest Sketch and using this resource for calculating densities. Sketch will allow you to design for 100% then as exports letting you render out at all the different DPIs.
Agreed. Illustrator is not the right tool here. In a pinch you can use photoshop, but Sketch is currently the best way to map vectors to a specific pixel density.

You need to have a conversation with the engineers regarding delivery formats. Depending on how close the touchscreen runs to the hardware, you will have different requirements for assets. Encoding and decoding assets takes up some of the limited ram (in embedded systems) so they will be looking to keep assets lightweight and in non-compressed formats.

Another question you may want to ask is about refresh and redraw rates. Many embedded touchscreens have a slow redraw, which can seriously affect user experience.
 

dwig

macrumors 6502a
Jan 4, 2015
650
238
Key West FL
...
Pixel pitch is 132ppi on horizontal axis and 142ppi on vertical axis (averages to 137 ppi).

My question is what resolution do I need to export my vector button graphics at to look the best in these specs ...
You will not be able to generate images that will display undistorted it you use any tool that is not capable of outputting files with non-square pixels. You guess of 137ppi as an average is good, but will result in images that are slightly (~10%) wider and less tall than designed.

Personally, I would design in Illustrator or whatever (AI has no color issues in the hands of a skilled user who understands color spaces and color management), export at an overly high resolution (300-600ppi) as an uncompressed TIFF, open the TIFF in Photoshop and apply a compensating distortion (stretched vertically), and then downsample to 137ppi and export.
 

960design

macrumors 68030
Apr 17, 2012
2,820
831
Destin, FL
I've been tasked with designing a touchscreen for an electronic device and I'm doing a majority of the layout in Adobe Illustrator CS6.

The specs that I've been given are:
Live area: 5.5"W x 3.13"H (buttons must stay within this range)
Resolution: 732px x 444px
Pixel pitch is 132ppi on horizontal axis and 142ppi on vertical axis (averages to 137 ppi).

My question is what resolution do I need to export my vector button graphics at to look the best in these specs and not require any resizing by the coders?
I can export each button as a png. Is that the best? If so, what resolution (137ppi)?
You can use anything you like to create the mockup. We (developers) don't use images for interactive elements, we write code to facilitate the multitude of devices / resolutions.

I use Sketch for mockups.
 

lucidmedia

macrumors 6502a
Oct 13, 2008
702
37
Wellington, New Zealand
You can use anything you like to create the mockup. We (developers) don't use images for interactive elements, we write code to facilitate the multitude of devices / resolutions.

I use Sketch for mockups.
960 brings up a good point. How are your graphics being driven? If this is a web back-end then the answer above is correct. If you are working with embedded hardware your touchscreen will most likely be pushing around compressed bitmap graphics.
 

FCM

macrumors newbie
Feb 19, 2015
2
0
Touch Screen??

On kind of this same subject I'm looking for large touch screen monitors capable of working with Mac OS X 10.9.5 or other mac operating systems.

I typically work with Adobe acrobat Pro software for marking up construction drawings in PDF format.

Anyone know of any touch screen monitors in the size range of 36" to 46" that could work?

FCM
 

lucidmedia

macrumors 6502a
Oct 13, 2008
702
37
Wellington, New Zealand
On kind of this same subject I'm looking for large touch screen monitors capable of working with Mac OS X 10.9.5 or other mac operating systems.

I typically work with Adobe acrobat Pro software for marking up construction drawings in PDF format.

Anyone know of any touch screen monitors in the size range of 36" to 46" that could work?

FCM
Take a look at PQ Labs. They have both large-screen multi-touch surfaces and overlays for standard size HDTVs. http://multitouch.com