Photoshop Buttons - How to Create Chrome Buttons

You can create Chrome buttons in just a few easy steps in Photoshop. You can also create different styles of Chrome Buttons. In this tutorial I will show you how to create one of the Chrome Buttons that you see on websites. I will write the first part of this tutorial for beginners and the second part for the advance users. Please see the image that I have provided to see the ending results.

How to Create Chrome Buttons in Photoshop for Beginners

Open your Photoshop program and let it load. Next, click File > New to create a new canvas. Create your canvas about 250 pixels by 250 pixels. Select a white background and click OK on that window. Now you should see your new canvas in your Photoshop window.

Next you will need to select your Rounded Rectangle Tool. The Rounded Rectangle Tool is located in the toolbar. You will probably have to click the Square and hold it down until the menu pops up and then select the Rounded Rectangle tool.

Once you have selected your Rounded Rectangle Tool, you can go ahead and draw your button on your canvas. You can make the button any size that you wish.

Now you will need to Rasterize your layer. Locate your Layers Panel. If you do not see your Layers Panel then press F7 on your keyboard and that will bring your Layers Panel up. You will see two layers in your Layers Panel, click one time on the Shape Layer to highlight it. Now right click on that same layer and select Rasterize Layer from the pop up menu.

Next you will need to open your Blending Options. This is where you will apply all of your effects to get the chrome button effect. Right click on your Shape Layer again and select Blending Options from the pop up menu. This will open your Blending Options Panel. Keep this window open until I tell you to click OK. You will apply more than one effect in this window.

Drop Shadow - Click on the word Drop Shadow and enter the following Values.

Blend Mode - Multiply
Color - 9d9c9c
Opacity - 75%
Angle - 120
Distance - 5
Spread - 0
Size - 5
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Gradient Overlay

Blend Mode - Normal
Opacity - 100%
Gradient - Click on the Blue, Yellow, Blue Gradient and change the Yellow to White and change the Blue to # b7b7ba
Reverse - Unchecked
Style - Linear
Align with Layer - Checked
Angle - 90
Scale - 100%

Stroke

Size - 1
Position - Outside
Blend Mode - Normal
Opacity - 55%
Fill Type - Color
Color - Black

Now click OK on your Blending Options Window. Now your button should look like the image that I have provided here. Now you can add your text by selecting the Type Tool from your toolbar. Draw a rectangle across your button and type in what you want. You can change the font, size, and color at the top of your Photoshop window. If you have any problems with this Photoshop Tutorial, please feel free to contact me using the contact button at the top of this page.

How to Create Chrome Buttons in Photoshop for the Advance

Create a new canvas 250 px by 250 px. Select a white background and click OK. Next, select your Rounded Rectangle Tool. Draw your button on the canvas the size that you want. Next, you will need to Rasterize that the Shape Layer. Now open your Blending Options window and apply the following effects.

Drop Shadow - Click on the word Drop Shadow and enter the following Values.

Blend Mode - Multiply
Color - 9d9c9c
Opacity - 75%
Angle - 120
Distance - 5
Spread - 0
Size - 5
Contour - Linear
Anti-aliased - Unchecked
Noise - 0

Gradient Overlay

Blend Mode - Normal
Opacity - 100%
Gradient - Click on the Blue, Yellow, Blue Gradient and change the Yellow to White and change the Blue to # b7b7ba
Reverse - Unchecked
Style - Linear
Align with Layer - Checked
Angle - 90
Scale - 100%

Stroke

Size - 1
Position - Outside
Blend Mode - Normal
Opacity - 55%
Fill Type - Color
Color - Black

Click OK. Now you can add text to your button. If you have any problems with this Photoshop Tutorial, please feel free to contact me using the contact button at the top of this page.