Using Transparency with Web Images in Photoshop: An Introduction

Many times a rectangular image isn't what you want, yet the basic file format for any Photoshop image is rectangular. For example, say you want to float a shaped bullet point over a web page with a background. A square image would change your shape (arrow, circle, star) to a rectangle that might obscure whatever was behind it if you don't prepare the image right. An option could be to put the images together in an image editor (i.e. Photoshop), but this may not be the best solution for what you are trying to do in every case. Putting the images together in Photoshop may create large files that you might want to avoid in web design.

If you wanted to use the shape as a bullet in some text that free-flows over the background to reduce the load time, or animate that shape in a logo, you can use transparency to create the effect. Instead of locking the bullets to the background and risking them not matching the positioning of the text, or creating an involved, multi-frame animation, it might require a smaller file size and fit your needs better if you just find a way to cut the star out and use it as a smaller file. See Web Example 1. [Click on the nose to close the example window.]

While using transparency is more often a special case, it can help in some situations. Knowing what to do when those situations arise is the point of this tutorial.

  Copyright © Richard Lynch 2001