Web-Style-Plastic Buttons!

Categorized Under: Photoshop 101

Hello everyone! In todays tutorial I will show you how to create a simple web-style logo (much like some of the flash website logo’s you see around) or a plastic-like button. There’s many ways to do this…. but here’s mine….

picture-52

Step 1: Create a new photoshop document and using the rounded-corner rectangle tool draw a square with a black foreground on your document. picture-16

Step 2: Open your layer effects panel and add a small bevel (22% I used), a black to red gradient and a black stroke around.

picture-21Step 3: As you can see, adding those effects won’t create the red circle-thingy I have. To do this create a new layer and select a lighter red. Using the circle tool draw right over the top of your box. Now holding ctrl (or apple) key select the thumbnail of your box layer. This is just to get the selection of your bottom box. Now go to Select –> Inverse and while on the top layer click delete. Then you MERGE THESE LAYERS. This will make your layer effects disappear. Your button now looks similar to mine.

Step 4: Using your text tool type a single letter on a new layer. Now once again ctrl click or apple click (on a mac) your TEXT LAYER, to get the selection for your letter. Now you can delete your text layer, BUT KEEPING THE SELECTION select your box layer and click delete. picture-62

Step 5: Once again, going into your layer effects add a slight inner shadow, another subtle bevel and a light drop shadow. That’s it! Please comment if this was helpful and email me some new tutorial ideas!picture-52

Leave a Reply