Creating Web 2.0 Effects With Photoshop, Part 1

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, The Photoshop Anthology, 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, 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, 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.