Developing Webs logo
Google
Web DW-Main DW-Photoshop
Visit the message board for solutions or post a question Check out the Classes offered for free at Developing Webs Voice Chat submit a tutorial, resources, article, font for publication consideration and earn a one way link back to your site Get more specifics about the Developing Webs Voice chat room and its room members View the current news at Developing Webs alternative sites which are resources for your d3evelopment needs Join Developing Webs Chat Link to us on your web page to help support this resource! Check out Developing Webs At yahoo groups! Developing Webs Home Adobe Photoshop Tutorials Macromedia Flash Tutorials Jasc Paint Shop Pro Tutorials Adobe Illustrator Animation basics Some Basic PHP tutorials Perl Tutorials HTML Tutorials Cascading Style Sheets javascript Front Page Tutorials Macromedia Dream Weaver Tutorials dreamweaver Publishing your site, FTP, ChMod, Promotions Tools to help you create your site Free and shareware fonts to download Photographs to use in your projects Shop for your site needs Free Online classes REcommend this site to others Log in or edit your information when logged in Developingwebs Log Out Change My Account details and preferences
RSS Newsfeed
for your site
DW News
Calendar
DW Forum
Right click on button and copy shortcut

Add to My Yahoo!

Reminder
Remember to book mark this site!



Request a Tutorial

Clear Plastic Button

1. Start by opening a new image
  • 200 wide
  • 200 high
  • RGB mode
  • 72 pixels per inch resolution
  • white background.

Make sure rulers are showing and set to pixels. If you need to display the rulers, click window=>showrulers. You can change the unit of rulers by right clicking the rulers on the image and select pixels as your unit.

 2. Create a new layer (Layer 1) and using the Rectangular Marquee Tool , draw a rectangle about 100 wide x 30 high.


 3. On the layers panel, click on the channel tab and create a new channel (Alpha 1) by clicking on the icon at the bottom just to the left of the trash can.

With the fill tool , fill your selection with white.
 

4. Deselect (ctrl + D) and go to Filter > Blur > Gaussian Blur and use a setting of 3.5. Click OK.



 5. Next go to Image > Adjust > Levels and enter the following input levels: 127, 1.00, 141. Click OK. Your button should look nice and smooth.


 6. Hold ctrl key and click on "Alpha 1" to reselect. Then click on the layers tab without losing the selection.

 7. Click on Layer 1. Hit the D key to reset your color swatches to black/white. Then set the foreground color to Hex #D4D6D4 which is a light grey.

Select the gradient tool and make sure it is set at foreground to background and drag from the top of your button to about 2/3 of the way down to the bottom.
 

 8. Add a new layer (Layer 2). Change the foreground color to Hex #C0C0C0 and go to Edit > Stroke. Make sure it is set for 1 pixel and the location is "center".
 

 9. Choose the rectangular marquee tool again and use it to move the selection upward so that only a very small strip is overlapped. Create a new layer (Layer 3). Fill the selection with white.

10. Click on the channels tab and holding ctrl key, click on "Alpha 1" to load the selection.

11. Click the layers tab and go to Select > Inverse. Hit delete. Deselect (ctrl + D).

12. Go to Filter > Blur > Gaussian Blur and set to 0.3. Click OK and set the opacity of the layer to 74%.

13. Click on Layer 1 and go to Layer > Layer Style > Inner Shadow. Set the following:

  • Mode = Multiply
  • Opacity = 53%
  • Angle = -45
  • Distance = 2
  • Choke = 0
  • Size = 1


14. Set Layer 1 opacity to 60%.

You can also use different shapes like squares, circles, or ovals.


Adding Text

 1. Choose a font to use (I used Chisel Condensed) and set it to about 24 pt. Hit the D key to reset the color swatches so that black is the foreground color.

 2. Type in "Plastic" (or whatever you like) on the button. If it is not centered on the button, you can use the move tool to put it there.

 3. Go to Layer > Layer Style > Drop Shadow and use the settings from #13 above. Click OK.

 4. After adding the text, you can go to Image > Adjust > Hue/Saturation to chage the color hue or click on the background layer and change the foreground color (AD1919) and using the fill tool, fill in the background. This will show an icy clear looking botton. Voila!

Modifications

  • Colorized purple with 0 saturation, 0 lightness. Set a purple background.


"Building The Web Into a Nicer Place -- One Site At A Time"
Developing Webs Group Copyright © 2001-2008 All Rights Reserved
Privacy and Legal