SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    Gradient banding

    one of the things most used in web 2.0 web design is subtle gradient that produce a faux 3D feel.

    but I was wondering if anyone else was getting a banding effect when they slice a PS gradient to use as a bg pattern. Or what steps you might be taking to avoid this sort of obvious banding from occuring?

  2. #2
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Show us a screen shot of this banding.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OK, knocked this off quickly, just to show ... http://raym31.home.comcast.net/~raym31/temp/apmenu.html

    but note the pope bar ( ignore the logo). note how instead of a smooth gradient, it looks like horizontal "bands"

  4. #4
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aww I hate bandy gradients! Here's some stuff I've tried in the past. Each one has sort of helped, in different circumstances.

    - Try specifying more colours in your gradient set. You'd think it wouldn't be too hard for PS to work out that the colours grey and black should be a bunch of gradually darkening greys but apparently not. It's helped me, nonetheless.
    - Try working in 16 bit colour
    - Use a Fill layer with a gradient rather than the actual Gradient tool.
    - Add noise
    - Add blur
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Raena...
    those good tips.

    Is there any trick to adding intermediate colors to a gradient? I know what you mean about adding colors.. but it seems when I pick a color to add to the gradient set, I mess it up worse. ( I should say that what I do is I use the eyedropper to select a color within the gradient band, and insert that color at that location within the gradient band)

    maybe i am doing it all wrong for the web.

  6. #6
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, I wouldn't eyedrop it from the band when the band is already wrong.

    Try choosing it from the colour selector instead.
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  7. #7
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey guys!

    Could you please help me quickly? I'm trying to create a gradient using no dither, in RGB 8 BIT, but I am getting a lot of banding. This is not a problem with my flat screen as I have seen perfect examples of gradients that do not have any banding whilst using the monitor. What can I do to resolve this problem?

  8. #8
    SitePoint Guru
    Join Date
    Oct 2008
    Location
    Melbourne
    Posts
    754
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you try any of the above ideas?
    "I'm Commander Shepard, and this is
    my favourite post on the internet."

    We'll miss you, Dan Schulz.

  9. #9
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Here:

  10. #10
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,804
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Sorry, I had the worst of hardware weeks ( HD, Monitor and cable modem failed a day apart from each other). :/

    Raena,
    yes, it seems the adding colors ( or DECREASING) the size of of the target shape help the most. Still, adding color is kinda haphazzard.

  11. #11
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,354
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    To reply to your PM:
    Yes I used Photoshop. The orange gradient in the middle was the one that had the most trouble. It is only about 4 or 5 pixels tall but had a stark variation which means you had only 4/5 pixels to go from one colour to the next which resulted in some banding. I had to make lower the difference in the colour values for that area so that it was smooth.

    The other parts just worked in the first shot. I generally save such graphics as a 1px wide but with 100% quality to get a good quality JPEG. The file size is yet small enough.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •