Remove the banding of Photoshop Gradients
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
113,875,217,781 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
36 Responses (page 1 of 2)
Pro
Jeff Broderick
Let's be honest, I love dark designs. The largest problem, that I have found, is the banding of gradients.
I made an action to help me quickly fix this issue and decided to share it.
Go get it and let me know what you think!
It has been brought to my attention that the all new, all so cool, CS6 doesn't need this. Well, for those of us still on CS5, enjoy! :)
about 1 year ago
This is great Jeff! Already tried it out and will be using this often. Thanks for making our jobs easier.
about 1 year ago
Pro
Derek Clark
Classic print technique to avoid banding (which usually comes from not having enough colour range between 2 colours) is to add a fraction of noise to the gradient. Prevents banding when printing gradients and the same solution works for web. This is also the reason why you see so much subtle noise in gradients online these days.
:)
about 1 year ago
Pro
Jeff Broderick
@Derek Yeah, it's called dithering.
about 1 year ago
Pro
Derek Clark
@Jeff Broderick yup :)
about 1 year ago
Pro
Aqib Mushtaq
Good job :)
about 1 year ago
Pro
matt rossi
nice job jeff. glad to see you used a gradient bg image instead of a css gradient for the site haha.
about 1 year ago
Pro
Louie Mantia
@Derek Simply adding noise however doesn't solve the problem digitally. People use it to distract rather than fix. I used to do that for years, but after discovering the technique here: http://trojankitten.posterous.com/suddenly-a-photoshop-tutorial-avoiding-gradie which Jeff uses for this action, it actually dithers the gradients, which is great.
about 1 year ago
Pro
Chris Brauckmuller
Fireworks has a handy dandy feature called Dither that takes care of this, using exactly the technique that @Derek Clark is describing.
about 1 year ago
Pro
Louie Mantia
@Chris Brauckmuller And Photoshop has "dither" in Gradient Layers but didn't have them in Layer Styles until CS6 (which is in beta). However, the method of adding a layer above all layers in a 16bit document is a great idea if you're creating artwork. It allows everything to look smooth even when you mix gradients on top of each other.
about 1 year ago
Pro
Derek Clark
@Louie Mantia great article. I totally hear what you're saying. I guess the technique I suggested is more of a quick fix. Was more of a suggestion. Don't shoot the messenger B-)
about 1 year ago
Awesome!
about 1 year ago
Pro
CJ Melegrito
@Louie Mantia didn't you write an article based on such a topic?
Personally, I prefer the use of the Spatter technique rather than noise "cancellation" and dithering.
about 1 year ago
Pro
Louie Mantia
@CJ Melegrito Yes, spatter is great for gradient-only layers, however the technique Jeff and I link to here: http://trojankitten.posterous.com/suddenly-a-photoshop-tutorial-avoiding-gradie is great. It doesn't "cancel" as much as it actually dithers like spatter and Photoshop gradient dithering are supposed to.
about 1 year ago
Pro
Jeff Broderick
@CJ Melegrito I HIGHLY recommend using this technique as it's more universal and a better general fix. But you should use whatever you feel most comfortable with. This is just one option. Try it out. Let me know what you think!
about 1 year ago
Pro
Eli Schiff
@Jeff Broderick Just letting you know that the download link only currently works if you right click and select save linked file as...
about 1 year ago
Pro
Caleb Royce Lummer
@Jeff Broderick you sir....are the man!
about 1 year ago
Pro
Clayton Correia
Awesome @Jeff Broderick thanks dude.
about 1 year ago
Pro.png?1347996036)
Joshua Sortino
Another top quality download by Jeff!
about 1 year ago
Bang Tidy, I shall try this out now!
about 1 year ago
it ' s really great!! i'm currently use CS6 in my daily work, and I love it. I ' ll use this for CS5! thanks Jeff!!
about 1 year ago
Pro
Rok Benedik
Jeff this is great! I still remember struggling with gradient banding for my first app I did for G1. IT WAS PAIN IN THE ASS.
about 1 year ago
Nice one.
I use to do this within the layer styles by using a light noise as a pattern overlay and then multiplying the gradient over it, easier when doing alot of buttons etc to avoid extra layers.
about 1 year ago
Pro
Tom Zajac ☞ appvetica
Learned so much from comments of this shot. Thanks guys :)
about 1 year ago
Pro
Gijs Rogé
Usefull, no more manual work! cheers
about 1 year ago