Eliminating Banding In Graphics for the Web

September 26, 2016

While working on a recent project, the only copies of a logo were fairly low-resolution bitmaps. The quality of them was good, just at too low of a resolution for the desired usage on a Web site. By asking a few questions, I was able to determine who had originally designed the logo and spoke with the designer on the phone. He was happy to send me a vector version for the project.

I received a PDF file that had been exported from SignLab, the software used to create the logo. During the export process, gradient fills were converted to a series of hundreds of strips made up of various colors. You can see examples of those in the screenshot below.

banding-header

There are some who will blame CorelDRAW for nearly anything. I did open the PDF in different software (Adobe Reader, Adobe Illustrator, Adobe Photoshop and CorelDRAW) and all showed the same banding. As I do not have SignLab, I can’t verify though I do believe this is just the way that it exports gradient fills.

Unfortunately that banding is quite visible when exporting the file to a bitmap. You’ll see an example of part of the logo when directly exported to PNG format.

carefree-christmas-logo-banding-600x400

Since the banding is built into the design, there isn’t just a setting to change to remove it. A workaround had to be found that would hide it. As I knew the finished logo for the Web site needed to be 1080 pixels wide, the goal was to create something that looked great at that size. For those of you who go back many versions in CorelDRAW, you may have remembered an old setting when exporting bitmaps that was labeled “supersampling”.

While that setting no longer exists, the functionality was pretty simple. Supersampling simply means exporting at a higher resolution and then resampling down to the desired resolution. I believe the old setting would export at twice the desired size and then downsample it.

As the banding in this file was very evident, I exported the logo at at four times the desired size or 4320 pixels wide. Once exported, I resampled down to the desired 1080 pixels and ended up with the logo shown below. While I’m sure you can see some banding if you look closely, I was able to removed most of it.

carefree-christmas-logo-1080-supersampling

Post Discussion

3 Comments

  1. Larry Cox

    So what format did you export it as? I assume it was no longer a vectored image. Any suggestions of getting rid of the bands and keeping it vectored with the gradient other than manually removing each band? Plus this has happened to me before when I created something in Corel and saved as an eps and then open it in Illustrator.

    Reply
    • Foster D. Coburn III

      As described in the article, the goal was to put the logo on the Web. Because of this, it was exported as a PNG file (a bitmap). There is no magic way to get rid of the bands in the vector version. Had we truly needed a vector version without the bands, I would have consulted with the original artist to see if there was a way to get a file exported from SignLab without the bands.

      Reply
  2. Karen Heffner

    Foster – This banding problem is “my world” of textile screen printing. I constantly get Logo art files from CAD sign software & then have to deal with the real world of converting the file into Film Seps.
    Thanks for the reminder of the “supersampling” function. We all learned skills in older CorelDraw versions & then forget to keep using the same pathway to success. (like your scanner episode – ditto!)

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like…

Tech News Digest Graphics Unleashed

Tech News Digest for September 27, 2024

TerraMaster NAS, crypto crimes, cancer drugs, iOS 18, Razer Lake, Lunar Lake, iPhone 16 Pro, Europa’s ocean and fun states. We are a couple of weeks away from Intel releasing their newest batch of desktop processors. They are of special interest to me as I will...

View Full Post
Tech News Digest Graphics Unleashed

Tech News Digest for September 20, 2024

Product reviews, hacking NASA, Copilot Wave 2, Sequoia, music hard drives, iPhone 16 details, puffling patrol and abandoned schools. A tropical storm passed nearby last week and I made sure I was prepared. The result was ten minutes of rain so all my preparation will...

View Full Post
Tech News Digest Graphics Unleashed

Tech News Digest for September 13, 2024

Apple Watch 10, AirPods 4, NAS devices, streaming-royalty heist, cheek kiss, diamond making, iPhone 16, Giga Train and weird. The biggest tech news of the week came with Apple’s glow event and the many updated products. You’ll certainly find a lot about...

View Full Post

Foster D. Coburn III

Foster D. Coburn III built his first Web site in 1995 and he has been working exclusively in WordPress since 2013. He has used the Divi theme exclusively since 2015. Earlier in his career he was the author of 13 best-selling books on CorelDRAW and has been a contributor to numerous technology and graphics-related magazines. Foster has taken many projects, including this Web site, from the early design stage through to a finished piece. He has been a featured speaker at many graphics conferences.

Recent Posts

Web Design Blog

Build Divi WordPress Site
WordPress Site Care
Divi Tools
Graphics Unleashed Logo