Photoshop: Design a web button

This Photoshop tutorial teaches you to create a web button.

Step 1: In this tutorial we will learn how to design a "Web Button".

Step 2: First of all we will open a new file in Adobe Photoshop. Well create a new 350px by 200px document with a white background, and reset your background foreground colors to default (i.e. black white).

Step 3: (Add new layer) By using marquee tool make this object.

Step 4: By alt + backspace fill this color = # 8DC827.

Step 5: (Add new layer) By using marquee tool make this object.

Step 6: By alt + backspace fill with black color.

Step 7: (Add new layer) By using marquee tool make this object.

Step 8: Apply Gradient effect :

Step 9: Decrease its Opacity:

Step 10: (Add new layer) By using marquee tool make this object.

Step 11: By alt + backspace fill color = # 8EC231.

Step12: Copy it 4 times and place it in different areas:

Step 13: (Add new layer) Copy it once more.

Step 14: Now Decrease its Opacity upto 60%.

Step 15: (Add new layer) Copy it again but this time 2 times and fill it with this color = # EEBC05.

Step 16: Apply Stroke to this object settings are:

Step 17: (Add new layer) By using pen tool make this object.

Step 18: Fill it with this color = # 8EC828.

Step 19: Apply Gradient effect :

Step 20: (Add new layer) By using pen tool make this object and fill it with this color = # C9E5AA.

Step 21: Now Decrease its Opacity upto 80%.

Step 22: Apply Stroke to this object settings are: .

Step 23: (Add new layer) By using pen tool make this object.

Step 24: Fill it with black color.

Step 25: Copy the layer and place it on the opposite side after that press ctrl + t (for transformation) and right click, in the options click on Flip Horizontal.

Step 26: Apply Stroke to this object settings are:

Step 27: Now with the help of burn tool try to make the areas dark where pointed:

Step 28: Select all layers not the last one and after selecting press ctrl + e to merge those layers:

Step 29: Press ctrl + t (for transformation) and make it larger.

Step 30: The final output.