Your cool buttons

In this tutorial we illustrate how to build a very cool button ideal for your web 2.0 website or blog. The steps are very simple and in less the 10 minutes you can obtain the graphics in the above images.

The tutorial

• Create a new Document. Size: (we suggest) width 200, height 50. Background transparent.
• Create a new Round rectangle with radius 4px.
• Modify the style of the layer created and select a Gradient overlay. Set the start color: for example #4096ee, and the second color to #276db4. The darkest color must be in the lowest section of the rectangle, so adjust the rotation. Add a drop shadow:
  You can have anything like this:
  
• Now create a new layer and draw a (fill pixel) rectangle with 25px of height, and the top side that overlap the top side of the previus layer. With the paint bucket tool change the color to #276db4, set the layer alpha to 80%.
• Modify the style of this layer. Set a pattern overlay loading this png, as the follow image:
• Add a layer mask and draw a gradient from white to black, from botton to the top. All the layers:
  
• Add the text you want with the Text tool.

That’s all. Now you can export to web device selecting your favourite image format. Remember to draw a background layer for Explorer 6.0- compatibility.