SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating a smooth gradient fade

    You guys know how when you take a vector shape and apply a fading gradient to it, how sometimes it isn't SMOOTH. you can see the lines separating the different colors as it fades. There was a tutorial that I read somewhere that talked about how to make it smooth. I thought it dealt with taking your gradiented shape with a fade, then placing another shape (same size) on top, and then changing the opacity and it would smooth over, but I can't seem to get it right.

    Thanks
    Bryan

  2. #2
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Wow.

    Gradient Fades are very easy. You don't state what program you use, but I use both PSP8 and Flash MX. If you're using a GFX editor, the "banding" or "stair-stepping" effect you're seeing (distinct color differences rather than a smooth fade) may be due to the fact that you either save or work in limited color depths.

    If you save an image as a GIF, it can only hold 254 shades of a color, plus a full color and no color (black). So if you have a photo, full color, and then use a 256 shade fade and save it as GIF, it's going to band the fade to get the colors down to the 256 limit.

    If you save as JPEG, it uses a 1-100 compression (progressive and standard), the lower the better quality but the larger the filesize; the larger, the poorer the quality image but smaller file size.

    Give us a lil more info on what you're using and we'll see if we can help out.

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    banding can also happen if you're fading over two colour that are so close to each other, and the fade area is so spread out, that there's actually not enough colours in between to smoothly fade...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  4. #4
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can use either Photoshop or Fireworks MX. I am trying to do this, more to teach myself, with a standard rectangle with one side of a linear gradient of WHITE and the other side with a color of ORANGE. I do it under 100 pixels per square inch. I am also using RGB mode. Banding is exactly what I am talking about. I would like to be able to get it to just FLOW from one to the next. I hope that helps. Like I said earlier, I know there is a tutorial on the internet or on sitepoint that deals with exactly what I am talking about, using a second layer with "something" on it that can aid in the smoothing factor.

  5. #5
    Yugo full of anvils bronze trophy hillsy's Avatar
    Join Date
    May 2001
    Location
    :noitacoL
    Posts
    1,859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used to get banding when saving a gradient as GIF due to limited colour depth. Unfortunately JPEG was not enirely suitable either due to the noise it creates around text etc.

    In the end I used PNG which worked very nicely.

    I never had any need to use "something" in a second layer. Just set up a gradient fill and whacked it in there (using PSP7, btw)
    that's me!
    Now A Pom. And a Plone Nut
    Broccoli Martinez Airpark

  6. #6
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortuntely, the banding happens WHEN i apply the gradient, not when saving. I can distinctly see the band lines during real time. So I don't know if there is a setting in Fireworks that needs to be altered, or what

  7. #7
    SitePoint Addict theGuest's Avatar
    Join Date
    Jun 2002
    Location
    Vancouver, BC Canada
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I gonna say that it's your monitor's display setting.
    I used to get a lot of emails asking about this problem.

    If your gCard is capable of it, go into your Desktop Settings/Display panel and change the colour depth from 16bit to 32bit.

    If you're unsure, and are using a PC, right-click the Desktop, choose Properties, then Settings. If there's an option for 32bit in the dropdown menu, you can select it.

    CAUTION: If your system is somewhat older... then before going ahead with this setting change, you'd do well to make sure your specific graphics card and monitor are new enough to handle this pixel depth. Read their manuals or check on the Websites of the companies that made it. All newer cards and monitors can handle this setting safely.

    Voila!
    No more banding. [img]images/smilies/smile.gif[/img]

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will check into that, thanks.

  9. #9
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Canada
    Posts
    107
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Banding ususally is caused by not having enough colors to make the graident smooth. There are only a limited number of colors to choose from for a gradient. Gradients usually don't work great for the web, or print for that matter

  10. #10
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But for getting the effects of a shape fading into another or into the background, they are necessary, correct?

  11. #11
    Yugo full of anvils bronze trophy hillsy's Avatar
    Join Date
    May 2001
    Location
    :noitacoL
    Posts
    1,859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Jixxy
    Banding ususally is caused by not having enough colors to make the graident smooth. There are only a limited number of colors to choose from for a gradient. Gradients usually don't work great for the web, or print for that matter
    They work fine. Just make sure you have enough colour depth i.e. if you use GIF, you will get banding.
    that's me!
    Now A Pom. And a Plone Nut
    Broccoli Martinez Airpark

  12. #12
    SitePoint Wizard aaron.martone's Avatar
    Join Date
    Feb 2003
    Location
    Florida, USA
    Posts
    2,322
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hillsy, GIFs don't me you get banding.

    In fact if someone took a color in it's purest form, say red. And added incrememntal black to it (254 shades) You would get that color, and a perfect fade, and then black (absense of color)

    Since that meets the 256-color GIF limit, there would be no banding and it would be a GIF format.

  13. #13
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by aaron.martone
    Hillsy, GIFs don't me you get banding.

    In fact if someone took a color in it's purest form, say red. And added incrememntal black to it (254 shades) You would get that color, and a perfect fade, and then black (absense of color)

    Since that meets the 256-color GIF limit, there would be no banding and it would be a GIF format.
    aeh...you still would get banding if you're making a gradient that spans more than 256 pixels...no ? especially if you have dithering set to none...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  14. #14
    Yugo full of anvils bronze trophy hillsy's Avatar
    Join Date
    May 2001
    Location
    :noitacoL
    Posts
    1,859
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by redux
    aeh...you still would get banding if you're making a gradient that spans more than 256 pixels...no ? especially if you have dithering set to none...
    Yes I guess I forgot about dithering, but then again I don't like it anyway. Much better to use a format that supports a decent colour depth.

    Seems like we're making a mountain out of a molehill here. Let's summarise:

    1) Gradient banding is generally to do with a lack of colour depth. Therefore:
    2) In most )) cases. GIF will give you banding on a gradient fill
    3) You may get banding on your display if it's running at a low colour depth (e.g. 16 bit)
    4) JPEG is a good format for gradients if you can live with the noise artifacts
    5) PNG is a good format if you can't
    6) There is nothing wrong with using gradients as long as you're aware of the limitations inherent in the various file formats
    that's me!
    Now A Pom. And a Plone Nut
    Broccoli Martinez Airpark

  15. #15
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jag5311
    You guys know how when you take a vector shape and apply a fading gradient to it, how sometimes it isn't SMOOTH. you can see the lines separating the different colors as it fades. There was a tutorial that I read somewhere that talked about how to make it smooth. I thought it dealt with taking your gradiented shape with a fade, then placing another shape (same size) on top, and then changing the opacity and it would smooth over, but I can't seem to get it right.

    Thanks
    Bryan
    I don't know what program you're using, but some allow you to add noise to the gradient. A tiny bit of noise nips banding in the bud.

  16. #16
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Olivehurst, CA USA
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using Fireworks, and exporting as a .gif, I know a way around the banding - I've run into it before. Simply export the piece as a .png32, then open that .png in either Corel Photopaint or Adobe Photoshop and simply save as a .gif.

    I know it seems like a ways around, but it works for me, and eliminates banding. I'm not sure why fireworks has a problem with banding, but it does.


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
  •