Photoshop Tricks; SEMI-TRANSPARENT RIBBONS

ONE OF THE best ways to add dimensionality to your web layouts is to include 3D effects like drop shadows, beveled edges, and layered transparency. In this exercise, you learn how to draw overlapping bubbles and ribbons of color with the Ellipse and Pen tools and then modify the blending mode and transparency of each to create dynamic 3D effects for your layouts.

STEP 1 Select File>New to open the New document dialog box. Under Preset choose Web, set the width to 960, the height to 768, and click OK.

STEP 2 Select the Pen tool and use the Shape Layers setting on the Control bar to ensure that you’ll be drawing closed shapes with editable color fi lls. Using the Pen tool, draw a ribbon-like closed shape, like the one shown in Figure 4-1. Don’t worry too much about being perfect as you draw; you can always adjust the curves and anchor points using the Direct Selection tool (A) aft er closing the shape. With a shape layer, you can easily adjust the color of your new shape through the Layers panel.

INTERNET HINT: Need to brush up on your Pen tool skills? Try this resource: http://psdfan.com/tutorials/drawing/become-a-master-of-the-pen-tool-inunder-30-minutes/

.

STEP 3 Next, draw a second, similar shape slightly overlapping the fi rst one. To see how this second shape interacts with the fi rst one, adjust the second shape’s opacity down to about 80%, as illustrated in Figure 4-2.

STEP 4 To create the 3D overlapping soft shadow effect, apply the Inner Glow Layer Style to the second shape using the Layer Style button at the bottom of the Layers panel. When the Layer Style dialog box opens, change the blending mode color to a dark gray, adjust the opacity down to about 50%, and set the blending mode to Multiply. To deepen the shadow effect, adjust the choke and size to your liking. For instance, you might set the choke to 23% and the size to 10 px.

STEP 5 To add further defi nition, give your shape a 1–2 px light gray stroke and add a gradient overlay using the Screen blending mode with an opacity set to about 40%. If desired, adjust the angle to set the direction of the gradient to your liking. Click OK to save these settings. Your image should now look something like the example shown in Figure 4-3.

STEP 6 Next, copy this layer’s style by right+clicking/+clicking on the layer’s Layer Style icon and selecting Copy Layer Style from the layer’s context menu. To paste this layer style onto your first shape, select the first shape’s layer and choose the Paste Layer Style option from the layer’s context menu.

STEP 7 Continue creating additional ribbon shapes as needed following this same method as well as circular shapes using the Ellipse tool, changing the color, blending mode, opacity, and other settings as desired, as illustrated in Figure 4-4. Feel free to improvise and don’t be afraid to speed things along by duplicating any existing shape layer and then adjusting the new layer’s attributes through the Layers panel.