We have some knowledge about Photoshop and we can increase our knowledge about Photoshop. So we should to try learn new thing about Photoshop. We give some tutorial about text effect, photo effect, background effect and logo design Learn PSD Tutorial. But we had not any web button creation tutorial
, so i   today i give a tutorial about How to Create a Simple Web Button in Photoshop - Learn PSD Tutorials. Now  we can start create a Simple Web Button in Photoshop.

How to Create a Simple Web Button in Photoshop - Learn PSD Tutorials

---

Application : Adobe Photoshop Cs
Difficulty : Beginner or New to Photoshop
Complication Time : 15 minute

---

Step 1: Create a New Photoshop Document
At first take a new Photoshop document, So open your Photoshop window and Go File>New and set the page values as your wish. If you want you can follow our page values.

Width: 600 px
Height: 500 px
Resolution: 72 pixels/inch
Contents: white
After set all the values click OK.

Step 2: Create a Rounded Rectangle using Rounded Rectangle Tool  
Now go to Rounded Rectangle Tool and create a Rounded Rectangle with Radius of 5px in the Photoshop page as your wish.

Now Rounded Rectangle is a shape. But we will be convert Rounded Rectangle shape to Layer Object. So Right click mouse button on the shape 1 Layer and Click Rasterize Layer. Now Rounded Rectangle is a Layer Object.

Step 3: Apply Gradient Overlay on the Shape 1 layer.
Now Right click mouse button on the shape 1 Layer and Click Blending option> Gradient Overlay or Go Layer>Layer Style>Gradient Overlay.  Now click on the Gradient Color like below image.

When the Gradient Editor is open, Click on the Left side color marker. Then Click Color picker and select 2877ac color. Press OK.

Click on the Right side color marker. Then Click Color picker and select 87bfe6 color. Press OK.

Now you see your web button as like below image.

Step 4: Add a Text as like Buy Now

In this steps we add a text. Here we use "Buy Now", if you want you can use your name or other text what you want.

Select the type tool from the tools box 

Select Arial font, Bold, 30pt font size and choose White Color from option bar.

Now type Buy Now on the web button.

Step 5: Resize the text "Buy Now"

This steps we expand or re-size our text "Buy Now"

Select the text layer (Buy Now) from the layer palette then go Edit menu and click Free Transform or keyboard command is Ctrl + T and re-size the text or expand the text "Buy Now" as your wish.

After complete re-size and select position press Enter.

Step 6: Add an Arrow with white Color

Now go to Custom Shape Tool - 1> Shape Arrow - 2> Number 3 Arrow follow image> All>Ok> Number 3 Arrow follow image. Then choose color white, follow the image. And Draw arrow on the web button right side.Now Arrow is a shape. But we will be convert arrow shape to Layer Object. So Right click mouse button on the shape 1 Layer and Click Rasterize Layer. Now Arrow is a Layer Object.

Now you can see your final web button as like below image. Thanks for learn How to Create a Simple Web Button in Photoshop - Learn PSD Tutorials

Thanks for learning this How to Create a Simple Web Button in Photoshop - Learn PSD Tutorials. If you have any advise please give us by comment us.