Solution

1 Start with a rounded vector button. We're going to be adding a gradient overlay to it, so its color's unimportant—use any color you like! The first step is to apply a gradient overlay to our button. Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Gradient Overlay from the menu that appears.

Applying a gradient overlay to the button

In the dialog box, set the angle to 90° (shown above) and click on the Gradient patch to display another dialog box for the Gradient Editor, shown opposite.

Changing the gradient settings

Let's change our gradient settings using the Gradient Editor. Double-click on each of the tiny color patches below the gradient bar to change its color. Create an aqua-to-blue gradient by setting the color of the patch on the left to aqua (#3cc9e2), and the color of the patch on the right to blue (#1160c2). Set the Location of the aqua patch to 25%, and click OK to apply the gradient. Back in the Layer Style dialog box, click on Inner Glow. Set the Blend Mode to Normal, the Opacity to 50%, and the Size to about 10px, depending on the size of your button. Click on the color patch and change the color to a dark blue, as shown in the example below—I've used #003298.

Applying an Inner Glow layer style

Next, we'll apply a slight glowing effect. Click on Outer Glow. Change the Blend Mode to Normal, the Opacity to 50%, the Spread to 4%, and the Size to 5px (you might need to tweak these settings to suit the size of your button). Change the color patch to a bright aqua color, as shown below—I've used #00bae8.

Applying the Outer Glow layer style

6 Click OK to apply all the styles.

7 To create the button highlight, duplicate the button layer by pressing Ctrl-J in the Layers palette (Command-J on a Mac). Turn off the Outer Glow and Inner Glow styles for this layer by clicking on their corresponding eye icons, as shown at right.

8 Double-click on the Gradient Overlay style name in the Layers palette. The Layer Style dialog box will appear, with Gradient Overlay selected. Click on the Gradient patch to bring up the Gradient Editor.

Turning off the layer styles of the highlight
Editing the gradient

9 Double-click on the color patches underneath the gradient bar in the Gradient Editor and set them both to white.

10 Click on the patch above and on the left-hand side of the gradient bar— this is the left opacity stop. Set its Opacity field to 0%, as shown at right.

11 Click OK to exit the Gradient Editor, and again to apply the new style.

12 In the Layers palette, change the fill for the shape to 0%. This will allow the button on the bottom layer to show through, as shown at right.

13 With the highlight layer selected, open Edit > Free Transform or press Ctrl-T (Command-T on a Mac).

A bounding box will appear around the highlight. Click on the bottom edge of the bounding box, and drag it upwards to squash the highlight a little bit.

Step 10: Creating a white-to-transparent gradient
Step 12: Changing the fill of the highlight layer

Step 14: Transforming the highlight layer

14 Next, click on the right- and left-hand sides of the bounding box, and drag the edges of the highlight until they are just inside the button layer. Your highlight layer should look something like the one shown in the graphic at right. Apply the transformation by double-clicking inside the box, or pressing Enter (Return on a Mac.)

Step 14: Transforming the highlight layer

15 Switch to the Direct Selection Tool (4). Click and drag the bottom edge of the highlight path upwards to flatten it, as shown below. Use Ctrl-+ (Command-+ on a Mac) to zoom in if you need to.

Changing the shape of the highlight

Changing the shape of the highlight

16 We're finally ready to add the text! Create a text layer in between the highlight and button layer and type in your text. I've used a dark blue color for mine. I've also added a subtle drop-shadow style to my text using the settings shown in the example below.

Layer Style @

Style;

Biding .Options: Defaiflt M Drop Shadow

□ CiUter:ijlow neovrl irici Emboss □Contour □Tea'tute □Satin-ncolor-Ovg^y

□ Gradient Overlay

Applying a drop shadow to text

17 At this point, we've got a snazzy aqua button that will work well on most web sites, but since we've made a habit of taking things those few steps further, why stop now? Let's make our button look like it's been embedded into the page. Duplicate the button layer and drag it to the top, above the other layers. Let's call this top layer emboss; your Layers palette should now look like the image shown at right. Duplicating the button layer

Layer Style @

Applying a drop shadow to text

Layer:; ' r.t

an

lels

Paths

W LiJ

formal

v Opacity: igo°/( >

Lock: □ j *t a

Fill:

100% ►

9

&

s

emboss T

A-

Si

a

H

highlight

T

button text

®

i

HI

button

1

H

Ol

©, —i

il Ti

18 Hide all the layer styles on our emboss layer by clicking their respective eye icons in the Layers palette. Open the Layer Style dialog box by clicking on the Add a layer style button at the bottom of the Layers palette and selecting Bevel and Emboss... from the menu that appears. Select Pillow Emboss from the Style drop-down menu and change the technique to Chisel Hard. Set the Size to 2px and the Angle to 90°.

19 Towards the bottom of the dialog box you'll see opacity fields for Highlight Mode and Shadow Mode.

Set these both to 93%.

20 Finally, apply a stroke to the edge of the button. You should be familiar with this by now! Select Stroke from the Layer Style dialog box and give your button a 1px black stroke with 60% opacity, as shown in the dialog at right.

21 Click OK to apply the layer styles.

Applying the Bevel and Emboss style
Adding a Stroke layer effect

kJ

Layers ' OaannBlsXPathsX.

Normal Y Opacity: 100°/, | ■

Lock: ./ + a M[ 0% >

a

[TTj I WB emboss S -

A

«s Effects

=

Outer Glow

-I

Inner Glow

9 Bevei and Emboss

Gradient Overlay

» Stroke

ss Q, oj _i ii -a

Changing the fill of the emboss layer

Changing the fill of the emboss layer

22 Let's change the Fill of the emboss layer to 0%, as shown at left, so that the button layer beneath it can

Our embedded aqua button is complete! The image at right shows our normal and embedded aqua buttons.

Completed aqua buttons

0 0

Post a comment