4-4

#71ae07 #baf940 #e5feb4

Green rounded rectangle gradient button

Just choose a darker shade of your color for the color patch on the far right, a very light shade for the color patch on the far left, and a bright shade for the patch in between, as shown above.

Add a dark green, 1px stroke layer style to your button, as shown below.

Styles

Blending Options: Default

□ Bevel and Emboss

□ Color Overlay

0 Gradient Overlay

□ Pattern Overlay 0 Stroke

[ New Style... 0 Preview

Plastic button

Adding.a.stroke.to.the.button

3 Add an outer glow using a bright version of the button color, as shown below.

Layer Style

Styles

Blending Options: Default

□ Inner Shadow 0 Outer Glow

□ Bevel and Emboss

□ Color Overlay

0 Gradient Overlay

□ Pattern Overlay 0 Stroke

Outer Glow Structure

Blend Mode: | Normal Opacity:

Noise: J-0

Quality

Contour:

litter: fl-

ip&rtiMase^ 0

Adding an outer glow

Select the button layer in the Layers palette and duplicate it using Control-J (Command-J on a Mac). Right-click (hold Control and click) on the new layer and select Clear Layer Style from the menu that appears, as shown at right.

"ilplmticbntlon LtJBB

Changing the color of the shape layer

"ilplmticbntlon LtJBB

Layer Properties,,, Blending Options...

Layers channels ^

Duplicate Layer,,. Delete Layer

| Normal v](

Lock: □ j/ fl

Group into New Smart Object

» Effects

Rasterize Layer

Enable Layer Mask Disable Vector Mask Create Clipping Mask

» Outer 9 Qradier

9 Stroke

Link Layers Select Linked Layers

*

□ IDbu

Select Similar Layers

Copy Layer Style Paste Layer Style

Clear Layer Style |\

Merge Layers Merge Visible Flatten Image

Clearing the layer style

Clearing the layer style

Changing the color of the shape layer

Change the Opacity of this layer to 50%, and double-click on its color patch to open the Color Picker. Set the color of the shape to white, as shown above. Now, click on the vector shape for the same layer in the Layers palette. Using the Direct Selection Tool (4), click on the bottom line of the rounded rectangle and drag it up a little bit, as shown at right. You might need to zoom in for this.

Editing the vector shape

Still using the Direct Selection Tool (4), click on the bottom-left anchor point so that you can see the handlebars of the point (zoom in if you need to). Click on the bottom handlebar, hold down Shift, and drag the handle up to curve the corner.

Repeat step 7 with the bottom-right point. The sides of your shape should now look like those shown at right.

Curving the corner

Curving the corner

Shape after modifications

Selecting multiple points for editing.

Shape after modifications

Making the highlight strip

Making the highlight strip

9 With the Direct Selection Tool (4), click and drag the mouse to make a selection that captures all of the bottom points, as shown in the image to the left.

10 Hold down Shift and drag the selected points up to make a thin strip, as shown at right— this is our highlight. Fine-tune the movement using the up and down arrow keys if you need to.

11 Select the highlight layer in the Layers palette and duplicate it using Ctrl-J (Command-J). Select Edit > Transform > Flip Vertical to flip the duplicated layer.

12 Use the Move Tool (v) to move the flipped highlight to the bottom of the rectangular button, as shown at right.

13 We're almost there! Now duplicate the button shape layer and name it middle highlight. Change the Adding bottom highlight color of the shape to white.

14 Select the bottom anchor points of the middle highlight shape and move them up to the center of the original button shape. Change the opacity of this layer to 25%, as illustrated in the image on the left.

Modifying the third highlight shape

Modifying the third highlight shape plastic button

15 Add a text layer immediately on top of the original button shape (beneath the three highlight layers) and type your text. If you like, add a drop shadow for an added three- The completed plastic button dimensional effect, as I've done for the completed button at right.

0 0

Post a comment