Photoshop Action for Windows Phone 7 Dithering

image

Here’s a Photoshop Action (i.e. a script) that I made to pre-dither an image so that it renders nicely on a display with 16-bit color (like Windows Phone 7).

A quick warning before you download it: the first thing this script will do is flatten your image (e.g. merge all layers into one). So don’t do this on your source. It’s pretty destructive.

How to Install and Use It

It’s super easy. There are 5 steps but these are pretty detailed. It will feel like it’s about three. So here’s the step by step:

  1. Install the action by downloading the file and double clicking on it.
  2. Open the Actions palette in Photoshop. Do that by pressing Alt-F9 (or choosing Window > Actions).
  3. Expand the WP7 folder (I think it’s technically called a set) in the list of actions in the Action palette and choose the WP7 Dithering action. With that selected, run the action by clicking on the Play arrow at the bottom of the Actions palette. Again, don’t do this on a source file. It’s going to flatten your layers!
  4. It should prompt you about flattening your image. You need to say yes (unless you’ve already flattened it).
  5. At the end, you’ll get prompted about how to merge the RGB layers it created. I’ll explain more about this in a bit, but for now choose:
    • RGB Color in the Merge Channels prompt (this is not the default)
    • In the Merge RGB Channels match the file with _R to Red, _G to Green, etc.

That’s it! Now you can export the image as jpeg or png and it should render nicely on the phone.

Why You Need This

A lot of handheld devices are capable of showing fewer colors than regular computer displays. The result is that an image that looks nice on your computer might look weird on a device like your phone. This is especially true with gradients or other smooth color transitions. You end with a lot of “banding”—the gradient looks like it has bands of color instead of smooth transitions between colors.

This action “pre-dithers” images. It basically reduces the colors that are used in the image ahead of time and uses a noise pattern to “dither” to make it look like the colors change more gradually.

In fairness, I’ve only tried this on a few images but, so far, with good results. Please let me know if it works for you (or, more importantly, if it doesn’t). I’m super open to improvements too. I’m no Photoshop wiz kid so I might be doing something inefficiently or, you know, stupid.

12 Comments

Dan / DEC 07 2010

This didn’t work for me. I didn’t run the script as is since I have Photoshop CS2, which doesn’t support split/merge channel command.

The tutorial/guide I used is this (which seems to be the same in spirit to your action script): http://notlost.blogspot.com/2008/08/dithering-for-low-bit-depth-lcds-with.html

I still get noticable banding. Any idea what I might be missing?

(As per comment above – I’m using a SuperAMOLED screen…. could this be the reason?)

Thanks.

Gus / DEC 13 2010

Thanks for posting. Very helpful indeed. Made the gradient heavy images I was using look great on a Samsung Focus.

Håkan Reis / FEB 17 2011

As some have noticed this a real issue especially on AMOLED screens (like the Samsung Omnia 7/Focus). The few images I tried it with really did improve a lot, to the point that it became usable

Experience10 » 解决WP7渐变色深问题 / APR 07 2011

[...] 真正解决渐变的问题,需要在Photoshop中对图片进行Dithering操作。具体的操作步骤见这里,但是不必要这么麻烦,我们可以下载这个已经做好的Photoshop Action动作文件,在输出前对渐变图片进行一次预处理,再置入到项目中输出,实际模拟器中的效果如下,手机上也经过测试没有问题: [...]

Eric / JUL 09 2011

great with jpg image but It does not work with transparent PNG

Gautam Krishnan / JAN 28 2012

Thank you, it was very helpful. I’ll finish my app and keep you posted of how effectively I used your technique! :)

Benjamin Wesch / FEB 23 2012

Very helpful indeed – thanks a lot!

Hamed Al-Hinai / APR 19 2012

Thanx …. coool and very useful >