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…

Keyboard Cleaning Gel

Use Cleaning Gel on Keyboards, Laptops and More

Keyboards can be pretty disgusting. Apart from looking bad and being covered with germs, some of that dirt can prevent them from working well. A few years ago I took a very drastic step to get a keyboard clean. If you don't remember it, check...

Read More

Blog Makeover

Blog Posts Receive Makeover

Since we migrated the Graphics Unleashed Blog to a dedicated site in 2015, the layout of the posts was mostly the same. We did make a few minor changes every now and then, but it didn't change the overall layout much. Now we've made a major...

Read More

You Shipped It Where? What Were You Thinking?

Loyal readers know that I recently moved. Part of that move was selling the home where I had resided the previous 22 years. While I've provided a new address to more than 100 places, I'm sure there are some I've missed. Today I have a story...

Read More

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