269
USING PHOTOSHOP ELEMENTS 8
Optimizing for the web
Last updated 7/26/2011
More Help topics
“Preview an animation” on page 274
“Understanding layers” on page 49
Using transparency and mattes
About transparent and matted web images
Transparency makes it possible to create nonrectangular images for the web. Background transparency, supported by
the GIF and PNG formats, preserves transparent pixels in the image and allows the background of the web page to
show through the transparent areas of your image. (Although the JPEG format does not support transparency, you can
specify a matte color to simulate the appearance of transparency in the original image.)
Web button without transparency (left), and with transparency (right)
Background matting, supported by the GIF, PNG, and JPEG formats, simulates transparency by filling or blending
transparent pixels with a matte color that matches the web page background. Background matting works best if the
web page background is a solid color and if you know what that color is.
To create background transparency or background matting in the optimized image, you must start with an image that
contains transparency. You can create transparency when you create a new layer or use the Background Eraser, Magic
Eraser, or Magic Extractor tools.
When working with GIF or PNG-8 files, you can use a matte setting of None to create hard-edged transparency: all
pixels that are more than 50% transparent in the original image are fully transparent in the optimized image, and all
pixels that are more than 50% opaque in the original image are fully opaque in the optimized image. Use hard-edged
transparency when you don’t know the background color of a web page, or when the web page background contains
a texture or pattern. However, keep in mind that hard-edged transparency can cause jagged edges in the image.
GIF without hard-edges transparency (left), and with hard-edged transparency (right)
