Creating Web 2.0 Effects With Photoshop

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.
Figure 1. Selecting a base color (click to view image)
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.
Figure 2. Drawing a colored rectangle (click to view image)
3. In the Layers palette, click the layer effect icon and select Gradient Overlay, like I’ve done in Figure 3.
Figure 3. Adding a gradient overlay to the rectangle (click to view image)
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.)
Figure 4. Changing the gradient overlay settings (click to view image)
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.
Figure 5. The final gradient (click to view image)
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.