Optimizing Graphics for 16-Bit Touchscreens

Designing a touchscreen interface can take a lot of time and hard work. Then you put it on the touchscreen and the colors shift and band. Yuck. Shifting is where the color on the touchscreen is different from the intended color. Banding is where you see abrupt changes between shades of the same color instead of a nice smooth transition. Fortunately, with a little knowhow these problems can be overcome. But first, let’s get to know what’s causing them.

A 16-bit touchscreen is capable of displaying 65,536 colors. That’s a lot of colors. The trouble is that you don’t get to choose them. They’re chosen for you by combining 32 shades of red, 64 shades of green, and 32 shades of blue (32 x 64 x 32 = 65,536). It’s the combination of red, green, and blue values that determines each color. Your design may have up to 256 shades of red, 256 shades of green, and 256 shades of blue. That adds up to more than 16.7 million colors, most of which simply can’t be reproduced on a 16-bit touchscreen. The display is forced to round every color to the nearest supported color, leaving large gaps, or bands, between them.

RGB Banding

What can we do about it? Well, a few things.

Did you notice that our 16-bit touchscreen supports twice as many shades of green than it does red or blue? That’s done on purpose to compensate for the human eye being more sensitive to the color green. You can use these extra shades to your advantage by incorporating more green in your design. Throw a hint of green in your drop shadows, background image, or other large areas of gradient color. It won’t get rid of the banding, but it will improve it.

Green

To completely eliminate banding, avoid smooth transitions between shades of the same color, especially in larger areas. Banding culprits include gradients, shadows, and images with a lot of flowing colors (like a sky or sunset). While some color shifting will still occur, color banding is much more of a nuisance. By excluding smooth transitions, your design will be represented more accurately by the touchscreen.

You can preview color shift and banding in Photoshop in just a few steps. You can’t undo this, so make sure you save your original design before continuing. Flatten your image (Layer > Flatten Image) and choose Split Channels (from the Channels palette menu). This creates 3 grayscale images representing the red, green, and blue values independently. For each one, convert the mode to RGB (Image > Mode > RGB Color), then to indexed (Image > Mode > Indexed Color). In the Indexed Color dialog box, load the appropriate custom palette (download custom palettes; use 5-bit grayscale for red and blue; use 6-bit grayscale for green) and select OK to complete. Now convert the image back to grayscale (Image > Mode > Grayscale). Once you’ve done this with all three grayscale images, choose Merge Channels (from the Channels palette menu). The resulting image will be an accurate representation of how your design will be rendered on the touchscreen.

Split Channels

Your background image is probably suffering from the most banding. We can dither the worst offenders for optimal results. Simply isolate the background image and repeat the previewing process as described above. This time however, also select 100% diffusion dithering from the Indexed Color dialog box in each grayscale image. The merged result is free of banding and comprised only of supported colors.

Diffusion Dithering

As long as you understand how color works on a particular display, you can adjust the channel splitting technique to work on touchscreens of any color depth. Just use the appropriate palette when indexing each color.

23
Comments
  1. Very nicely done sir. I will add this to my collection of (add reverb here) “techniques learned from Morgan that will one day allow me to dominate the template design universe!”

    Oh, and I’ll also “re-tweet” it. 🙂

    –Aaron

  2. @Aaron. I’m glad you like it. I’ll have another candidate for your collection next week 🙂

  3. Hi,
    Great piece of information. I love the effort being done here..

    Cheers !!

    -Nachie

  4. Thank you Morgan, I’ve been waiting for this topic to come up. I really appreciate the howto on previewing your design in Photoshop to view the banding before loading it up on the panel, this will save me a lot of time!

  5. @Nachie. Thanks.
    @Casey. That’s great! Let me know if there are any other topics you’d like addressed.

  6. Thanks again for this insight. The world of touchpanel UI is relatively new ground. It helps to have an advocate helping the industry catch on to best practices. Keep at it!

  7. @Jack. Thanks. I’m just wrapping up a few projects and then I will certainly get back to keeping at it.

  8. Hi Morgan,

    I was excited to find this article and tutorial about color shifting and banding. I have tried your technique for testing but the image always looks the same as before I started.
    I sent my customer a batch of images to test on the actual device I am designing for and he reported banding in the large areas so I was hoping to some how emulate the problem locally in PS. Any ideas you have to accomplish this would be greatly appreciated.

    Thanks for your article.

    Mark

  9. @mark. Can you email me the image to test? Also, do you know the color specs of the device and how it’s being driven?

  10. I am waiting for the color specs. What email address should I send the image to.

    Thanks,
    Mark

  11. @mark. I sent you an email to provide you with my contact info.

  12. I can’t get CS3 to merge the greyscale images back again for some reason. I’ve tried everything I can think of but the merge option is grayed out. Any ideas?

    FYI there’s also a free Photoshop filter from Telegraphics that makes the whole ordeal a simple one step process http://www.telegraphics.com.au/sw/ – look for the 5_6_5 filter.

  13. @Bryn. Make sure you convert them all back to grayscale mode as a final step prior to merging. Thanks for the tip on the filter too. I will test it to see how well it works on the different panels.

    Update: The filter’s dithering doesn’t look as good as Photoshop’s dithering to me. I’d still recommend the manual technique for something like a background image.

  14. I got it, I had the palette set to exact and the custom palette loaded under “forced”. When I went from indexed to greyscale it was unlocking the background making photoshop think the image wasn’t flattened thus not letting me choose the “merge” option. Once I had the palette loaded in the correct place it worked as shown.

  15. Well, I tried the telegraphics filter and the 100% diffusion dithering method and the telegraphics actually looks a little better on the 3X. In the custom pallets there’s two different versions for RTI and Crestron, why? Are the gray values somehow different? Is there more to it than evenly distributed levels of gray from 0% to 100%?

  16. @Bryn. That’s interesting about the 3X. Will have to run more tests.

    Many LCD panels are actually 18-bits, so 6-bits have to be sent for each color. Red and Blue, having only 5-bits, need a 6th. This bit is simply added to the end as always high (1), always low (0), tied to the most significant bit (MSB), or tied to the least significant bit (LSB). So a 5-bit value of 00001 could become 000011, 000010, 000010, or 000011 respectfully. The difference, especially between MSB and LSB methods, becomes more apparent as you go up the binary chain. You can see the effect rather clearly in Photoshop by creating a red gradient and applying the various palettes.

  17. I’ve used this technique successfully several times. However my latest design does not work too well. I’m designing for a TPS-6L and I started with the TPS-6 template I downloaded from here. The design is mostly solid colors with some subtle gradients. After I go through this process I see banding in PSD just as I do on the panel so I know the process works. I guess my question is, is there a color setting for my file that I start with that I should use in the first place that may help the design be more compatible?

  18. @Mark. The color settings won’t affect the banding, though unless you’re doing print work, or otherwise have proper color profiles available, I recommend turning color management off by using the Monitor Color preset in color settings, setting View > Proof Setup to Monitor RBG, and unchecking Convert to sRGB when you save for web and devices. This solves a few other problems, outside the scope of a comment, that web and device designers often struggle with.

    The cause of your banding is the subtle gradient. 16-bit displays, because of the way they are driven, simply have gaps in the shades they can reproduce. The only workarounds are to make the gradients less subtle, have them span shorter distances, and to add more G (green) to their colors.

  19. Morgan,

    Great article. We have a 7″ display that runs at 16bit and the banding with images was horrible. Doing this helped clean up the interface quite nicely. One note, when going through the steps, the resulting png generated from Photoshop was almost twice the size of the original 32bit image. Even playing with pngcrush and optipng would only bring back about 10%.

    As a result, I tried doing this with Imagemagick convert. The results we near identical to the Photoshop approach but the resulting size was much smaller, just a little larger than the original.

    To do it with Imagemagick, I had to create 2 gif images that were composes solely of the colors in the 5 and 6 bit palettes. What is particularly nice is that this only takes a second or two to run on an image and could be incorporated into other languages/tools.

    Here is the resulting command:

    convert <srcname> ( -clone 0 -channel R -separate -remap 5bit-generic.gif ) ( -clone 0 -channel G -separate -remap 6bit-generic.gif ) ( -clone 0 -channel B -separate -remap 5bit-generic.gif ) -delete 0 +channel -combine <destname.png>

    One note: My test image was a strong gradient with some varying sized icons in it for contrast. I haven’t tried it with more complicated images like photos, etc. so your mileage may vary.

    Hope someone finds this useful.

    Regards,
    Bill

  20. Morgan,

    I played with this technique some more and found an issue. If the image (like an icon) has an alpha layer, the split/recombine technique doesn’t work as described (with Photoshop or Imagemagick).

    I’m sure there is a workaround for Photoshop, but I couldn’t figure it out. The workaround for Imagemagick is to run the two convert lines below after the convert line in the previous post.

    convert <srcname> -alpha extract alpha.png
    convert <destname.png> alpha.png +matte -compose CopyOpacity -composite <destname.png>

    Basically, this creates an alpha mask of the orginal and applies it to the 16 bit friendly image. Of course if you have a large section of the image that is partially transparent, then you may end up with strange results. But for icons that are simply antialiased around the edge, this seems to work quite well.

    Regards,
    Bill

  21. @Bill. Thank you. I’m looking forward to playing around with this.

  22. Do you have any idea how to improve the gradient on windows phone 7?

    Thanks,
    Fadi

  23. @Bill, great thanks so much for the ImageMagick tip!! I was curious what your “5bit-generic.gif” looked like? Thanks again.

Leave a Comment

You must be logged in to post a comment.