BarsClubsCoffee/CafeContact UsDevonshire QuarterHomeHotelsLeopold SquareMenusPhotosPubsRestaurantsSportTheatres etc.TransportWeatherWest Street
 

Photoshop - Shiny Plastic Button

There are many, many tutorials out there for buttons to include on your website. we think this is one of the better ones and will include some medium-level tips as well! See the result!

1. Create an new document 200 x 200 px, white background. Create a new layer!

2. With the Elliptical Marquee Tool and Shift pressed down, draw a perfect circle roughly in the centre of your image - largely to proportions as shown to the right.

Button outline
3. Fill this circle with R: 255, G: 125 and B:96 (Nice color!)
Still with the marching ants going, go to SELECT...Modify...Contract...6px.
4. With the Elliptical Marquee Tool still selected, use the keyboard arrow keys to move the selection down two clicks with the shift key pressed down (This moves the selection 10 pixels for each click. nudge selection
5. Now hold down Ctrl + Alt and click once on the "circle" layer within the layers palette. This is a useful PS tip - it deselects an area of the circle selection and leaves just the area shown to the right. delete selection
6. Now with the Shift key pressed down, press the Up arrow key twice.
7. Create a new layer and SELECT...Feather...5px. Fill with white and then FILTER...Blur...Gaussian Blur...5px
Change the layer blend mode to Color Dodge and the opacity of the layer to 75%. Deselect.
feather selection
8. Now to make the highlight at the top of the button. Hold down Ctrl and click once on the first circle layer (Layer 1) to surround the button with marching ants. layers

9. We are basically repeating the earlier steps in reverse:


a) SELECT...Modify...Contract...6px
b) Move the selection by pressing Shift and the Up arrow twice
c) Ctrl + Alt and click on the first circle layer (Layer 1)
d) Move the selection back down by holding down Shift and pressing the Down arrow twice.

repeat selection
10. With the marching ants still going, switch to the Channels palette and create a new channel. Fill with white and go to FILTER...Blur...Gaussian Blur...5px Channels/blur

11. Then go to IMAGE...Adjustments...Levels and enter the following numbers - 110, 1.00 and 150. You should be left with something like the image to the right.
12. Now switch back to the layers palette and create a new layer. select the Linear Gradient Tool, make sure you have White as the Foreground color and, in the Gradient options select Foreground to Transparent. With Shift pressed down, drag a selection as to the right: gradient fill
13. Now for some shading. Create a new layer and then Ctrl + click on the original circle layer (Layer 1) to make a selection of the entire button.
Fill this selection with Black (don't panic!)
Then SELECT...Modify...Contract...3px and then SELECT...Feather...5px. Press Delete and deselect. change the layer opacity to around 30%.
shading
14. Now duplicate the layer you just made (Layer 4), change its opacity back to 100% and its layer blend mode to Color Burn. color burn
And that's it. Perfect! You can easily change the color of the button by Ctrl + clicking on the original circle layer (Layer 1) and choosing another color from the Swatches palette. All the effects, highlights etc. are above this layer, so will be unchanged. (Roll over the image to the right!) plastic button rollover

If you're creating this button for a Website, it will probably be much smaller than in this tutorial, so you'll have to experiment with some of the Contract/Feather/Blur effects and scale them down. But all in all we hope you've learnt a few tricks you didn't know!