Creating Web Graphics Using Layers and Opacity
Layers and opacity are two tools that are frequently used in making images for the Web. They help to create sophisticated, although often deceptively easy, graphics, typically as a montage.
Layers are just like sheets of glass, one above another, onto which you can paste an image or text. When looking down from above, all the constituent components of the layers appear in the image together. However, they may be moved independently of one another, if you so choose. Opacity is simply the transparency value of a layer.
Figure 1 shows two images, each consisting of two layers. In the first image, both layers have 100% opacity—you can't see through either layer. In the second image, one of the layers has an opacity level of 50%.
){kind=link}
Figure 1 Using multiple layers with low levels of opacity allows you to create interesting-looking images without a lot of work.
The layering tools work similarly in both Photoshop and its less expensive alternative, Paint Shop Pro. In each case, a tool palette helps you keep track of layers and their levels of opacity, which are controlled by a sliding scale.
For example, Figure 2 shows an image with two layers (Background and Layer 1). The eyeball to the left of the layer thumbnail means that the layer is visible (you can make it invisible by clicking on the eyeball). The opacity is set for each layer by selecting the layer and then moving the Opacity sliding scale. Right now you can see that Layer 1 is 30% opaque.
){kind=link}
Figure 2 Photoshop's command controls are very similar to those in Paint Shop Pro.
Tips for Making Web Images
Web graphics are useful in many places. They add a visual element to your presentation and can help to make it look professional. In this instance, let's make a graphic to introduce some vacation photos.
Start with a colored background, as in Figure 3. This isn't a hard and fast rule, but I find that starting with a colored background creates a mood by providing a base color for everything transparent above it.
Figure 3 A colored background is useful because it will fill in any "empty" spaces.
Add a new layer. In Photoshop, you can do this either from the Layer drop-down menu, or from the layer control palette. (See Figure 4.)
Figure 4 Photoshop's layer-creation tool.
Copy and paste an image to the new layer.
Deselect the image, if necessary. In some graphics programs, as long as an object is selected (surrounded by "magic ants"), you can't control its transparency. So, you may need to click outside the pasted object or deselect the object from the Selections menu.
Use the Opacity slider to set layer transparency. Using the Layers toolbar, slide the transparency level until it looks right to you. (See Figure 5.)
Figure 5 The amount of transparency to use is up to you—do whatever you thinks looks good.
){kind=link}
){kind=link}
){kind=link}
Give the background image a low level of transparency. Basically, this is making background "noise" and filling in empty spaces with something—it's kind of like a bass player in a rock band (see Figure 6).
){kind=link}
Figure 6 The background doesn't play a key part; instead, it fills in empty places.
Now add additional layers for your elements. You can use the feathering tool to cut pieces of images without sharp edges and past them onto new layers.
Using the layer control palette, you can control the transparency of each layer. You can also choose which layers are visible by turning them on or off.
In Figure 7, I've added a text layer at the top with 100% opacity and a little drop shadow.
){kind=link}
Figure 7 The text is important to the image, so I've kept it clear.