Home > Articles

  • Print
  • + Share This
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):

  1. Rename a layer so you don't confuse them.

  2. Change the gradient from blue-to-white to white-to-black.

  3. Resize and highlight the rectangle.

  4. 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 15Figure 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 16Figure 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 17Figure 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:

  1. In the Layers panel, drag the Highlight layer above the Rectangle layer, as shown in Figure 18.

    Figure 18Figure 18 Placing the Highlight layer above the Rectangle layer.


  2. Next, position the Highlight rectangle directly above and near the top of the blue-to-white rectangle, as shown in Figure 19.

    Figure 19Figure 19 Positioning the Highlight rectangle correctly.

  3. Drag the gradient up to increase the amount of black in the gradient (refer to Figure 19).

Changing 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 20Figure 20 Changing the blend mode from Normal to Screen.


The image now looks like the one shown in Figure 21.

Figure 21Figure 21 The Aqua button.

  • + Share This
  • 🔖 Save To Your Account