_thumb

Simple Record Button – Photoshop Tutorial

13,822
views

Using a few Shape Layers and a couple Layer Styles we will quickly construct a very slick looking “Click here to record” style button. Use this as a button in your website or app interface, use it as a button or list button point, change the color of the center area and use it as a color custom rollover.

Simple Record Button Photoshop Tutorial

We’re going to use Photoshop CS5 here and you will only need a basic working knowledge of the application to get started with this Photoshop tutorial! This tutorial is one in the continued series the Howard from IceflowStudios.com and I are creating. Inspiration is draw from the amazing 365psd.com and any number of the quality, free PSD downloads they provide! Check them out now!

[raw]You must set a valid YouTube ID, please try again.[/raw]

Step 1:

Create a new Photoshop document sized 1280px by 720px at 72 pixel per inch.

1 Simple Record Button   Photoshop Tutorial

Step 2:

Fill the Background Layer with the color #404040. Go Filter>Noise>Add Noise. Use the setting that I have in my screenshot.

2 Simple Record Button   Photoshop Tutorial

Step 3:

Grab the Ellipse Tool (U) and set the tool to draw paths, look to the Tool Options Bar and use the settings I have. Drag out a small ellipse in the center of the Photoshop Document. TIP: Hold the Shift key to draw a perfect circle.

3a Simple Record Button   Photoshop Tutorial

3b Simple Record Button   Photoshop Tutorial

Step 4:

Go Layer>New Fill Layer>Solid Color. I’m going to name this Layer “Metal” and fill this Layer with White.

4 Simple Record Button   Photoshop Tutorial

Step 5:

Set the Fill Opacity of this “Metal” Layer to 0%. Go ahead and add an Inner Shadow and Inner Glow to this shape using the settings I have.

5a Simple Record Button   Photoshop Tutorial

5b Simple Record Button   Photoshop Tutorial

5c Simple Record Button   Photoshop Tutorial

5d Simple Record Button   Photoshop Tutorial

Step 6:

Go ahead and add a Gradient Overlay and open the Gradient Editor by selecting the Gradient bar. I have placed colors stops at 0-15-30-45-60-75-100%. Check out my screen shot and try to get about the same gray colors that I have.

6a Simple Record Button   Photoshop Tutorial

6b Simple Record Button   Photoshop Tutorial

6c Simple Record Button   Photoshop Tutorial

Step 7:

Next it’s time to add a little more depth to this button’s base. Add a Drop Shadow and a Stroke using the settings I have. Check out my zoomed in screenshot to see what changes are being made. NOTE: We’re using the Stroke only to place that little gap between that Drop Shadow and the bottom edge of the button. Reducing it to 0% Opacity will make the line disappear, but the Layer Style will still behave as if the Stroke is visible and cut that nice channel for us.

7a Simple Record Button   Photoshop Tutorial

7b Simple Record Button   Photoshop Tutorial

7c Simple Record Button   Photoshop Tutorial

Step 8:

We need to create a pattern to lay over this button to give the metal a touch more texture. Create a new Photoshop Document sized 5px by 5 px at 72 pixels per inch. Grab the Pencil Tool (B). Hit the (D) key to set Black as our Foreground color. Use the Pencil to draw a small plus (+) sign in the middle of that document. Go Edit>Define Pattern and save the Pattern.

8 Simple Record Button   Photoshop Tutorial

Step 9:

Jump back over to our button and duplicate our button Layer by going Layer>Duplicate Layer. Then right click on the Layer name in the Layers Panel and hit “Clear Layer Style.” Again, reduce the Fill Opacity to 0%. Not much will change, but you will have a second Shape Layer now.

9 Simple Record Button   Photoshop Tutorial

Step 10:

Go Layer>Layer Style>Pattern Overlay and select the Pattern Thumbnail and choose our (+) pattern. Use the settings I have used in the screenshot.

10 Simple Record Button   Photoshop Tutorial

Step 11:

Duplicate this Layer just like we did a moment ago and clear the Layer Style as well. Free Transform this Layer (Cmd/ Ctrl + T) and hold down the Shift + Alt/Opt button and scale the shape toward the center until you have a smaller ellipse in the center of our button shape.

11 Simple Record Button   Photoshop Tutorial

Step 12:

Reduce the Fill Opacity of this Layer to 0% and apply a Gradient Overlay Layer Style using the settings I have in the screenshot(s) below.

12a Simple Record Button   Photoshop Tutorial

12b Simple Record Button   Photoshop Tutorial

12c Simple Record Button   Photoshop Tutorial

Step 13:

Go ahead and apply the Inner Shadow and Outer Glow that I have.

13a Simple Record Button   Photoshop Tutorial

13b Simple Record Button   Photoshop Tutorial

Step 14:

Drop in a Curves Adjustment Layer and set its Blending Mode to “Screen” and use a 500px, soft brush at 30% Opacity to “dust in” a nice spot light effect. Link those three Layers together to ensure that they’ll always drag together and I resized my button a little smaller for the final effect. Enjoy!

14 Simple Record Button   Photoshop Tutorial

  • Roberto Libra

    love it! thanks..your little tips can be used universally!

  • Asif Malik

    u r doing great job…

  • Samandar Totakhil

    good job and nice tutorial

  • JohnKay

    I like the detail you went to such as in step 10

  • QaisarAzeemi

    wonderful and thanks for this tutorial