Web Domination Using Photoshop

Fading an Image into the Background

An effect that's commonly used in web design is to fade a whole image, or part of an image -- its edges, for example -- into the background on which it sits. You can easily produce this funky effect using gradients and layer masks in Photoshop.

Solution

1. Arrange your Photoshop document so that the image you wish to fade is on one layer, and the background color is on another layer.

Initial document

2. Select the image layer and click on the Add Layer Mask icon (signified by a white circle on a dark gray background) at the bottom of the Layers palette, as shown in this example. A blank rectangular thumbnail will appear next to the layer thumbnail, representing the layer mask. Make sure this thumbnail is selected.

Creating a layer mask

3. Set your foreground color to black. Select the Gradient Tool (G) and choose the Foreground to Transparent gradient.

Selecting the Foreground to Transparent gradient

4. Apply the gradient by clicking at the bottom edge of the image and dragging the mouse upwards. Hold down Shift to constrain the gradient path to a straight line. Release the mouse button, and the gradient will be applied. Your fade effect is complete!

Adding the fade effect

Discussion

Layer masks are grayscale images that show or hide areas of the layers to which they have been applied. The gray tones on the mask reflect the transparency of corresponding areas on the layer: black areas are completely transparent and, therefore, invisible; white areas are not transparent at all, so they're completely visible; and shades of gray have varying degrees of transparency, depending on how dark the gray is (the closer it is to black, the more transparent the corresponding section on the image layer will be).

You can edit a layer mask using any of the drawing or painting tools, including the pencil and brush tools (B), the Gradient Tool (G), and the Paint Bucket Tool (G). Drawing on a mask affects the mask only, and does not touch the pixels that make up the image. Draw or paint on the mask in black, white, or gray.

In this solution, I used a black-to-transparent gradient to create a gradient on the layer mask. This allowed the upper part of the image to remain visible, but let the lower part fade away so that the background color could show through.

Creating a layer mask using the Brush Tool

We could also have created a fade effect with the Brush Tool (B). In the example shown, I've selected a soft-edged brush, set my foreground color to black, and painted along the bottom of the image on the layer mask to paint out the areas I want to fade.

You're probably wondering why you wouldn't just paint a green gradient on
the bottom of the picture layer, or on its own layer, to achieve the same effect.

Why use a layer mask? The beauty of layer masks is that they are non-destructive. They don't actually modify any of the pixels on the image layer itself -- a benefit that, ultimately, gives you greater flexibility. If you decided that you didn't want the effects you'd created using your layer mask, you could get rid of the mask and the original image would remain intact. Or, if you decided you didn't like the green color, you could change the background color and the fade effect would still work.

Blending Two Images Together

Solution

Blending two images together is very similar to fading an image into its background: you'll apply a layer mask to at least one of your images. If you haven't created layer masks before, read the solution titled "Fading an Image into the Background," in Chapter 2.

Arrange your Photoshop document so that one of the images overlaps the other, as shown in the example below. I've usually found that the effect works best if the image backgrounds have similar colors or textures, although this is not mandatory by any means!

Initial document with two image layers

Create a layer mask for the top layer and use the Gradient Tool (G) or the Brush Tool (B) to create a fade effect as I described in "Fading an Image into the Background." If you've hidden too much of the layer with the layer mask, you can make these areas visible again by painting them back with white on the layer mask.

Creating a layer mask

Personally, I'm pretty happy with that effect so I'll leave it there. You can see the final result here.

Beautiful flowers