Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout How to Make Subscribe Button in Photoshop

How to Make Subscribe Button in Photoshop


Final result

Img

Let's begin.

Create new document with Width: 400px and Height: 250px.

Img

Go to Edit > Fill. In the drop down menu choose Color.

Img

Select Color #5f5f5f and press Ok.

Img

Go to Filter > Noise > Add noise and apply filter with settings:

Img

With Img and Radius 20px, create the body of our button.

Img

Img

Verify if your button layer is active and go to Layer > Layer stye > Blending Options.

Img

In Blending Options, select Gradient Overlay.

Img

Use gradient from #8c110a to #c64e36 and pres Ok.

Img

Now in Blending Options, select Drop Shadow with settings:

Blending Mode: Normal
Color: #4b0804
Opacity: 35%
Angle: 120
Distance: 1px
Spread: 0%
Size 0px.

Img

After that, in Blending Options go to Inner Shadow:

Blending Mode: Overlay
Color: #ffffff
Opacity 50%
Angle: 120
Distance: 1px
Choke: 0%
Size: 0px

Img

Press ok and you should obtain similar result:

Img

Add some text.

Img

This button already looks good, but not for us. Let's add some effects.

With Img create similar oval:

Img

Create New layer (Layer > New > New layer). With gradient: #ffffff to transparent fill this selection.

Img

Change Blending Mode to Overlay.

Img

With pressed Ctrl button, in layers menu, press on the button layer image for obtain it selection.

Img

Select layer with your gradient (white to transparent) but keep selection of the button. After that go to Select > Inverse. Press delete and if you want descrease the opacity, but for me it's looking good and with 100% opacity.

Img

If you want, you can repeat this effect and for other sides.

Img

Now let's draw the sparkle for our button. With Img draw small oval in the top right corner.

Img

Fill this layer with #ffffff and press Ctrl + D for Deselect.

Img

Go to Filter > Blur > Gaussian Blur and apply filter with radius of 1px.

Img

Change Blending Mode to Overlay and Opacity to 50%.

Img

Img

With pressed Ctrl button, in layers menu, press on the button layer image for obtain it selection.

Img

Select layer with your sparkle, but keep selection of the button. After that go to Select > Inverse. Press delete button on your keyboard.

Final result

Img



Author's URL: Moderntuts
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials


Like us to: