In this tutorial you’ll learn to create the smooth clear plastic tab buttons first seen on Apple.com. Over the years plastic tabs like these have become incredibly popular—try using them in a horizontal top menu for your site, along with the sliding doors technique [1] for a great usable menu system.
Step 1
Start with a new image about 400x400px with a white background. Create a new layer and using the Rectangular Marquee tool draw a rectangle roughly the size of the example below.
Step 2
Click the Channels tab to enter the Channels Palette, and create a New Channel. Fill the selection in with white, then deselect by pressing Cmd+D (PC: Ctrl+D). Now go to Filter » Blur »Gaussian Blur and use a setting of about 3.5, then 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. Hold Command (PC: Control) and click on the channel “Alpha 1” to select it, then click the Layers Tab. Do not lose the selection.
Step 3
Set your foreground color to #d4d6d4 and the background to white. Now, using the Gradient tool (foreground to background), drag from the top of the selection to the bottom, so that it looks similar to the example below. Now create a New Layer and set your foreground color to #c0c0c0. Go to Edit » Stoke - for width choose 1 pixel and for location choose Center. Do not deselect yet.
Step 4
Now, with the Rectangular Marquee tool 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. Click on the Channels palette, hold Command (PC: Control) and click on “Alpha 1” to load the selection. Click the Layers tab and now go to Select » Inverse. Hit delete. press Cmd+D (PC: 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.
Step 5
It should be looking pretty good at this point, but to add to the effect add a drop shadow to the layer with the original button shape on it (Layer 1). Also go to Layer » Effects » Inner Shadow and use the settings shown in the image below. You should now have a nice plastic tab ready to add some text to.
Step 6
Select the Type tool and add some text to your button. To give the text some extra depth, you can also add a very faint drop shadow to the text itself for a nice effect. To change the color go to Image » Adjust » Hue/Saturation. If you run into any trouble while attempting this tutorial, feel free to download a copy of the plastic-tabs.psd [2] file.
Step 7
Apply the same tutorial to other shapes—you’ll get some neat effects.
