Getting Rid of Banding in Gradients

I have a very smooth horizontal gradient in Photoshop, 427 pixels wide. As soon as I choose to Save For Web, the preview shows pretty severe banding in the gradient, even with PNG-24 selected.

Dither doesn't change anything, adding noise to another channel doesn't seem to do anything... I've tried Googling for tips and tricks, but nothing's worked so far (or maybe I'm just doing the tricks wrong).  Help!
LVL 38
gr8gonzoConsultantAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

mapennCommented:
does the banding occur when you save with JPEG High setting? I usually have to use that format when working with gradients.
0
MMDeveloperCommented:
can you take a screenshot of your "Save for Web and Devices" window whilst using it's "2 up" view?
0
creationdepotCommented:
Just save it as a PNG file - still works on the web just like a GIF or JPEG, and is much, much cleaner. :)
0
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

creationdepotCommented:
Sorry just realized I misread the question - when in your Save for Web dialog box, try taking a screen shot of what you're working with. I think you've just got a setting off.
0
creationdepotCommented:
Just another thought, one thing you could try doing is in your Save for Web dialog box, use the preset on the right - just under the "Done" button and above the Image Format selection drop down menu. It will clear out any settings you may have set and set it just to PNG-24 according to Photoshop's preferences.
0
gr8gonzoConsultantAuthor Commented:
Saving as PNG-24 doesn't really do anything. If I put the PNG file as the background of the web page and look at it in a browser, I still see the banding on a 16-bit display. On a 24-bit display it looks fine.

However, it doesn't seem to make sense that on a 16-bit display, the gradient is smooth within Photoshop, but as soon as I do Save For Web, I see banding.

Screenshot is attached. On the top you can see the image within the "Save for Web" popup (banded gradient). At the bottom you can see the image in Photoshop (smooth gradient)

sfw.png
0
creationdepotCommented:
You may just have to save it as a straight JPEG and skip the "Save for Web" altogether. No worries, the file will still be very small  - just crop it to something like 10 pixels high (technically you can do less than that since it's just repeating vertically in your background). Your file size will still be reasonably small even though you're eliminating the "Save for Web" route.
0
gr8gonzoConsultantAuthor Commented:
Tried that - still has banding. :(
0
creationdepotCommented:
Well I don't know outside of that... very odd problem. I will offer to send you a corrected JPEG though since I can't seem to come up with a solution. What is the width and colors (RGB #s) you need? Just the colors used above?
0
gr8gonzoConsultantAuthor Commented:
That's nice of you, but I really need to learn how to do it for the future - there are other gradient pieces that I'll need to do, as well. :)
0
creationdepotCommented:
It's got to be a setting somewhere in Photoshop because you can see it just fine on the main screen - Preferences maybe? :: laugh :: You know what you could do - take a screen shot, crop out the correct gradient in the screen shot and try saving that. Kind of take Photoshop out of the equation. I'd be interested to know if that works! :)

Otherwise you may want to post this again as a new question to try to drive some new blood to the site and possibly get a new perspective. Good luck!!
0
gr8gonzoConsultantAuthor Commented:
That does work. :) I see slight dithering which is completely fine - it's hardly noticeable. I used SnagIt to take the screenshot. Weird...
0
creationdepotCommented:
Well I'm glad *something* worked! Also you may already know this, but you don't have to use an outside program to take the screen shot. On a PC, hit "Print Screen" on your keyboard - copies the screen shot to your clipboard, then when in Photoshop just create a new file and then edit -> paste. Or on a mac: To take a picture of the whole screen, press Command-Shift-3. To take a picture of part of the screen, press Command-Shift-4 and drag to select the area you want. Either way will then copy it to your clip board and then just do the same thing to get it into Photoshop. This'll save you some time!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gr8gonzoConsultantAuthor Commented:
Yeah I know that shortcut, but if I paste into Photoshop, then I'd basically be hitting the same problem again. :)
0
gr8gonzoConsultantAuthor Commented:
Still no good resolution, but it's time to close this question out. Since creationdepot was the most helpful and responsive, I'm giving the points to him. Thanks for the help!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Creative Suite CS

From novice to tech pro — start learning today.