Transparencies

Get some interesting effects with transparency. You'll have to be precise here or you'll get some really odd effects... interesting perhaps, but not what you wanted or expected. The most common mistake when making an image that will have a transparent background is to make it on the wrong color background. For best results, match the background color of your web page as closely as possible. This is especially important if you plan to add a drop shadow to any part of your image.

Compare the two banner below. The bottom banner is an example of what happens when you save a banner with one transparent color and later try to display it on a webpage with a different background color.

Use transparency to make your text appear to drop off of the edge of the banner. This is a pretty cool effect, and easy to do.

Start with a "banner sized" canvas, say 400 x 60 pixels. With the Selection tool draw out an area smaller than your canvas and fill it with the color, texture, photo of your choice. Add your text as a selection, positioning it partly on and partly off of your previously selected/filled area. The secret is in making your background color transparent. For best results, don't use the background color elsewhere in the banner or you'll find that area becomes transparent as well.

On the other hand, you may want other areas of your image to be transparent... the text, for example.

This banner adds a twist: the text is done with a cutout while the shaped background has a drop shadow. Is the text sitting on the shape or is it cut out of it?

No one can tell you exactly how to create an award winning banner, there's a lot of trial and error involved. Hopefully the examples and tips in this article will give you a good starting point.

Working with Photos
Banner Beginnings