Need help/advice with touchscreen graphics

Discussion in 'Design and Graphics' started by mrholder, Jan 22, 2015.

  1. mrholder macrumors regular

    Joined:
    Jan 3, 2009
    #1
    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)?
     
  2. ezekielrage_99 macrumors 68040

    ezekielrage_99

    Joined:
    Oct 12, 2005
    #2
    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.
     
  3. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #3
    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.
     
  4. mrholder thread starter macrumors regular

    Joined:
    Jan 3, 2009
    #4
    Thanks for the advice all. I will check out Sketch.
     
  5. dwig macrumors 6502

    Joined:
    Jan 4, 2015
    Location:
    Key West FL
    #5
    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.
     
  6. mrholder thread starter macrumors regular

    Joined:
    Jan 3, 2009
    #6
    Thanks for the input. I will give that a try.
     
  7. 960design macrumors 68020

    Joined:
    Apr 17, 2012
    Location:
    Destin, FL
    #7
    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.
     
  8. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #8
    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.
     
  9. FCM macrumors newbie

    Joined:
    Feb 19, 2015
    #9
    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
     
  10. rosario1990 macrumors regular

    Joined:
    Feb 1, 2015
    Location:
    Dhaka, Bangladesh
    #10
    After setting resolution how is looking? If it looks quite comfortable and shinny then I think your setting resolution is okey.
     
  11. lucidmedia macrumors 6502a

    Joined:
    Oct 13, 2008
    Location:
    Wellington, New Zealand
    #11
    Take a look at PQ Labs. They have both large-screen multi-touch surfaces and overlays for standard size HDTVs. http://multitouch.com
     

Share This Page