4

The question might not seem to be clear but i could not get a better name for the behavior of the background that happens. There is a background image that i am setting to my layout, there are various resolutions of the same background put in the appropriate drawable folders also. But when the same image is seen on an emulator there are no issues, though when the application is deployed on a device, the background appears as under:

enter image description here

The image seems to have abnormal lines here and there. It happens for every image that is already in the form of gaussian blur or even those that i would blurred my self.

The same has been tested on different devices with better resolutions (The images are quite large too), but the same effect is seen. Can something be done to the images or is there any way this can be prevented ?

Question: I am messing up with the image when i apply the gaussian blur. I have feelings that some information gets lost when i try to save the image :(.

P.S: I have googled for a solution to this, but i could not get the correct terms may be to arrive at a solution. I have also used an image with a huge resolution say 2100 * 1024 and if i dont blur it using photoshop the image appears well, but if i apply the gaussian blur filter the same happens like the image below.

Software: Photoshop cs4 currently.

I have posted this on StackOverflow but since i do not really know to which site it belongs to, i am posting it here too. If it is not relevant for this section, you could get back and i will close it :)

Thanks.

4

What I see in the image, which I think is what you're asking about, is some posterization. Whenever you deploy very smooth gradients you can run into this issue if the display doesn't have the bit-depth or color gamut to render the gradients smoothly. Ironically, perhaps, blur not only doesn't help, it can make the situation worse.

Working in Photoshop on a good quality monitor the problem doesn't show up, but when it gets onto a lower class of display you have an issue.

The remedy is to add some noise in the original. This dithers the colors and removes those hard edges. About 2-4% is usually enough, but you may have to experiment a bit. Filter > Noise > Add Noise is your starting point. Gaussian noise may work better at low percentages. Leave the Monochrome checkbox blank.

One more point: don't save the image in an indexed color format like 8-bit png or as a gif. That will cause banding such as you're seeing, even with dither. Jpeg is what you need here, to conserve both appearance and bandwidth.

  • Thanks a lot for your answer. Do you mind explaining it to me a little more about how to add the noise?? I mean is it correct if i go to filter and then add noise?? I am new to photoshop. Also, i have to add noise first and then apply gaussian filter correct sir? – Rat-a-tat-a-tat Ratatouille Mar 28 '14 at 5:50
  • Don't use blur, but if you do, add the noise after. I was expanding the answer as you were commenting, and I think you've all the information you need. – Alan Gilbertson Mar 28 '14 at 5:51
  • thanks alot for the detailed answer :) +1. I will go home and try this and accept the answer :)).. else ofcourse i will get back with more questions :) and the results. – Rat-a-tat-a-tat Ratatouille Mar 28 '14 at 5:55
  • Sure thing. Good luck! – Alan Gilbertson Mar 28 '14 at 5:57
  • 1
    An 8-bit png can't display enough colors to avoid banding (that's the term you're asking about), and a 24-bit png would be too heavy for a web application. Save a jpeg at high compression for best results. – Alan Gilbertson Mar 28 '14 at 6:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.