By: Corrie Haffly

December 26th, 2007

Reader Rating: 6.5

The visual style that has come to be associated with the term Web 2.0 has exploded in popularity; everywhere you look, corporate sites, web service sites, ecommerce sites, and even personal blogs are making use of clean, minimalist design coupled with fancy graphic effects. If you'd like to jump on the bandwagon, this is the article for you! Using Photoshop, I'll show you how to add Web 2.0 graphic goodness to your site design using non-destructive techniques. It may even take your site from boring to trendy!

I won't assume too much, nor should it matter if you're not using the latest version of Photoshop. If you're a Photoshop veteran, no doubt you'll be happy skimming through the first few tips while we cover the basics. But I'll be surprised if Photoshop whizzes don't learn at least something along the way.

Oh, and one other thing -- whenever I mention a tool for which a keyboard shortcut can be used, I've indicated that shortcut key in parentheses. If you're a keyboard junkie, you'll know that mastering these shortcuts is a real time-saver.

Let's get started then, shall we?

Creating a Simple Gradient

One of the easiest effects to achieve in Photoshop is the subtle gradient. Looking at any mix of Web 2.0 sites, you'll see gradients used as page backgrounds, behind a top banner or header area, on interface bars, and in different shapes (see starbursts, below).

One of the easiest ways to make a gradient effect is to apply a layer style to an existing layer. Here's a quick series of steps for creating a rectangle that has a gradient.

1. Set a base color for your rectangle by clicking the color patch in the toolbar, as shown in Figure 1, and selecting the color that you'd like to use.

2. To create a rectangle shape, select the rectangle shape tool (keyboard shortcut: U) and draw a rectangle on your canvas by clicking, dragging, and releasing, as illustrated in Figure 2.

3. In the Layers palette, click the layer effect icon and select Gradient Overlay, like I've done in Figure 3.

4. For a simple gradient, change the Blend Mode to Multiply and lower the Opacity to about 40%. Click OK. (The Multiply blend mode allows the black/white gradient -- which you can see in the color patch -- to simply darken the existing color. Lowering the opacity keeps the color from getting too dark.)

5. Figure 5 shows the completed gradient effect on the rectangle. What's particularly handy is the fact that you can edit the effect at any time by double-clicking the effect icon (circled below) next to the layer name in the Layers palette.

Variations

• Set the blend mode to Screen in the Layer Style dialog box. This will lighten the base color instead of darkening it.
• Click the gradient color patch in the Layer Style dialog box to edit the gradient. Drag the bottom color sliders to adjust how quickly the gradient fades.
• Set the blend mode to Normal in the Layer Style dialog box, and click the gradient color patch to edit the gradient. You can pick one of the preset gradients, or edit and add color patches to the bottom of the gradient editor to create your own customized gradient. If you set the blend mode to Normal, the custom gradient completely overlays your shape, so it doesn't even matter what the original color of your rectangle was!
• You can apply a Layer Style to any layer, not just to rectangles. This means that you can apply this technique to rounded rectangles, circles, stars -- you can apply a gradient overlay to anything that you create on a layer.

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.

Subtle Reflections

Now that you have some great backgrounds, let's apply some Web 2.0 effects to text and objects. One of the effects you may have seen a lot of is the standard reflection. This effect can be created with either a text layer, shape layer, or a graphic layer.

1. The first step is to duplicate your layer. Drag on the layer in the Layers palette and drop it on top of the "new layer" icon at the bottom of the palette (shown in Figure 16).

2. This creates a copy of the layer, which you can now flip upside down. With the copied layer selected, type Ctrl-T (Command-T on Mac) to "transform" the shape. You'll see a boundary box with handles on the corners and sides appear around your layer. Click on the top handle and, holding the Shift key, drag downward to flip the text vertically like that shown in Figure 17.

3. Double-click inside the bounding box to commit the transformation, then change to the Move tool (V) and move the layer up to meet the bottom of the original layer. Lower the opacity slightly, as I've done in Figure 18.

4. To add another level of visual interest, add a layer mask to fade out the bottom part of the reflection. Click the Add Layer Mask icon at the bottom of the Layers palette. As shown in Figure 19, you'll see a linked blank square attached to your layer.

5. Set your foreground color to black and select the gradient tool (G), choosing the Foreground to Transparent option in the options bar.

6. Click on the white mask thumbnail in the Layers palette to make sure you're going to edit it, then click a little below the bottom of your reflected layer. Hold the Shift key, and drag upwards until you're just about at the top of your layer. Release your mouse button, and you'll see that a gradient has been completed on the mask layer, as shown in Figure 21. The black areas of the mask hide the layer, so the gradient effectively fades out your reflected layer.

Tip: You can add a layer mask to any layer for a similar faded effect. Or, add a layer mask and then use a paint or shape tool to hide part of a layer -- black will completely hide the area you paint, and different shades of grey will provide different levels of opacity!

Glassy Objects

Glassy buttons and bars are another common way for Web 2.0 sites to add eye candy to a design. Let's start with an easy glassy bar.

1. Start with an existing rectangular shape for the base of your bar. This can be a solid color, but for added depth you may want to start with a gradient bar or even a slightly transparent bar like the gradient rectangle that we created earlier.

2. Draw a white rectangle shape that's slightly shorter than the base shape. This is your highlight layer.

3. Add a layer mask to fade out the bottom portion of the highlight layer, and lower the opacity to achieve a glassy highlight effect:

Creating a basic glassy button or shape involves a similar process -- start with a gradient shape layer, add a white highlight layer with an appropriate shape that's slightly smaller, then fade out the highlight layer with a layer mask. If you'd like to see a step-by-step description of how to do this, check out the excerpt from my book [1], The Photoshop Anthology [2], which uses a few different examples to describe how to create glassy buttons.

Summary

In this article, we learned a number of Photoshop techniques for creating Web 2.0 visual effects.

As you can see, creating these effects for your own site is very easy! In the next article [3], we're going to add a few more techniques to our arsenal, so that you can ensure your site designs are modern and slick.

I've also created a master document that you can download [4], which includes all of these effects so that you can pick apart the layers and layer styles to better understand how it's all done.

[1] http://www.sitepoint.com/article/web-domination-photoshop/17/
[2] http://www.sitepoint.com/books/photoshop1/
[3] http://www.sitepoint.com/article/web-2-0-effects-photoshop-2
[4] http://www.sitepoint.com/examples/photoshop/document.zip