User Guide Cancel

Use transparency and mattes

  1. Photoshop Elements User Guide
  2. Introduction to Photoshop Elements
    1. What's new in Photoshop Elements
    2. System requirements | Photoshop Elements
    3. Workspace basics
    4. Guided mode
    5. Making photo projects
  3. Workspace and environment
    1. Get to know the Home screen
    2. Workspace basics
    3. Tools
    4. Panels and bins
    5. Open files
    6. Rulers, grids, and guides
    7. Enhanced Quick Mode
    8. File information
    9. Presets and libraries
    10. Multitouch support
    11. Scratch disks, plug‑ins, and application updates
    12. Undo, redo, and cancel actions
    13. Viewing images
    14. Using Windows 7 features
  4. Fixing and enhancing photos
    1. Resize images
    2. Cropping
    3. Process camera raw image files
    4. Add blur, replace colors, and clone image areas
    5. Adjust shadows and light
    6. Retouch and correct photos
    7. Sharpen photos
    8. Transforming
    9. Auto Smart Tone
    10. Recomposing
    11. Using actions to process photos
    12. Photomerge Compose
    13. Create a panorama
  5. Adding shapes and text
    1. Add text
    2. Edit text
    3. Create shapes
    4. Editing shapes
    5. Painting overview
    6. Painting tools
    7. Set up brushes
    8. Patterns
    9. Fills and strokes
    10. Gradients
    11. Work with Asian type
  6. Guided edits, effects, and filters
    1. Guided mode
    2. Filters
    3. Guided mode Photomerge edits
    4. Guided mode Basic edits
    5. Adjustment filters
    6. Effects
    7. Guided mode Fun edits
    8. Guided mode Special edits
    9. Artistic filters
    10. Guided mode Color edits
    11. Guided mode Black & White edits
    12. Blur filters
    13. Brush Stroke filters
    14. Distort filters
    15. Other filters
    16. Noise filters
    17. Render filters
    18. Sketch filters
    19. Stylize filters
    20. Texture filters
  7. Working with colors
    1. Understanding color
    2. Set up color management
    3. Color and tonal correction basics
    4. Choose colors
    5. Adjust color, saturation, and hue
    6. Fix color casts
    7. Using image modes and color tables
    8. Color and camera raw
  8. Working with selections
    1. Make selections in Photoshop Elements
    2. Saving selections
    3. Modifying selections
    4. Move and copy selections
    5. Edit and refine selections
    6. Smooth selection edges with anti-aliasing and feathering
  9. Working with layers
    1. Create layers
    2. Edit layers
    3. Copy and arrange layers
    4. Adjustment and fill layers
    5. Clipping masks
    6. Layer masks
    7. Layer styles
    8. Opacity and blending modes
  10. Creating photo projects
    1. Project basics
    2. Making photo projects
    3. Editing photo projects
  11. Saving, printing, and sharing photos
    1. Save images
    2. Printing photos
    3. Share photos online
    4. Optimizing images
    5. Optimizing images for the JPEG format
    6. Dithering in web images
    7. Guided Edits - Share panel
    8. Previewing web images
    9. Use transparency and mattes
    10. Optimizing images for the GIF or PNG-8 format
    11. Optimizing images for the PNG-24 format
  12. Keyboard shortcuts
    1. Keys for selecting tools
    2. Keys for selecting and moving objects
    3. Keys for the Layers panel
    4. Keys for showing or hiding panels (expert mode)
    5. Keys for painting and brushes
    6. Keys for using text
    7. Keys for the Liquify filter
    8. Keys for transforming selections
    9. Keys for the Color Swatches panel
    10. Keys for the Camera Raw dialog box
    11. Keys for the Filter Gallery
    12. Keys for using blending modes
    13. Keys for viewing images (expertmode)

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 or Magic Eraser.

When working with GIF or PNG‑8 files, you can 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-edged transparency (left), and with hard-edged transparency (right)

Preserve background transparency in a GIF or PNG image

GIF and PNG‑8 formats support one level of transparency—pixels can be fully transparent or fully opaque, but not partially transparent. (By contrast, PNG‑24 format supports multilevel transparency; that is, you can have up to 256 degrees of transparency in an image, ranging from opaque to completely transparent.)

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select GIF, PNG‑8, or PNG‑24 as the optimization format.
  3. Select Transparency.
  4. For the GIF and PNG‑8 formats, specify how to treat partially transparent pixels in the original image. You can blend these pixels with a matte color, or you can create hard-edged transparency.

Create a matted GIF or PNG image

When you know the background color of the web page on which an image will be displayed, you can use the matting feature to fill or blend transparent pixels with a matte color that matches the web page background.

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select GIF, PNG‑8, or PNG‑24 as the optimization format.
  3. For GIF and PNG‑8 format, do one of the following:
    • To keep fully transparent pixels transparent, and blend partially transparent pixels with the matte color, select Transparency. This option prevents the halo effect you see when you place an anti-aliased image on a web page background that differs from the image background. This option also prevents the jagged edges of hard-edged transparency.

    • To fill transparent pixels with the matte color and blend partially transparent pixels with the matte color, deselect Transparency.

  4. Select a color from the Matte menu:
    • Eyedropper Color (to use the color in the eyedropper sample box)

    • White, Black, or Other (to select a color using the Color Picker)

Create hard-edged transparency in a GIF or PNG‑8 file

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.

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select GIF or PNG‑8 as the optimization format.
  3. Select Transparency.
  4. Select None from the Matte menu.

Create a matted JPEG 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. The matte color fills fully transparent pixels and blends with partially transparent pixels. When you place the JPEG on a web page with a background that matches the matte color, the image appears to blend with the background.

  1. Open or create an image that contains transparency, and choose File > Save For Web.
  2. In the Save For Web dialog box, select JPEG as the optimization format.
  3. Select a color from the Matte menu: None, Eyedropper Color (to use the color in the eyedropper sample box), White, Black, or Other (to select a color using the Color Picker).

When you select None, white is used as the matte color.

Adobe logo

Sign in to your account