include "_i/1.h" ?>
Transparency and Translucency
include "_i/2.h" ?>
See also:
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
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 (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:
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)
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.
include "_i/3.h" ?>