Transparency and translucency

We want to do two kinds of things with transparency and translucency:

Use it to combine/collage images in Photoshop, and...
Produce web images that use these effects

Translucency

screenshot Here's a screen shot of a web page where the text on one apDiv has a translucent background image.

HTML text is placed on an apDiv, and that apDiv has a background image which consists of a 20x20 pixel translucent image: The foreground text is set to a light shade of gray.

Here's how to make a translucent background tile:

Create a new image with a transparent background. 20 x 20 pixels is fine.
Use the paint bucket tool to fill the background with a color of your choosing
Dial the opacity of the (single) layer down in the layers menu to around 50%.
File | Save for Web... : Save as a PNG 24 image with transparency checked.

Use this as a background image on a layer (<div>) with no background-color set.

Give an image a transparent background in Photoshop

From to pen without background (starting with this larger scanned pen image)

Once you've brought this image in to Photoshop

Make sure the image is in RGB mode (Image>Mode>RGB).
If the pen is on a locked background image, double-click on the background layer in the layers palette to make it float.
Then erase (use the magic eraser tool) the areas of what had been the background that you want to be transparent.

The magic eraser works like the "magic wand" selection tool: When you click on a pixel, all the surrounding pixels with the same color, +- the tolerance, are made transparent. So, you made to adjust the tolerance.

Save for Web dialog box

When you're ready to File > Save for Web..., you might use these options to save as a GIF image:

Format -- GIF
Transparency -- check
Matte -- None

Or as a PNG image:

Transparency -- check

To regain transparency in the optimized version you can move the settings box to original and then enter your settings.
Anti-aliasing and Text

Using Quick-mask mode

Switching into 'quick-mask' mode offers you a whole different way to go about selecting a portion of an image, in order to (eventually) combine it with something else.

You can switch between normal and 'quick-mask mode' with the toggle just below the foreground-, background-color selector.

In quick-mask mode you can "color" on your image with the paintbrush, the paint-bucket, the gradient tool, any tool that you wish. The "colors" that you paint with will either

protect (or mask, or de-select) pixels if you paint with dark colors, or,
select pixels if you paint with light colors.
intermediate colors (grays) lead to partially selected (partially transparent) pixels.

Masked pixels are colored red as shown.

When you switch back to normal mode, the non-red pixels are selected, and you can copy your selection and paste it somewhere else...

Browser support for translucency/transparency

JPG images

none.
We can only make "fake transparency" effects, where part of a jpg image is set to the same color as the page background color.

GIF images

"binary" transparency in all browsers: A pixel is either completely transparent or completely opaque.

PNG images

alpha-channel transparency: 24 bits of "RGB" color info for every pixel, plus another 8 bit (256 levels) "alpha channel" to say "how transparent" the pixel is.

Full support for png images exists in all modern browsers: Safari, Firefox, IE 7.0 (released Oct 2006), Konqueror, Opera..

IE 6.x is our main concern (See browser stats for the latest on what fraction of the public is still using IE 6.) It has these known issues:

variable opacity of <img> (foreground) png images does not display unless your page has some extra bits of code.
translucent background images appear opaque in IE 5.5 - IE 6.x when displayed with the CSS background-imag style. No fix available.

Test page in Firefox (looks the same in IE 7.x)

IE6

In IE 6. This page contains the extra code to render png images transparent in IE 6. And the image indicated by the red arrow is displayed using an <img> tag.

There may be many situations where it's alright to use such translucent background images, as long as what shows through is not important to the content of the page.