Plastic Button

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.

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 here.
  2. Add a dark green, 1px stroke layer style to your button, as shown below.
  3. Add an outer glow using a bright version of the button color, as shown below.
  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.
  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.

  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. You may need to zoom in for this.

  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.

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

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

  10. Hold down Shift and drag the selected points up to make a thin strip, as shown below -- 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 here.

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

  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 this completed button.

This entry was written by Damodharan and posted on 1:05 AM and filed under Bookmark the permalink . Follow any comments here with the RSS feed for this post . Post a comment ( in a new window )

0 comments

Make A Comment
Subscribe to: Post Comments (Atom)