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 December 20, 2024

Laser TV, pig butchering, bird flu, pig kidney, AI tools, foldable iPad, HDMI 2.2, cellular Starlink, Audi Q6 E-Tron and secret societies. It has been a really busy week for me as I was setting up my new computer. There have definitely been a few bumps in the road...

View Full Post
Tech News Digest Graphics Unleashed

Tech News Digest for December 13, 2024

Tech gadgets, vicious hackers, sickness detection, Windows 11 24H2 bugs, Bitcoin, Sasquatch emoji, electric RV and Black Album. It is yet another Friday the 13th, a date that many consider to be back luck. For me it has always been a good day and I’m not at all...

View Full Post
Textures Unleashed Power Pack Volume 4

Fourth Power Pack of Seamless Textures Released

We created our first package of seamless textures more than seventeen years ago. Each of our packages has focused on a specific type of texture. They are offered in Pro Collections that have four different resolutions as high as 2048×2048 pixels as well as Lite...

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