Creating Web 2.0 Effects With Photoshop, Part 1

Creating a Background Gradient

What if you want to apply a gradient to something like the Background layer, which doesn't allow for layer effects? Well, first fill the background layer with your desired base color. Then, change your foreground color to the new color that you want to use for your gradient. Select the Gradient Tool, which is part of the Paint Bucket flyout menu (keyboard shortcut G).

In the Options bar, choose the Foreground to Transparent gradient.

Make sure that you have the Background layer selected in the Layers palette. Then click near the top of the Background layer, and hold the mouse button down. Hold down the Shift key (this constrains the gradient effect to the vertical axis), drag downwards, and then release the mouse button in the point at which you want the gradient to end. Your Background layer now has a gradient applied!

Creating Striped Backgrounds

Another nice Web 2.0 effect is the application of a striped background. Similar to gradients, striped backgrounds can be applied to page backgrounds, headers, banners, and shapes. They can even be combined with gradients for a stunning effect.

1. First, you need a striped pattern to work with. Create a new document that's only 4x4 pixels in size. Set the foreground color to black and select the Pencil tool, as shown in Figure 9.

2. Zoom in, if you need to, and draw a diagonal line like the one in Figure 10.

3. Type Ctrl-A (PC) or Command-A (Mac) to select the entire canvas. Go to Edit > Define Pattern. In the dialog box, type a name for the brush (e.g. "Diagonal pattern") and click OK (see Figure 10). You can close the pattern document without saving if you want -- you don't need it anymore.

4. Create another rectangle, click the Layer Style icon and choose Pattern Overlay. Change the Blend Mode to Multiply, the Opacity to 30%, and choose your new diagonal pattern from the pattern drop-down. If your settings window looks like Figure 12, you're good to go -- click OK.

5. As Figure 13 shows, a striped pattern is now applied to the rectangle.

For some extra Web 2.0 goodness, apply a gradient overlay layer effect as well:

Transparent Layers

Creating layers that are slightly transparent is very easy. Simply select the layer that you want to be transparent in the Layers palette, then change the opacity level by changing the percentage or by dragging the slider. In Figure 15 below, the white rectangle has been made slightly transparent so that you can see the striped gradient background behind it -- perfect for, say, a navigation bar.