Web 2.0 Design Kit

Web 2.0 is a term coined by O'Reilly describing the new trends in design and development appearing across a flood of innovative websites. This tutorial will show you how to create some of the more popular "Web 2.0" design effects using Photoshop.

Gradients

The reflective or glass effect was first popularized by Apple. There have been many tutorials about creating Apple's "Aqua Buttons" and this is a similar effect.

After making your selection, create a new Gradient Fill Layer Layer > New Fill Layer > Gradient... or use the Fill Layer button at the bottom of your Layers palette.

Click on the Gradient to bring up the Gradient Editor. Select the "Foreground to Background" preset from the list of presets. Click on the first Stop on the left and set the Location to 50%. Then set the color to something a little darker than your base color. I'm going to use grey's because it leaves me some flexibility for changing the color later.

Create another Stop to the left of the gradient and set the Location to 49%. Set the color to something slighter darker than the 50% Stop. Create another Stop at Location 0% and make it slightly darker than the Stop at 49%.

Press OK and you now have your gradient.

Click to enlarge

To add some color, create a new Solid Color Fill Layer Layer > New Fill Layer > Solid Color... or, again, use the button at the bottom of the Layers palette and select a color for the gradient. Press Ctrl + Alt + G or Layer > Create Clipping Mask to create a clipping mask of your new layer. Scroll through the Layer Modes Shift + - until you find one that you like.

Click to enlarge

Reflections

Reflections have become a huge trend for website design lately. We'll first start by selection the Type Tool T and entering the type we want to reflect.

Click to enlarge

Duplicate that text layer by pressing Ctrl + J. Drag the duplicated layer below your original in the Layers Palette. Right click on the duplicate layer in the palette and choose Rasterize Type.

With the duplicate layer chosen in the Layers Palette, press Ctrl + T to bring up the Free Transform. Right click in the transform binding box and choose Flip Vertical. Drag your flipped layer so that the bottoms match.

Click to enlarge

Add a Layer Mask by click on the button at the bottom of the Layers Palette or by going Layer > Layer Mask > Reveal All.

Press D to reset your colors and then press G to select the Gradient Tool. With the layer mask selected in the Layers Palette, which it should be already, drag from top-to-bottom with the Gradient Tool until you get the fade you desire.

Click to enlarge

You now have your type reflection. You can use the same method for any object also.

Soft Shadows

Another popular effect is the soft shadow. It's actually more of a glow than a shadow, so we will approach creating the effect this way.

Select the layer of the object you want to add the shadow to, in my case it's the gradient layer I created before, and click on the Add New Layer Style button (at the bottom of the Layers Palette) and choose Outer Glow.

Set the Blend Mode to Normal;
Color to Black or 000000;
Size to something like 8, and
Opacity to 35-40%.

You will now have a soft shadow that should look similar to this:

Click to enlarge

Star Shapes (Violators)

Another trend popping up is the star shapes or violator (thanks comment-er) for getting attention.

Click and hold on the Shape Tool until the sub-menu opens and choose the Polygon Tool.

Create a new Solid Color Fill Layer and choose whatever color you want your shape to be. Press D then Ctrl + Backspace to fill the layer mask with black.

Up in the Options Bar, click on the down-facing arrow to bring up your Shape Options. For my shape I checked the Star checkbox on and set the Indent Sides By to 20%. In the Options Bar I checked Anti-alias on and set the Sides to 20.

Now I'm ready to draw out my star:

Click to enlarge

Click to enlarge

To style it a little more, I used a Gradient Fill Layer instead of a solid color and I added a tight Drop Shadow Layer Style, settings: Opacity 60%, Distance 1px and Size 2px.

Click to enlarge

In the next installment of this 2-part series, I will show you how to create diagonal line patterns, rounded corners and some other Web 2.0 effects.

Master file download

I've decided to make my master .PSD file for these tutorials available for download.

Download the Web 2.0 Design Kit MAster PSD file here (82.5kb Zip).