Site search Web search

Vivid Light Photography, digital and film photography online
The See Through Image 
by Jim McGee

If you're putting your images on the Web or using it with a publishing package it's sometimes handy to be able to drop out part the image and let the background show through as in the image of the camera to the right.

The good news is this is really easy to do and will give you images that will be smaller and load faster than just filling the background with the background color on your Web page. It also means you won't have to edit the image if you change the background colors on your Web page and finally it means that the image will look correct if you copy the Web page into a PDF or other format. The bad news is that you'll be limited to using 256 colors.

The Technique 
The technique couldn't be simpler in Photoshop. First use Save As to save the image in GIF format making sure the Transparent box is checked.

Reopen the GIF image and use the selection tool to choose the areas you want to see through; then choose Delete to remove that area. 

When you load the image into a Web page you'll now be able to see through the image to the underlying background. This opens up numerous possibilites for artistically combining images, backgrounds and text on your page. It's a simple - but extremely powerful technique.

The image on the left is a "normal" image, meaning it is opaque and completely covers the underlying background.

In the image on the right the area surrounding the camera has been deleted and the image saved as a transparent GIF. This allows the underlying background to show 
through.

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper manet sola. Ut lacreet dolore magna aliquam sic semper fi tyrannis erat volutpat. Wisi enim ad minim veniam. Dolore eu sata sfeugiat. Ipsum lorem vei illum sat dolor euis mod tincidunt vei auminiure dolor in esse. Ultaceet dolore magna si napi. Wisi e nim ad minim veniam, quis nos In a tsvulpate velt esse meleste at semper manet sola. UT lacreet dolore magna aliquam sic semp fi tyrannis erat volutpat. Wisi enim ad minim veniam. Dolore eu sata sfeugiat.

Wisi e nim admin im veniam, quis nostrud. In atsvulpate velt esse meleste at semper

Here a transparent GIF file is laid over the underlying text. This can even be done with an underlying image using the code snippet shown below.

<img border="0" src="../31/images/FinepixS2_1.gif" align="baseline" 
  style="position: absolute; left: 17; top: 1179" width="277" height="300">

  Subscribe to Vivid Light 
Photography by email 

Tell Us What You Think

 

Vivid Light Photography, monthly photography magazine online

Site search Web search

Vivid Light Photography, digital and film photography online