Discussion

Since we created this aqua button using vector shapes and layer styles, we have a scalable button that's easy to edit. If we want to change its colors, all we have to do is change the colors of the gradients and effects in our layer styles. If we want our button to be slightly longer, we can use the Direct Selection Tool (4) to modify the vector path.

This solution has demonstrated an important concept about layers: even when the fill of a layer is set to 0%, the layer styles still show up! You may find this useful when you're creating your own effects.

Another cool thing about this technique is the fact that once you've created your first aqua button, it's very easy to create other buttons— you just have to copy the layer effects. I'll quickly show you how you can make a rectangular aqua button in a few simple steps.

1 In the Layers palette, create the layers you'll need for the rectangular button: the base button layer, the highlight layer, and, if you're planning squabuttonl psd

C OUILOI

ii tent

100% J1

MOfTT^i:

sMaoo'/i k

9

T Lll aqua ut I v^ Klt :

®

Ml ® | highlight 9 '

:9

1 T | button test © *

9

|, I button 9 "

9

T LU rounded: rectangular-. J

B

^^ $ [:i-1| emboss

:9

BB III highlight I

^ftt^-ajj^^-j-btittni-i" V

Copying styles to another layer on using the embedding effect, an emboss layer, as shown above. To copy the layer effects from the original aqua button to the rectangular button, hold down Alt (Option on a Mac) and drag the layer style icon from the original button layer over to its corresponding rectangular button layer, as shown in the image above.

Change the fill of the highlight layer to 0%.

Add the button text and repeat step 2 to copy the drop shadow style we used for the original text.

i® aqiiiihiiMotll. [istl . fTJInjlffil

That's it! Your rectangular aqua button is ready to be used, and should look like the one on the page opposite.

OUUOI1 E0*t

Layer style applied to button layer i® aqiiiihiiMotll. [istl . fTJInjlffil

QL

Layers ' channels 1 Paths

WfS

Normal % lOpacitySloWi [j

.Libel;.; □ J" * a flitoW, U

9

T

_!' aqua on white

to

9

M i ["j highlight

o-

9

| T button teift

o

9

BBillbutton

•u

9

T

_ij '.'ruiifel tttl-dfiju j:

=

111 |i-| emboss

•u

_l.s ||=. highlight

9

| |i-1 button ^

v

» S. J3 ©. -i JJ

9

Button layer with styles applied

Layer style applied to highlight layer

. CJ e. -I B 8 I Highlight layer with styles applied

Layer style applied to highlight layer

. CJ e. -I B 8 I Highlight layer with styles applied

The final rectangular button, and the rounded button on which it was based
0 0

Post a comment