Chrome Interface Button:

1. New Document (whatever size you want the button to be. For the sake of this tutorial, I will make it a little bigger, I’m using 150x150) Fill the background with black.


2. Now use the rounded Rectangular Tool (Under the text tool) with a white foreground color, and make a shape like the one shown below. Make sure you rasterize the layer as well (Right click the layer, and select Rasterize Layer)




3. Now go to the blending options for that layer, and use the following examples as guidelines.


Inner Shadow:



Outer Glow:



Gradient Overlay:



Gradient Settings:



Stroke:



And you’re done! It should now look something like this:






Optional: Make an Indent

Using a one pixel brush diameter, with the color white. Draw a straight line down the button. (Picture is zoomed in to show detail)



Now take a one pixel brush with the color “616161” and draw a one pixel line directly to the left of that. (Image Zoomed in to show detail)



Now zoom out and you’ve got a nice little metal indent!

Now just add some text (I used the font “Pixeldust”) and you’re set!



-Scott

Tutorial © 2006 Scott Walker