RIATMP1084- Simple Web Button for your use, Photoshop Tutorial

July 8th, 2009

RIATMP1084- Simple Web Button for your use, Photoshop Tutorial

Today I am uploading a simple web button tutorial. You can use this for your web project.

Create a new file 400/200 px. Fill the Background layer with White.

DRAWING BUTTON USING THE RECTANLE SHAPE: Create a new layer. Now select the Rounded Rectangle Tool, enter 5 px as radius for the rounded corner and draw your rectangle button shape. Right Click on that shape and choose “Make Selection”. Now fill that selection with the color you want. I took # 5c89cc.

Photoshop Tutorial, Button

pic2

Photoshop Tutorial, Button

Pic3

ADDING LAYER STYLE: In layer palate; right click on that Button layer and choose Blending Options. First add DROP SHADOW. You can take this picture(PIC1) as reference for all the values. Next add Gradient Overlay. Now in Gradient Editor click the first Color Stop and click in the Color below to change it as the color you want. I used #a4cee6. Do the same for the Color Stop to the right. For that stop I’ve used #56add6. Now add two Color Stops in the middle by clicking right below the gradient in the middle. You can correct these positions by entering 50% in the location field. I’ve used #468bcc & #81b3e2 for these two Color Stops. See the above image (PIC2). Now we will add Stroke. Select the Stroke option at the bottom. Take 1 px for the size and white as color; or you can also take your background color. (PIC3)

pic4 RIATMP1084 Simple Web Button for your use, Photoshop Tutorial

Photoshop Tuitorial, Button

pic4pic5

ADDING GLOW: Now you can enrich the look by adding glow on upper section of the button. You can use Pen Tool. But to make this process simpler I have just played with Selection option. Right click on the Button Layer in layer pallet and choose “Select Layer Transparency”. Create another layer and fill this selection with White. Now choose Move Tool and move that selected white rectangle 4 px downwards. Now add Mask. Keep upper portion and delete the extra part. See PIC4. Now add your text and that’s all you have a simple cool button. PIC5.