Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Adding the Highlight
The next element that the rounded rectangle needs is a highlight across the top (you use the copy of the rounded rectangle you made earlier). This process requires four steps (described more fully in the following sections):
Rename a layer so you don't confuse them.
Change the gradient from blue-to-white to white-to-black.
Resize and highlight the rectangle.
Reposition the highlight rectangle.
Renaming the Layer
To make sure you don't confuse the two rectangles, change the name of the bottom rectangle before you begin working with it.
Double-click the name of the bottom rectangle in the Layers panel. It becomes editable. Type Highlight; then click outside the Layers panel. Your layers should look like the ones in Figure 15.
)
Figure
15 Changing the name of a layer.
Changing the Gradient to White-to-Black
Select the Highlight layer, which contains the copy of the rectangle. Click the color fill box and then select White, Black from the Preset dropdown menu, as shown in Figure 16.
)
Figure
16 Selecting and applying a white-to-black gradient.
The copy of the rectangle on the Highlight layer has a white-to-black gradient applied to it.
Resizing the Highlight rectangle
Now you can resize the Highlight rectangle so it's slightly smaller than the blue-to-white one. Click Modify, Transform, Numeric Transform. (You can also press CTRL+SHIFT+T; Mac users can press Command+Shift+T.)
The Numeric Transform dialog box appears. At the very bottom of the dialog box, uncheck the box labeled Constrain Proportions; then set the width to 95% and the height to 65%, as shown in Figure 17. Click OK for your settings to take effect.
)
Figure
17 Resizing the Highlight rectangle.
Repositioning the Highlight Rectangle
Your Highlight rectangle is now smaller. The next step is to position it above the blue-to-white rectangle. To do that, follow these steps:
In the Layers panel, drag the Highlight layer above the Rectangle layer, as shown in Figure 18.
Figure
18 Placing the Highlight layer above the Rectangle layer.Next, position the Highlight rectangle directly above and near the top of the blue-to-white rectangle, as shown in Figure 19.
Figure
19 Positioning the Highlight rectangle correctly.Drag the gradient up to increase the amount of black in the gradient (refer to Figure 19).
)
Figure
18)
Figure
19Changing the Blend Mode
The last step necessary to complete the highlight is to change the blend mode, which controls how light affects the image.
With the Highlight layer selected, click the Blend Mode popup menu in the Property inspector and select Screen (see Figure 20).
)
Figure
20 Changing the blend mode from Normal to Screen.
The image now looks like the one shown in Figure 21.
)
Figure
21 The Aqua button.