First open up Photoshop. I am using CS6 in this tutorial.
The width and height are up to you. I will be keeping it at 800x800. But make sure the resolution is at least 72 DPI and the color mode is RGB 8 bit.
Fill the background with a color of your choice. I am using a grey color; #232323
[img]http://i.minus.com/iWQ9CNMO37434.png[/img]
Once you have added a nice color go to Filter > Noise > Add Noise. Use the settings from below.
[img]http://i.minus.com/jsjBwyyCUdptk.png[/img]
Create a new layer (Ctrl + Shift + N), set the Foreground Color to your color,
and use the Rectangle Tool (U) to create a new shape in my case a rectangle. I am using a radius of 5 px
[img]http://i.minus.com/ibeaCCKLW7NAu3.png[/img]
Now we have the basic shape done and can add some effects to our button.
Go into the blending options by double clicking the shape layer. Let's add a Drop Shadow.
[img]http://i.minus.com/ipSv3cApHGMXn.png[/img]
We are not done yet. There are still some styles we have to add.
[img]http://i.minus.com/ibzdp7L8wmqALz.png[/img]
The Inner Glow is just a small detail we are adding.But believe, it makes a difference in web design.
All those small details can make something big.
[img]http://i.minus.com/iMVGBDgExjE6g.png[/img]
Now we will apply a Gradient Overlay to get rid of the plain color.
If you like it flat you can leave this out.
[img]http://i.minus.com/iPvUrTwofPckC.png[/img]
Second last effect we have to add.
[img]http://i.minus.com/ibRMpMEV1wKZT.png[/img]
Our last effect, the Bevel and Emboss.
[img]http://i.minus.com/iVJ5ZHpm4Y9jL.png[/img]
We got all our effects done. Now there is just a few little things.
To make the button little more 'exciting' we will add a Radial Gloss.
Make another white shape on top of the button.
[img]http://i.minus.com/iMfV7GEtgRIgf.png[/img]
It looks weird right? Go to the layer palette, hold ALT and press between the white shape and the button.
Or you can right click on the white shape layer and click on Clipping Mask.
It should look like this:
[img]http://i.minus.com/iHM7oOiZyV0WD.png[/img]
Well, it still looks like crap. We will have to add a Gradient to the white shape layer (Gloss).
Grab your gradient tool and put a gradient on the gloss layer. In this button I am using a Radial Gradient.
[img]http://i.minus.com/irYhv9lNJDhlo.png[/img]
[img]http://i.minus.com/i2q2fJjQwJnzW.png[/img]
Change the Blending mode for the white shape to Overlay
and play around with the Opacity to fit your liking.
[img]http://i.minus.com/iBx6uhIeL0NYU.png[/img]
Let's add some text. I'm using the font Lato
I would recommend you give the text a nice Drop Shadow effect.
Settings for the Drop Shadow:
Blending Mode: Overlay
Angle: -90
Distance: 1
Size: 0
Spread: 0
Now move the Gloss Gradient we created under the Text.
[img]http://i.minus.com/jTsF1b1fhaK6i.png[/img]
I hope you liked my first tutorial :) Unfortunately I had to remove some images.
Post your outcomes and results! And let me know if this tutorial helped you. Also, I have more tutorials on my channel if you enjoyed this!
![[Image: F0FuajD.png]](https://i.imgur.com/F0FuajD.png)