How to Choose Transparency Color in Photoshop


Changing the background transparency color is useful in Web design. Images with transparent backgrounds can be matched to multiple Web page colors. Designers use transparency for many reasons. They can design nonrectangular images, images can be included in any background without noticeable matting, and other design elements can be combined with the image in the background. File types used for transparency are GIF and PNG. Adobe defines background transparency as preserving transparent pixels in an image and background matting as simulating transparency.

Things You'll Need

  • Computer
  • Photoshop 7 or later
  • Grab a section of the background color on the Web page at the image insertion area. (If you have the hexadecimal code for the color, you can skip this step.) Using a screen grab application can do this. (See Resource 1.) Save the selection as a JPEG.

    If the background color has not been chosen, the designer can pick a color code from a hexadecimal color chart. (See Reference 2.) This color can then be used in the Foreground Color on the Tools Palette.

  • Open the background color section sample JPEG and the image with the transparent background. Both images should be open on the desktop.

  • Sample the color of the Web page background using the Color Picker from the Set Foreground Color on the Tools Palette. Click on the "Foreground Color." This opens the Color Picker. Use the Color Sampler tool and click on the background color desired. This sets the background color to the Foreground in the Tools Palette. Close the background color JPEG.

  • Choose "File" and then "Save for Web & Devices" from the Main Toolbar menu. This opens the "Save For Web & Devices" window.

  • Select "Foreground Color" from the Matte drop-down menu. This changes the color of the background pixels to the Web page colors.

  • Check “Transparency” to keep the fully transparent pixels transparent. Now only the partially transparent pixels will show the background color.

  • Select “256” in the Colors drop-down menu. This will make the transparency color blend with the background color. The choice depends on the Web page and layout. Click "Save" and the transparency color is changed and the image optimized.

Related Searches


  • Photo Credit Ciaran Griffin/Lifesize/Getty Images
Promoted By Zergnet



You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

Is DIY in your DNA? Become part of our maker community.
Submit Your Work!