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 greys 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.

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.

Reflections

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

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.

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.

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:

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:

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].

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.

You can now read Web 2.0 Design Kit Part 2.

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 (82.5kb ZIP).