Home / mondaymaintenance / Eliminating Banding In Graphics for the Web

Eliminating Banding In Graphics for the Web

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

About Foster D. Coburn III

Foster D. Coburn III is the author of thirteen books on CorelDRAW, the latest being CorelDRAW X6 Unleashed. He has been a contributor to numerous magazines. Foster has taken many projects, including this Web site and many more, from the early design stage through to a finished piece. He has been a featured speaker at many graphics and Web conferences.

Check Also

Recovering From Hard Drive Failure

My month in Mexico was almost over and major failure interrupted the trip home. Not …

3 comments

  1. 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.

    • 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.

  2. 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!)

Leave a Reply

Subscribe To Our Graphics Unleashed Blog Posts

Join our mailing list to receive the latest blog posts from Graphics Unleashed

You have Successfully Subscribed!

Pin It on Pinterest

Shares
Share This