• Article Written 
  • on 14.10.2009
  •  at 10:31 AM
  •  by admin

How to Create a Nice Sleek Dark Button in Photoshop

Hey guys one more Photoshop Tutorial. In this Tutorial i’ll learn you How to Create a Nice Sleek Dark Button in Photoshop. This is very simple and quite effective tutorial. I hope you will enjoy this tutorial.

Final Preview

This is what we gone do today

final-sleek-dark-button

Step #1

Open photoshop and create a new document, mine is 550px×398px with a white background.

final-sleek-dark-button-step1

Step #2

Fill the color in background layer, mine color is #131313.

final-sleek-dark-button-step2

Step #3

Select the Rounded Rectangle Tool and create button, mine radius is 5px, width: 219px and height: 40px.

final-sleek-dark-button-step3

Now apply some effect

Gradient Overlay

Styling the Button double-click on the Button Layer’s thumbnail in the Layers Panel to open up the Layer Styles dialog box, we will apply a vertical gradiant effect for your Button. Then click on the color gradient on the right of the Gradient option to open up the Color Gradient Editor.

iphone-like-buttons-step3-b

Double-click on left-color-stop and enter the color value #0E0E0E, double-click on left-center-color-stop and enter the color value #1C1C1C, double-click on right-center-color-stop and enter the color value #262626, then double-click on right-color-stop and enter the color value #292929.

final-sleek-dark-button-step3a

Should look like this.

final-sleek-dark-button-step3b

Outer Glow

Next apply the Outer Glow layer style. Changing the blend mode to Overlay , than changing the values of Size. I choose to set the Size at 3px

I choose to set the Opacity at 30%.

Changing the Technique at Precise.

final-sleek-dark-button-step3c

Should look like this.

final-sleek-dark-button-step3d

Step #4

Select Horizontal Type Tool and type text on front.

final-sleek-dark-button-step4

Step #5

the button layer’s area (Ctrl + Click on the Button Layer’s thumbnail in the Layers Panel).

final-sleek-dark-button-step5

Than create a new layer name the layer Blue gradient.

Styling the Blue gradient double-click on the Blue gradient Layer’s thumbnail in the Layers Panel to open up the Layer Styles dialog box, we will apply a horizontal gradiant effect for your Button. Then click on the color gradient on the right of the Gradient option to open up the Color Gradient Editor.

Keep the Angle at 180o

final-sleek-dark-button-step5ab

Double-click on left-color-stop and enter the color value #047CA3, double-click on center-color-stop and enter the color value #25C4F4, then double-click on right-color-stop and enter the color value #047CA3.

final-sleek-dark-button-step5b

Should look like this.

final-sleek-dark-button-step5a

Now deselect your selection (Ctrl + D). Now move the highlight below the button so nudge the layer down two pixels by tapping the down key(by your keyboard).

Result

final-sleek-dark-button

Download the source file

If you’d like to check your work, you may download the PSD file for this tutorial.

sleek-button (226 KB)

Promote Us

  • Add to Mixx!
Ace Hosting India