[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 762
  • Last Modified:

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!
0
gr8gonzo
Asked:
gr8gonzo
1 Solution
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now