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