Love the web

Update! This article was written for Photoshop CS3. It would appear CS5 does not offer the same functionality.

This is a neat little technique I stumbled upon one day while poking around in Photoshop's “Save for Web…” settings. It allows weighting of Photoshop's colour palette when saving 8-bit images. As with a lot of discoveries in life, it wasn't long before I found it coming in very handy.

The problem

One of our designers gave me this header graphic for the Fringe Festival website.

Saving this graphic for web as an 8-bit image was creating a lot of undesirable banding in the gradients of the coloured twirls. (Saving as a 24-bit image was out of the question given the file size. Saving as .jpg could be a consideration, but as we shall see, not necessary.)

The PNG and GIF compression algorithms determine their palettes based on frequency of each colour. So in this case the blacks and greys are over represented, while the pinks and blues (and to some extent yellows) are under represented. That's why the banding is most obvious in the colourful sections of the graphic.

If we could reduce the number of greys (henceforth referred to as 'background') in the palette we would free up spots for the bright colours ('foreground') and thereby achieve cleaner looking gradients. Well, thanks to Photoshop's 'Use a channel to influence color reduction' option we can do just that.

The solution

The first thing we need to do is create an Alpha channel to define our foreground / background separation. This is easily achieved using Photoshop's 'Colour Range…' tool (Select > Colour Range…). By SHIFT-clicking on a few background areas in the graphic and sliding the 'Fuzziness' setting to '200' I was able to quickly isolate the background. Then check the 'Invert' checkbox to select the foreground.

Click 'OK', then select the 'Channels' palette (Window > Channels). Create a new channel (icon at bottom of palette) and fill your selection with white.

Now we're ready to compress the graphic. Go to the Save for Web interface (File > Save for Web & Devices…). Select PNG-8 or GIF, then click on the 'Use a channel to influence color reduction' icon

In the dialog that pops up select your Channel from the dropdown ('Alpha 1' in our case). Also note you could use the same technique with text or vector shape layers.

Click OK and you're done. Note the new & improved colour palette sporting a large reduction in the number of dark greys.

Employing this method I was not only able to enhance the appearance of the graphic but in this case shaved almost 30% off the file size.