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.
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.
@Derek Yeah, it's called dithering.
@Jeff Broderick yup :)
Good job :)
nice job jeff. glad to see you used a gradient bg image instead of a css gradient for the site haha.
@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.
Fireworks has a handy dandy feature called Dither that takes care of this, using exactly the technique that @Derek Clark is describing.
@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.
@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-)
@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.
@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.
@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!
@Jeff Broderick Just letting you know that the download link only currently works if you right click and select save linked file as...
@Jeff Broderick you sir....are the man!
Awesome @Jeff Broderick thanks dude.
Another top quality download by Jeff!
Bang Tidy, I shall try this out now!
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!!
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.
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.
Learned so much from comments of this shot. Thanks guys :)
Usefull, no more manual work! cheers
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.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter