Shaping Images with Transparency
Transparency in an image means changing the pixel value so you can see through the image to whatever is in the background. It is not hard to achieve if you know how, and can come in handy as a solution for both Web design and creating effects in print. This article shows at least four different ways to implement transparency to help take the square out of your images and shape them to fit your design.
Richard Lynch is the author of a number of books and articles on Photoshop, scanning, and digital imaging, including Special Edition Using Adobe Photoshop 6. He is currently at work on a book about digital photography: The Absolute Beginner's Guide to Digital Photography.
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Introduction: Images that Are Not Square
Many times, a square image isn't what you want, but the basic file format for an image is rectangular. For example, suppose that you want to float a graphic type or an image of a star over a background, and see through to what is behind it on a Web page. A square image would change your five-pointed star to a four-pointed block that would obscure whatever was behind it—if you didn't prepare it correctly.
An option is to put the images together in an image editor (Photoshop, for example), but this may not always be the best solution for what you are trying to do. For example, suppose that you want to use the star as a bullet in some text that free-flows over a background, or maybe you want to animate that star over a background or even a logo with a simple motion (see http://members.aol.com/thebookdoc/articles/ram3.html). Instead of locking the bullets to the background and risking them not matching the text, or creating a complicated multiframe animation, it might require a smaller file size and fit your needs better if you find a way to cut the star out from its file.
When laying out a spread for a print project, you might want to accomplish a very similar thing. A graphic-type logo might be combined over a complex layered set of elements without obscuring them, or bringing the whole thing into Photoshop to fix it before using it. The final files and preparation methods for use in print and on the Web will be a little different, but the "hard" part of the procedure can be the same for shaping either one. This tutorial will explain how to do both: which format and techniques to use, and how to save the images.