Tuesday, September 30, 2008

Soft-Edged Images For the Web

In printing, halftoning is the effect of using dots of various sizes in primary ink colors to create what appears to be whole bunch of colors. Newspaper photos are a classic example of this. If you look closely at color or black & white photos in a newspaper (the printed kind), you can see these patterns of dots.

We don't think about halftoning much in connection with on-line images, because we can display so-called true colors in a Web image. They're still made up of primary colors, but the process and the dots are mostly invisible to people who create and view Web sites.

However, there is one issue with Web images that can still make good use of halftoning. That has to do with transparency. Images on the Web can have transparent parts, but they can't have semi-transparent parts. In other words, if you use Photoshop to make beautiful soft-edged images, your Web page will have to have a white background to keep that look.

If you want an image to appear to have a soft-edge, but the background is complex, with different colors and/or patterns, you can approximate that soft edge by using halftone dots. An example of this is at:

The interesting thing is that the halftone dot pattern is almost invisible. That's right. The human eye more or less tunes out this regular pattern, so the white box appears to fade more or less smoothly into the background. (Not now, of course, because you're looking for it! Try squinting a bit.)

So, here's how you can get this effect with Photoshop:
  1. Create the basic shape for the image background (rectangle, ellipse, etc.)
  2. Blur the edges with Gaussian blur to get the right edge "fuzziness"
  3. Convert the image mode to "Bitmap," using one of the dither or halftone options. These give you a lot of control over what pattern gets used to approximate the grayscale of the blurred shape.
  4. Now convert the image mode back to "Grayscale". It's grayscale, but all the actual pixels are either black or white.
  5. Use the Select->Color range ... tool to select all the background pixels, and delete them, leaving a transparent background.
  6. You can use Select->Color range ... again to select all the opaque pixels and make them any color you want.

No comments: