Making Chrome Plastic Buttons
Skill level: Intermediate
Programs used: Photoshop 6
|
| Buttons are always a source of interest in interfaces, and
need to be eye-catching in order to make people click them and continue
on with viewing your site. Plastic buttons are best contrasted by using
the opposite texture, metal, as a background. |
1. Create a new canvas, about 250 x 100 pixels, with a transparent background.
Using the Rectangular Marquee tool 
make a selection in the middle of the canvas. The size of my selection was
220 x 60 pixels. |
 |
2. Now select the Gradient tool 
and now double-click on the long thin gradient in the tool bar (where the
red arrow is below) to open the Gradient Editor. |
 |
3. Now you need to make a gradient which will resemble a pipe, so create
a gradient using the same colours and stops as I have below:
The dark grey color has an RGB value of (51, 51, 51) and the light grey
has an RGB value of (204, 204, 204). Press "OK". |
 |
| 4. Now create the pipe by left-clicking and dragging from the top to bottom
of your selection. Holding down "SHIFT" will ensure the gradient
is straight. Deselect by selecting the "Select>Deselect" menu
command or pressing "CTRL+D". |
 |
| 5. Before we make the plastic button, an indent into the pipe must be
made to give the impression that the button is set back into the pipe. This
can be done by selecting the Rectangular Marquee tool
and selecting a small area inside the pipe. The size of my marquee was about
90 x 40 pixels. |
 |
6. Next we must simulate the curve of plastic by smoothing the selection
and getting rid of the sharp corners. This bit can be tricky to understand,
so hang in there. Save your selection by going to the channels palette (click
the channels tab next to the layers tab) and clicking on the save selection
button  .
You should see a new channel being created called "Alpha 1". Click
on this channel and your canvas should now display a balck and white image
of your selection. |
 |
| 8. Now deselect by selecting the "Select>Deselect" menu command
or pressing "CTRL+D". You will need to use the "Gaussian
Blur" filter as a pre-cursor to creating nice, rounded corners. Select
the "Filter>Blur>Gaussian Blur" menu command and enter in
a value of 6.0 pixels. |
 |
| 9. Now you will need to adjust the levels to remove the blur and leave
a smooth cornered rectangle. Select the "Image>Adjust>Levels"
menu command or press "CTRL+L". Change the input levels as follows: |
 |
| This should make the image appear as so: |
 |
You can easily make rounded corners with the rounded rectangle tool, but
the corners will look different from these ones. Make a perfect selection
of the "Alpha 1" channel by holding down "CTRL" while
clciking on the channel in the channels palette
|
 |
10. Click on the layers palette and click on Layer 1. Rename this layer
to "Pipe". You will now need give the button you will make the
appearance that it is set back into the pipe: |
11. Make a new layer by pressing the "New Layer" button 
and call this layer "Inset". Select the Gradient tool
and now change your foreground and background colors to the light grey and
dark grey you used in the previous gradient. |
 |
| Now choose the gradient type as "Foreground to Background" and
hold "SHIFT" then left-click and drag from the bottom to top
of the selection. This will make the light appear to be coming from
the top of the canvas, so the top of the "Inset" will be shaded,
while the bottom will look like the light is hitting it. Don't deselect,
I just did so to make the image clearer for you. |
 |
12. Now for the actual button, you will need to contract your selection
by selecting the "Select>Modify>Contract" and enter a value
of 3 pixels. |
13. Make a new layer by pressing the "New Layer" button
and call this layer "Plastic". Now press "D" to reset
your colors, and then select a harsh blue as your foreground color, I chose
an RGB value of (210, 100, 80), while keeping the background color as pure
white. Drag a straight line gradient (hold down "SHIFT")
from top to bottom of the selection. Start a few pixels (say 3 or 4) above
the selection and end a few pixels below. Deselect by selecting the "Select>Deselect"
menu command or pressing "CTRL+D". |
 |
|
14. Now in the layers palette double-click on the layer called "Plastic"
to bring up the blending options window. Select to have a pure black stroke
of 1 pixel on the outside.
|
 |
15. To make the light appear as if it is hitting the top of the plastic
button, we must create the appearance of a bulge on the top of the button.
Make a new layer called "Bulge Highlight" and now make a perfect
selection of the "Plastic" layer. Now using the rectangular marquee
tool ,
hold down "ALT" and drag a selection over the bottom half of the
plastic. This will take away your new selection from the original. |
 |
| 16. Contract this selection using the "Select>Modify>Contract"
menu command, and enter in a value of 4 pixels. |
 |
17. Feather this selection by using the "Select>Feather"
menu command or pressing "ALT+CTRL+D" and enter in a value of
2 pixels. The feather allows the bulge to fade into the plastic better,
by adding opacity to the edges of the selection. Select the Gradient tool
and select pure white as your foreground color, and a lighter blue than
your plastic blue, I suggest an RGB value of (204, 100, 100). Drag a straight
line gradient from top to bottom of your selection, then turn the opacity
of the "Bulge Highlight" layer down to 80% in order for it to
blend in more. I find that the placement of this bulge is slightly out of
place, so select the move tool 
and using the cursor key, press up once to move the selection up 1 pixel.
Deselect. |
 |
| 18. Almost there! You can now see the definite 3D shape of the plastic,
but the bottom of the button lacks the illusion of light also hitting it
through the top of the button. Create a new layer called "Fade Highlight"
and make a perfect selection of the "Plastic" layer, this time
subtracting the top half from your selction. Contract this selection by
2 pixels, then making sure pure white is your foreground colour, drag a
straight line gradient from bottom to top of the selection. Turn
the opacity down to 30%. A small change in lighting, but important nonetheless. |
 |
19. Now just add some text to the top of the plastic by selecting the text
tool 
and clicking over the area of the button, then typing your text. Make the
text black, it is best to use thin fonts and to make it cover a third of
the button. Add a drop shadow using the blending options window, I turned
down the opacity to 60%, and changed the size to 2 pixels. The drop shadow
will further the illusion that light is shining on the top of the button
and hitting the bottom. |
 |
And that's it! You can change the color of the pipe by using the "Image>Adjust>Hue>Saturation"
and also make a rollover button by changing the color of the plastic and
bulge as I have done in the below example.
|
