Web Domination Using Photoshop

Rounding the Corners of a Photo

Solution

1. Select the Rounded Rectangle Tool (U) and choose the Paths option, as shown here.

Choosing the Paths option

2. Use this to create a rounded rectangle path over the image. You can view the path in the Paths palette.

Creating a rounded rectangle

3. Select Layer > Vector Mask > Current Path. Photoshop will create a vector mask using the rounded rectangle path you just created. The example here shows the new vector mask in the Layers palette. You can use the Direct Selection Tool (A) to modify the path and change its shape.

Creating the vector mask

Masking Multiple Layers with the Same Shape

Let's say that you have multiple layers and you want them to be masked with the same shape. You could create a layer mask for one and then duplicate the mask for each layer, but what if you want to change the shape layer later? If you were motivated enough, you could go through each layer and modify the shape mask ... but why would you bother when you could easily halve the time that job would take using the clipping mask?

Solution

In this solution, I'll start with an interface design for a simple web site. It has a header bar, a menu bar, and a content area as shown in the example here.

Web site design

I'll paste in the flower images that I blended together earlier in this chapter. As you can see in the example below, the images are bigger than the header area. I want them to be contained within the header region, but I still want to be able to move them around. The solution may seem simple at first -- a layer mask on each layer will do the trick. But what if I decide to change the header height later? Then I'll have to modify all the masks.

Images for header area

Enter the clipping mask. First, your document must have a shape layer that contains the shape of the "masking" area. Put the layers you need to mask directly on top of this shape layer.

In the Layers palette, move the cursor to the boundary between the shape layer and the layer above it. Hold down the Alt key (Option on a Mac). The cursor will change into two overlapping circles, as shown in this example.

Holding the Alt (Option) key changes the cursor

Click once. The top layer will be clipped by the bottom layer. If you examine the Layers palette, you'll notice that the thumbnail for the top layer now has a black arrow next to it, and our shape layer's name is underlined.

Clipping one of the layers with another

Now let's do the same with our second image. Move your mouse up to the edge of the next layer in the Layers palette, hold down Alt and click.

Clipping another layer

Both layers have now been clipped by the base layer, as shown in the example below.

Creating a clipping mask for multiple layers

You can move the individual layers around, and they will remain clipped by the shape of the base layer. The image below illustrates this point.

Moving a layer with a clipping mask

As a final flourish, I'm going to use the solution from "Fading an Image into the Background" to fade the right edge of the second flower into the background. Our final result is shown below.

Adding a layer mask

Discussion

A clipping mask allows you to mask multiple layers using a single, editable mask that sits on its own layer. This mask will clip all the layers that sit above it, which saves you from needing to create multiple layer masks based on the same shape.

The clipped layers inherit the base layer's properties. So, for example, if the base layer has a 50% opacity, the clipped layers will also have 50% opacity.

To unclip layers, hold the Alt (Option) key and click below the layer you wish to unclip. All the layers above it will be unclipped.

Making a Dotted Coupon Box

You've probably seen dotted coupon boxes before, and saved a good dollar or two by using them! This solution shows you how to create a couponstyle
box with dotted borders using customized brush strokes.

Loading square brushes

Solution

1. Select the Brush Tool (B).

2. Open the Brushes palette. Click on the small arrow in the top right-hand corner and select Square Brushes. A dialog box will appear, asking you whether you want to replace or append to the list of brushes you currently have displayed. You can always restore your original brush settings by selecting
Reset Brushes... (click Append if you'd rather add the default brushes to your
current list, otherwise click OK.)

3. Choose Brush Tip Shape and select a square brush whose diameter matches the length you want each dotted stroke to have. If the size is not quite right, you can adjust it with the Diameter slider as shown in the image on the right.

Modifying brush tip shape options

4. Increase the Spacing slider until the spacing between brush strokes works for you.

Changing the height of the stroke

5. You might want to squash your brush so that it's more of a rectangle. Click on the top or bottom point of the circle in the dialog box and drag it towards the horizontal axis until the stroke looks similar to that in the image at left.

6. Check the Scattering checkbox and change the scattering amount to 0%.

Changing the scattering amount

7. Right. Now you're ready to draw your box! Choose a foreground color for your dotted line. Create a new layer, hold down the Shift key, and drag across your document to draw a horizontal line.

Drawing a dotted line

8. Next, return to the Brushes palette and drag on the horizontal axis arrow to rotate the brush by 90 degrees (or type 90 in the Angle textbox).
This will allow you to draw vertical strokes.

Rotating the brush

9. Hold down Shift and drag the mouse down to draw a vertical line.

10. Rotate your brush back to zero, and draw your second horizontal line.

11. Complete your box by rotating the brush to 90 degrees once more and drawing the last vertical line.

Finished coupon box