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 January 17, 2025

DJI drones, WireGuard, online scams, ChatGPT love, Copilot AI, robot mower, GeForce RTX 50, solar array, Galaxy S25 Slim, Volvo EX90 and buried Bitcoin. You’ll see plenty of stories below about AI and I’ve even used AI to create the graphics at the top of...

View Full Post
Loading Software On Foster’s Dream Computer 2024

Loading Software On Foster’s Dream Computer 2024

Last week I shared in Foster’s Dream Computer 2024 Is Hard at Work the details about how the hardware in my new computer had performed. Today I’m going to share my experience in getting software installed and activated on the new machine as well as the migration...

View Full Post
Tech News Digest Graphics Unleashed

Tech News Digest for January 10, 2025

Wi-Fi 7, Dell, bird flu, AI trends, iOS 18.3, Arrow Lake, Nvidia RTX 50, living underwater, phone charging, new EVs, Bitcoin and pinball machines. The Consumer Electronics Show is currently underway in Las Vegas and there have been a lot of product announcements and...

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

    Feed has no items.

Web Design Blog

    Feed has no items.
Build Divi WordPress Site
WordPress Site Care
Divi Tools
Graphics Unleashed Logo