A while ago I posted a Photoshop color swatch with the accent colors of Windows Phone 7. I’m currently working on the design of a few apps that will be released for Windows Phone 8 too. So I created a new set of colors.
You can download the set here: WindowsPhone8Accent.
Sometimes images look nice on a regular computer screen, but when used in your Windows Phone application they become ugly. This effect is most often seen on gradients and images with smooth coloring. In gradient images you’ll start to see stripes and bands. It looks like the colors in the image don’t blend anymore.
Below are the 32bit and 16bit versions of the same images. Notice the banding on the right one.
This problem may be caused by a setting in your application or just by screen of the phone itself. It occurs when a 32bit image is shown on a 16bit screen. Because there are way more shades of colors available in 32bit images than in 16bit images, you’ll start to see these artifacts when the depth doesn’t match the screen.
The solution is relatively simple. Just scramble the pixels a bit to make the colors look like they blend. This process is called dithering. Maybe you’ll remember, back in the days with Windows 3.11, you often saw ‘gradients’ in images with only two colors. Starting with 1 color and along the image there appeared more and more pixels of a different color.
Here’s another example of dithering. When you have only 256 colors available for a gradient, you’ll have to do something like this to blend from color to color.
Below is the dithering effect used on a 16bit image. On the left is the original 32bit image. The middle image is the plain 16bit version, with banding. The one on the right one dithering applied to it.
How to fix
The best way to fix this problem is to make sure your images look right. Don’t depend on the phones to fix the problem for you. I personally do not want to take the risk of any of my images looking ugly on someone’s phone. When the artwork is crap the app is probably too. Always make sure you walk the extra mile to make your apps look perfect. If a similar app looks better, people use that one instead of yours!
After downloading and installing I’ve opened a splash screen for my app in Paint.NET. The image uses a lot of smooth transitions between colors and will look bad on some phones.
Next, go to Effects –> Photo in the menu and select Simulate Color Depth…
I’ve you did not get the earlier part about the dithering and the different bit depths, I suggest you play a little with the settings to see what’s effect of the different bit depth settings. And turn Dither on and off a couple of times to see the magic happening.
I personally use the Bayer Ordered 8×8 method on all my images. But you’ll free to use an other one if you like.
Hit Ok and you’re done.
If you are using Photoshop for your imagery, you can find an action to apply dithering to your images over at Robby Ingebretsen’s blog.
Unfortunately not everyone is dithering their images, which results in bad looking apps. As you’ve seen it’s pretty simple to resolve. I hope to never see banding and ugly artifacts in applications anymore.