Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Plastic Tabs

Plastic Tabs


Create those smooth clear plastic buttons first seen on Apple.com.

1. OK, start with a new image about 400x400 px with a white background. Start by creating a new layer and using the Rectangular Marquee draw a rectangle roughly the size of the picture opposite.

Picture 1

2. Click the Channels tab and create a New Channel. Fill the selection in with white. You can now deselect (CTRL +D). Now go to Filter > Blur >G aussian Blur and use a setting of about 3.5 Click OK. Next go to Image > Adjust > Levels and drag the two bottom triangles towards the center until the button looks nice and smooth (see image). Click OK when done. OK hold CTRL and click on the channel "Alpha 1" to select it. Click the Layers Tab. Do not lose the selection.

Picture 2

3. Now set your foreground color to: R:212 G:214 B:212 and the background to white, using the Linear Gradient tool (foreground to background), drag from top of the selection to the bottom, so it looks like what I have opposite. Now create a New Layer and set your foreground color to R:192 G:192 B:192 and go to Edit > Stoke for width choose 1 pixel and for location choose Center. Do not deselect yet.

Picture 3

4. Now, with the Rectangular Marquee selected, move the selection up to the top of the button so that it overlaps slightly (see picture). Now Create a new layer and fill that selection in with white. Now click on the Channels palette and Hold CTRL and click on "Alpha 1" to load the selection. Click the Layers tab and now go to Select > Inverse. Hit delete. press CTRL +D to deselect. Now go to Filter > Blur > Guassian Blur and use a setting of 0.3. Click OK and set the Opacity of that layer down to 74.

Picture 4

5. Now it should be looking good, but to add to the effect add a drop shadow to the layer with the original button shape on it (in my case Layer 1) go to Layer > Effects > Inner Shadow and use the settings shown opposite. That's it, you should have a nice plastic tab ready to add some text to.

Picture 5

6. So add some text to the buttons, you can also add a very faint drop shadow to the text for a nice effect. To change the color go to Image > Adjust > Hue/Saturation. If yours didn't work just download the .psd file.

Picture 6

7. Apply the same tutorial to other shapes, you'll get some neat effects. Click here to download the PSD file.

Plastic Tabs Tutorial: Final Result



Author's URL: Robouk
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Plastic Tabs"

Only registered users can write comment

No comments yet...