Need help/advice with touchscreen graphics

[mrholder]

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]

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]

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.

 

[mrholder]

Thanks for the advice all. I will check out Sketch.

 

[dwig]

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

 

[mrholder]

Thanks for the input. I will give that a try.

 

[960design]

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]

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]

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

 

[rosario1990]

After setting resolution how is looking? If it looks quite comfortable and shinny then I think your setting resolution is okey.

 

[lucidmedia]

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