Web 2.0 Button
In this Adobe Photoshop tutorial I will show you how to make a simple stylish button, and then bend it upwards in one end, if you are confused just look at the final image, then you'll see what I mean.
Download the Photoshop work file for the button
Start by drawing a rectangle with the rounded rectangle tool on the stage as shown below, then in the layers panel right click and choose rasterize layer to make it a normal layer.
Double click the layer to get to the layers styles menu, then give it settings as shown below.
Now make a rectangle exactly the same size as the first one, make it black and place it under the first one, as shown below, this is going to represent a shadow later on.
With the new layer selected, go to filter -> blur -> gaussian blur and blur it about 2.
Now with the free transform tool hold down ctrl and drag the corners so the two left part corners are hidden behind the top shape, as shown below.
Now you can put in some text, symbols or graphics in the button.
And at least we will give it a glossy effect.
Hold down ctrl and click the first button shape to load the selection, then with the lasso tool click and intersect with selection the top corner triangle part as shown below.
Make a new layer and name it gloss, then fill it with white and give it a white to transparent gradient as shown in the final image.
