Photoshop Action for Windows Phone 7 Dithering
![]()
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:
- Install the action by downloading the file and double clicking on it.
- Open the Actions palette in Photoshop. Do that by pressing Alt-F9 (or choosing Window > Actions).
- 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!
- It should prompt you about flattening your image. You need to say yes (unless you’ve already flattened it).
- 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
Derek Lakin / NOV 20 2010
Very useful, thanks. It’s also worth checking out your gradients on an AMOLED screen (if you can). There have been some noticable issues when compared to other devices: http://www.mobiletechworld.com/2010/11/17/the-problem-with-super-amoled-screens-nasty-color-banding/
Tweets that mention nerdplusart.com | Photoshop Action for Windows Phone 7 Dithering -- Topsy.com / NOV 20 2010
[...] This post was mentioned on Twitter by Derek Lakin, Marilyn Omen. Marilyn Omen said: Photoshop Action for Windows Phone 7 Dithering http://bit.ly/bsEeCC [...]
SamsungのSuper AMOLEDはグラデーション表示がおかしい - ななふぉ / NOV 21 2010
[...] nerdplusart は、この問題をディザリングで解決するための Photoshop [...]
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.
TWC9: VS2010 SP1 Beta, , Native Extensions for Silverlight, EF Code First | Website Under Construction / DEC 13 2010
[...] [watch] Robbie Ingebretsen – Photoshop script to dither images with gradients for Windows Phone 7 [...]
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 >