home > graphic design > photoshop tutorials > transparent images

transparent images

Saving graphics with transparent backgrounds is beneficial for reducing file size and for placing these images inside a html document with a background colour specified. Sometimes, colours that are specified in html or style sheets vary across browsers and platforms and therefore if you have an image with a background colour, this may appear a slightly different shade to the table cell background. If you select transparency, the partially transparent pixels at the edge of an anti-aliased image are "matted". The background colour in the html document shows through the transparent pixels and the edges of the image blend with the background. Matting the partially transparent pixels prevents the ugly "halo" effect that sometimes happens if the edge of an image is a different colour to the html background colour.

It is also sometimes useful to have a completely transparent graphic (1px X 1px) to place in table cells, so you can specify exact measurements for the table cell to be.

Create a new image in Photoshop and specify a transparent background:

• Open (or create) an image with a transparent background
• Then File > Save for Web
• Click on the 2-Up tab at the top
• In the settings on the right hand side, specify the following:
  • Gif, Adaptive, Transparency, Interlaced, Websnap 0%, Dither 100%, Colours (however many you need).
• In the Matte box click on Other and select the correct hex colour value for the background of the html page or table cell the graphic will be placed within
• Save your image

To create a transparent image for use as a spacer graphic in html, simply create a new file 1 pixel by 1 pixel and select transparent for the background as above. Save for Web and have the Matte box set to "None".