Plastic buttons « Design « Photoshop Tutorials

Home
Photoshop Tutorials
1.3D
2.Animal Creature
3.Animation
4.Background Cover
5.Color
6.Design
7.Effect
8.Hardware
9.Holiday Event
10.Human
11.Image Format
12.Logo
13.Nature
14.Object
15.photography
16.Shapes
17.Text
18.Textures
19.Tools
20.UI Controls
21.Web
Maya Tutorials
3ds-Max Tutorials
Illustrator Tutorials
GIMP Tutorials
Photoshop Tutorials » Design » Plastic buttons 

Under Layer Style(Layer > Layer Style) add a Gradient Overlay and Stroke blending options to your icon text layer. Then set the text layer's blending mode to Darken.

We're going to give our transparent plastic buttons some color here. I think it creates a better effect than just using plain white (ala the 'iMac' Web site). At the end of this tutorial though, I'll explain some variations you can get; including fully transparent.

Submitted by Martin on 2006-03-22 21:22:17. Since then read 10572 times. Scored 4.07 points out of maximum 5 by 14 votes.

Finally, apply a Bevel and Emboss. Depth should be 200%. Direction should be Up. Size to 5 and Soften to 0. Set the angle to 90 degrees as well. Change the color of the shadow mode to the same color as your stroke. Now add whatever text you want onto the button to finish it. Apply a light drop shadow onto the text and you're done.

Learn to draw nice looking plastic web buttons with this tutorial. Final output of the tutorial can be seen below :

A straightforward plastic button with several variances on creating highlights and sheens, it's not difficult to reproduce. However, whenever you're trying to create a glass or plastic fx, think about where the light is coming from, and the shadow dropping to. Anyways, enough from me, let's get on.

[1] Take a new file of 500 pixels,500 pixels, of resolution 72 dpi in the RGB mode.

The first step is to make a new image, about 200x200 px. depending on how big you want your nav to be. Use the square selection tool to make a rectangular selection like the one below.

w___w_w__.__j___a___v__a2___s___.__c__om | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.