What's new
By:
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

Succesfully removing banding

  • Thread starter Thread starter Guest
  • Start date Start date

G

Guest

Guest
I get frustrated when I upload Photoshop's jpeg files to the internet to discover a lot of ?banding? in areas that contain a lot of gradients, like for example a large blue sky. This problem is still one that amazes me, because even if these files look ok in Photoshop or ACDsee, they still show banding when you look at them in a web-browser. This banding problem is not noticeable when the viewer of this webpage is using 32 bit colors. I wanted to find a solution where the same file can be viewed without too much loss in quality, independently if the user is using 16 or 32 bit colors.
Anyway, after reading some articles dealing with this problem it became clear that the best way to solve this problem was by adding some slight noise to the affected areas. Although my problems went away by using a small value of 1, I wasn?t satisfied with the visible noise that was introduced. What nobody really seemed to mention in all these articles, was the idea to add noise to a channel, an idea I was thinking about after reading an article about an old KPT 3 filter, called ?Hue Protected Noise?.
In my case I selecting the red channel of the blue sky and adding a noise value of 3 (yes, even 3 times higher than the original 1 for the RGB layer) really solved my problem. It's now very hard to notice any noise, even by pressing undo/redo a couple of times. The effects in the final jpeg are also really astonishing! I experimented with several other colored gradients in combination with different channels and I achieved very good results!


I have included two files to show you the difference.

REMARK! Look at these files with a 16 bit color setting for your graphics card.

You might need to refresh your web-page after you've done that.
 
wow that is great Gaussian....... for so long I have been crying out how to get rid of the banding without adjusting my video card looks to me like you found a way

I wouldn't have believed it if I hadn't seen it with my own two eyes

well done infact double and tripple well done! :righton: :righton: :righton:
sfm
 
Great thread Gauss, well done.

Make sure you also try applying the noise to the other channels as well. And try using both types of noise -- uniform & gaussian. See what happens to the image/photo in each case.

Good stuff. :righton:
 
Me too I appreciate it a lot. Just like most damage in an old photograph can usually be found in the blue channel...

Still, I don't like to manipulate the original material like that. Agreed that you win (less banding) but you also lose because you're stuck with noise everywhere, even where it is not necessary. I suppose that a selective mask, style edge mask must be good to ameliorate this technique.
Let's think about this and come up with a real super solution.

Problem: how can we make a selection/mask that allows us to apply noise only to the banding area's?[:I
 
Sorry, but I absolutely don't agree with you on this one Erik.
This gradient problem has frustrated me for a long time and every time I kept reading or hearing that adding noise is the only good way to go, except those suggestions focused on the RGB channel only and not on one or more particular color channels. Sometimes it?s better to work with an acceptable solution then to search a lifetime for that golden egg and I went on a very extensive search in the Photoshop community and never found anything that comes even close to that golden egg.
You have to understand Erik, this technique is focused on WEB graphics and a lot of web designers will be quite happy to get rid of banding even if noise is added, especially knowing that it?s almost impossible to notice, even by doing a continuous undo/redo of the effect in Photoshop.Also, the noise is never added and then saved in the original file, so the original always stays intact.
All the graphics shown on the internet are for viewing purposes only. Every original camera TIFF shot I make is always archived and never touched. I always do my retouching on duplicates. This banding problem is only visible in files viewed on the internet, never in the original. Even if I have a banding problem, it will only really show up if I use ?save for web? and look at the preview window.
I agree it?s always advisable to create a mask first and that?s what I forgot to mention in my first post. Banding is particular visible in large areas that contain gradients of the same color, so in general there will be more cases that it does work rather then that it?s unusable. Create for example a circular rainbow gradient in a 200*200 pixels square and then create the same square and fill it with a circular gradient going from white to any color. You won?t notice any banding in the first example, but you will in the second one, but not so much in the original file but rather in the web preview.
If everyone who browses the internet is using 32 bit color, then most of our banding problems would be history, but since that?s not the case, this seems to be good solution for this particular problem and until now I have found only one serious drawback; the file size increases, but I guess that's the general story with web graphics, it's give and take.
 
You are right, Gaussian. It was not my intention to minimise this method to get rid of banding, far from that. But I was not talking about CMYK here. In the link to Margulis' article I was, but only because Margulis himself and the whole article is about CMYK problems.

My idea about the mask is sheer creativity, nothing else. I only learn new things by attacking problems like this. That is one of the advantages of this modsquad thing Mark invented: I have to try to find solutions for problems I can't foresee, so I need to enlarge my knowledge every time.
OK, I did try to "kindle the fire" to get some other people brainstorming with me. But if no one is interested, I'll search for myself. The idea was, in fact, to use some kind of edge mask, like I also use for Unsharp Masking because there's no use to sharpen soft areas and losing hues when it's only the edges that need sharpening. I did not read that you were talking about gifs. I must have overread this. For the web there is indeed no problem as monitors are generally not calibrated and display colours in awful ways. (even monitors of so-called webdesigners.) Indeed, to get rid of banding here can be done by adding noise to a colour channel.
 
Good points guys, each of you.

But as for the "golden egg" thingy... perhaps give this idea a shot...

-> Create a large circle of white.
-> Fill it with noise. Then scale it down to a small size.
-> Select the circle, and Feather the selection by about 1/3 it's size. Invert the selection and Delete. This'll give you a soft edged noise dot.
-> Define it as a Pattern/Brush.
-> Use a softedged Airbrush to apply the noise only to the problem areas of the image/photo. If you have a pressure sensitive tablet even better. And this can also be tweaked further with PS 7 and the new brush engine capabilities.

See if that works for ya. ;)
 
From time to time you prove that you're a real good guru.:righton:
Can't get enough of that.

By the way: I just remembered that when we were still at onlinedesignschool we had a thread abouit banding, on which I experimented with gradients of less than 256 pixels wide to show that there was indeed banding because of limited pixels to display the gradient.

I'm off to my hard disk. One second...

I did dig up this image. Now for the thread...
 
hrmmm.... lookie lookie... is there an end to learning? i dont think so...

thanks for the tipos guys
 
Erik, if I take your 256 pixels wide one and look at it in Photoshop; no banding.
If I look at that same file in this thread with a 16 bit color setting, I see banding.
That's one of the questions that's still open and I never found someone who could explain that too me, why it is that we sometimes notice banding in a browser and not if we look at that same file in Photoshop or a program like ACDSee. [confused] [confused] [confused] [confused]
That's the reason why I posted this trick, all for the purpose of web graphics only.
 
Aaa ok ya, for Web graphics then Gauss it could very well be a case of each browser rendering the images in their own specific ways. Browsers are known to be lousy at this, and do have limitations. And IE vs. NS is another thing altogether.
For instance... one may dither an image while the other may not.

I suggest you visit the sites of each browser and read-up on their specs. That may help you gain a more indepth understanding of this issue.
 
A good article Erik, but sadly enough it only deals with web safe colors and my question has to do with Jpeg, not Gif. I think I will will do what Mark says and focus on the browser differences. Thanks anyway my Absurdian friend :D
 
I may not grasp the real problem yet, but I do remember Klaus Nordby posting at Talkgraphics about banding problems and 48 bit.
Fact is that when you install Win and have no video card driver installed, you see how ugly 16 colours can be.
In my opinion it is normal that 64.000 colours show banding.

JPG takes little squares and calculates a mean value for them. So if you don't have enough hues, the difference will quickly become apparant. Question of adding two weaknesses: not enough hues and mathematically calculated loss.

Does this have anything to do with the problem?
 
Erik, no offense, but I think you read too fast sometimes :P

I quote myself in 3 different posts:

"This problem is still one that amazes me, because even if these files look ok in Photoshop or ACDsee, they still show banding when you look at them in a web-browser"
"This banding problem is only visible in files viewed on the internet, never in the original."
"why it is that we sometimes notice banding in a browser and not if we look at that same file in Photoshop or a program like ACDSee"

But it's not a problem for me to explain it for you again, but first empty your thoughts [stuned] before you start reading and forget about websafe colors, GIF, CMYK and all the other things at the moment.

Ok, here we go:

I have a PC with 16 bit color settings
I open Photoshop
I create something with soft gradients in it.
I don't see banding
I save the file as JPEG
I look at the file again in Photoshop: no visible banding
I look at the file in ACDSee: no visible banding
I transfer the file to the web and look at it in Internet Explorer 5: I see banding...bingo!

One remark: even if I save the file as BMP, I still see the same amount of banding in my web browser.

I now use my trick with the noise to get rid of most banding problems in files that need to be published on the internet, but the final question that still stands is:
How is it possible that an ordinary JPEG file shows banding in my web browser, when it isn't visible in ACDSee or Photoshop?

I'm now going to do what Mark adviced and compare the different browser specifications to see if I find something, if not, no big deal, I just live with it. I already spent too much time on this problem :D
 
Oh ok Gauss... you're using a 16bit display huh?
Ok well that's where your problem is coming from then.
Sorry, but i was, for some reason, assuming you were using a 32bit display already. I don't think it was mentioned before that you used 16bit.

My advice about the browsers still stands if you're interested in that... but i can safely say that if you switch up to a 32bit display setting for your monitor, you won't see any banding.

Photoshop will usually, not always, display without banding; but that's depending on just how much banding there is in an image. And that point was explained real well by Erik in one of his first posts above.

That do ya any good then?
 
Yes Mark, it will do me some good, but sadly enough not for the people with a 16bit display viewing this web page. Web designers take in account different screen resolutions and browsers in their designs, but they forget about the fact that still numerous users are using a 16 bit display setting. The reason why I use 16 bit in some cases is to confront myself with this particular banding problem, something that would otherwise not be noticeable if I would set my display to 32 bit. The reason why I started this thread was because I sometimes publish my digital camera shots on the internet and I don't want to hear remarks all the time about banding, when it's not visible in the original photograph, either caused by me using a 32 bit setting on my side and viewers using 16 bit on their side or caused by some miraculous banding added by the different browsers.

Thanks for all your help Mark and Erik, I appreciate it :righton:
 


Write your reply...
Back
Top