Article

Web Domination Using Photoshop

Page: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Next

Making a Plastic Button

In this solution, we'll be using Photoshop magic to turn our friend, the basic gradient button, into a plastic button like the one shown here.

1551_plasticbuttontif
Plastic button

Solution

1. Start with a rounded rectangle gradient button that has a radius of 5px. You can change the radius in the Rounded Rectangle options bar. Use the color stops shown here in your gradient overlay layer style. If you're unsure of how to do this, look at the solution for "Making a Gradient Button." I've made my button green, but you can use different colors for yours if you like.

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 below.

1551_plasticgradientbutton
Green rounded rectangle gradient button

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

1551_plasticstroke
Adding a stroke to the button

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

1551_plasticglow
Adding an outer glow

4. 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.

1551_plasticcopylayertif
Clearing the layer style

5. 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 below.

1551_plasticchangeshapecolor
Changing the color of the shape layer

6. Now, click on the vector shape for the same layer in the Layers palette. Using the Direct Selection Tool (A), click on the bottom line of the rounded rectangle and drag it up a little bit, as shown here. (You might need to zoom in for this.)

1551_plasticchangevectorshapetif
Editing the vector shape

7. Still using the Direct Selection Tool (A), 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.

1551_plasticmovedirectionlinetif
Curving the corner

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

1551_plastichighlightlayertif
Shape after modifications

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

1551_plasticselectpointstif
Selecting multiple points for editing

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.

1551_plasticmovepointstif
Making the highlight strip

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 here.

1551_plasticmovehighlighttif
Adding bottom highlight

13. We're almost there! Now duplicate the button shape layer and name it middle highlight. Change the 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 this image.

1551_plastichighlight2movepointstif
Modifying the third highlight shape

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-dimensional effect, as I've done for the completed button here.

1551_plasticbuttontif
The completed plastic button

If you liked this article, share the love:
Print-Friendly Version Suggest an Article

Sponsored Links