In this photoshop tutorial, we will make a cool looking glossy contact us icon. Tutorial is easy, just follow the steps carefully.

Preview of final icon:

Step 1:
Create a new document, roughly about 400 px by 400 pixels, with white background. Create a new layer and set color to #ed870f. Select “Rounded rectangle tool” and radius 8px draw a rounded square shape.


Apply following layer style to this round shape layer.

Step 2:
Press and hold CTRL key and click on round shape layer. This will load the button shape.


Drag the selection below the button.


Create a new layer. Set foreground color to #dc4801 Select gradient tool with “Foreground To Transparent”. Press and hold SHIFT key and drag mouse from top of selection to middle of selection.


Press CTRL+D to de-select selection.

Step 3:
Create a new layer. Set foreground color to white. Select a soft brush of radius 200px and set opacity to 60%. Click once on top of the button as shown below.


Change layer mode to “overlay”.

Create a duplicate of this layer and set layer mode to “Normal”. Press CTRL+T and contract the shape like this:


Our button looks like this now:


Step 4:
Create a new layer and select “Rounded rectangle tool” with 5px radius. Draw a shape as shown below in white color.


And apply following layer style.




Button should now look like this:

Step 5:
Create a new layer. Select “polygon Tool”


and set number of slides to 3. Set color to #e9e9e9 and draw a shape as shown below.


Press CTRL+T to resize the shape.
Apply following layer style to this shape.






It should now look like this:


Repeat same process and create another triangular shape with same layer style as shown below.

That’s it, our contact icon is ready. This is how final contact us icon looks on a white background.


And this is on transparent background.


License:
Free for personal and commercial use. If possible, please link back to our site as source.

I hope you like the tutorial. below you can download PSD file.

In this tutorial we will make glossy PayPal donate button in photoshop. The layered Photoshop file and PNG file is available for download at the end of tutorial. You can use these icons on your website.

Final Image preview
Below is the final preview of the paypal donate button.

Step 1:
Create a new document, roughly about 300 px by 300 pixels, with white or transparent background. Set color to #e48d06. Create a new layer. Select “Rounded rectangle tool” with 8px radius and draw a rectangle shape.

Step 2:
Press and hold CTRL key and click on button shape layer. This will load button shape.

Now contract the selection by 2 px (Select >> Modify >> Contract).

Set foreground color to white. Select gradient tool with “Foreground To Transparent”. Press and hold “SHIFT” key and drag mouse from lower selection to middle of the button.

Now button should look like this:

Step 3:
Now select “rectangular marquee tool” and make selection like below.

Again apply gradient same as we did in step 2 but this time from top to bottom.
Now our button looks like this:

Step 4:
Create a new layer. Select text tool and type “Paypal” using following text style.
Font style: Verdana
Font weight: Bold italic
Size: 36
Color: #1b3664 and #32679b

Apply following layer style to paypal text layer.

Step 5:
Create new layer. Again select text tool and type “Donate” with following text style:
Font style: Verdana
Font weight: Bold italic
Size: 18
Color: #0b1f41

That’s it, our paypal donate button is ready. This is how buttons looks on a white background.

And this is on transparent background.

License:
Free for personal and commercial use. If possible, please link back to our site as source.

Legal:
The PayPal logo is copyright of PayPal and I claim no copyright in their creation.

I hope you like the tutorial. below you can download PSD file.

Its a very basic and easy PhotoShop tutorial. But this is very useful for making simple cool “Read More” button for your blog. You can also use this tutorial to make other buttons like, forum rank icons, forum common buttons/icons etc.

Below is the final preview of the button.

Step 1:
Create a new documents in photoshop (File >> New)

Fill the layer with #edebeb color.


Step 2:
Select “Rounded Rectangle Tool” with radius 5px

Set color to #414141 and draw a button type shape.

Step 3:
Apply following layer style to button shape.



Now our button looks like this.

Step 4:
Press and hold CTRL button and click on the button layer. This will load the button shape.


Go to: Select >> Modify >> Contract.., and contract by 3px


select “Elliptical Marquee tool”

and make a selection like below.


Step 5:
Create a new layer (Layer >> New >> Layer), and fill the selection with white color. Set layer mode to “Soft Light” and opacity to 30%.
Button looks like this now.


Step 6:
Create a new layer. Select “Text tool”, set color to #d6d6d6 and type “Read More”
Our read more button is ready.


Download PSD file and PNG file with transparent background.

In this Photoshop tutorial, we will make a square button and add a ribbon to the button. Such buttons can be used in logo designing, icons, new offer button, price tag button etc.
Tutorial is easy. I have used images to make tutorial very easy to understand.

Below is the preview of final image.

Step 1:
Create a new document (File >> New)


Select gradient tool. Set foreground color to #696a6a and background color to #9a9a99
Press and hold shift key and drag mouse from top to bottom.
Now background looks like this:


rename this layer as “Background“.
Create a new layer (Layer >> New >> Layer). Rename this layer as “Square“. Select “Rounded Rectangle tool” with 15px radius and set color to #bac014
Press and hold SHIFT key and draw a rounded square shape.


Right click “Square” layer and select Blending options. Apply following layer style to this rounded square shape.




Now our button looks like this:

Step 2:
Create a new layer. Rename the layer to “Ribbon“. Select “rectangle Tool” and set color to #023a5d
Draw a shape as show below.


Go to Edit >> Free Transform. And place as shown below.


Press and hold CTRL key and click on ribbon layer. This will load ribbon shape. Select “rectangular Marquee Tool” and select one end as shown in below image.


Press DEL key to delete the selection. Similar delete extra parts from other end.


Right click Ribbon later and select blending options. Apply following layer style to ribbon layer.




now our button looks like this:

Step 3:
Create a new layer just above background layer. Select “rectangle Tool” and set color to black. Draw a small shape at left end of ribbon, as shown below.


Similarly add another black shape on other end of ribbon.

Step 4:
Create a new layer. Select “text tool” and set color to white. Write some text. Use “Free Transform” to rotate the text and place the text just over the ribbon.


Step 5:
Create new layer. Select text tool and type PSYAG with white color


Apply following layer style to this text layer.




Now button looks like this:


Step 6:
Press and hold CTRL key and click on the “Square” layer. This will load rounded square layer.


Go to Select >> Modify >> Contract and contract the selection by 3px
Select “Rectangular Marquee tool” and make a selection as shown below.


Set foreground color to #4d2000 and background color to #943e00 Press and hold SHIFT key and drag mouse from top to bottom of the selection.


Step 7:
Create a new layer. Select text tool and type some text over below shape. Our button is ready. Below is the final image.


I hope you like the tutorial and you have not faced any trouble in understanding the tutorial.
Download PSD File FREE

In this Photoshop tutorial, we will make a glossy web 2.0 type button. It is very simple and will hardy take 10 minute to complete this button.

Below is the preview of final image.

Step 1:
Create a new document in Adobe Photoshop (File New).

Step 2:
Create a new layer (Layer >> New >> Layer)
Select “paint bucket tool“.

And fill the layer with color #6f200b

Step 3:
Right click the layer and select “Blending options” as shown in below image.

Apply following layer styles.

After applying layer style, it will look like this.

Step 4:
Create a new layer (Layer >> New >> Layer).
Select “Rounded Rectangle Tool” and set radius to 8px.

Set color to #9ea709 Press and hold shift key and draw a shape as show below.

Step 5:
Right Click rectangular shape layer, and select “Blending options”. Apply following layer style.

Step 6:
Pres and hold ctrl key and click on the rounded rectangular shape layer.

This will load the rectangular shape.

Now go to Select >> Modify >> Contract
and contract by 2px

Create a New layer (Layer >> New >> Layer).
Select “Elliptical Marquee Tool” and set to “Intersect with selection”

And make selection like shown below.

Fill the selection with #ffffff color and set opacity to 20%.

Now our image look like this:

Step 7:
Right click green rounded rectangular shape layer and select duplicate layer. This will create a duplicate layer.

Drag the duplicate shape just below the original shape. Right click duplicate layer and select “Blending options”. Remove all previous layer style and apply only below layer style.

Now our image looks like this:

Step 8:
Create a new layer. Select “Text Tool” and type some text.

Below is the final image of this tutorial.

Download PSD file of this tutorial FREE !!

In this tutorial we will earn how to make a round shiny glossy button.

Step 1:
Create a new document (File >> New) , size 300 X 300 px, white/ transparent background. In this tutorial I have selected transparent background.

Step 2:
Select “Ellipse tool” from tool palette and set. Press and hold “shift” key and draw a circle. You can select any color, prefer a dark color. I have taken #980505 color.

Step 3:
Press and hold “ctrl” key and click on button layer. Thus only button area will be selected. New create a new layer (Layer >> New). Select gradient tool and set foreground color same as color selected in step 2. Mine color is #980505. And set background color little lighter than foreground color. Drag mouse from bottom to top.

Step 4:
Again, Press and hold “ctrl” key and click on button layer. Thus only button area will be selected. New create a new layer (Layer >> New). Select gradient tool. This time select foreground color as white. and with following settings.

New drag mouse like below.

deselect (ctrl + D)

Step 5:
Create a new layer (New >> Layer). Now select elliptical marquee tool and draw a shape like this. And drag mouse from top to bottom of selection.

De-select (Ctrl + D). And our button is ready.

In this tutorial we will learn how to make a shiny silver web 2.0 type button.

Step 1:
1) Create a New document (New >> Document)
sixe : 300 X 200 px
Background: Transparent

Step 2:
Select “Rounded Rectangle tool” from tool palette and set,
Radius: 3px
Color: white
style: Default (none)

And draw a shape of size you wish.

Step 3:
Press and hold “ctrl” button, and click on the button shape layer. This will select only button shape. Now create a new layer (Layer >> New).

Step 4:
Select “Gradient” tool from tool palette. And set white color as foreground color and #D8DADB color as background color. Hold and drag mouse from lower selection to upper selection. Now our button looks like this:

Step 5:
Right click on the layer and select “Blending options”. In blending options do following settings.
Stroke:
Size: 1 px
Position: Outside
Opacity: 100%
Color: #C0C1C2

Step: 6
Select Rectangle Marquee Tool, Press and hold “alt” key and draw a shape like this.

Step 7:
Create a new layer (layer >> New). Fill the layer with white color using paint bucket tool. Set opacity 80% and Fill to 80%

Our Button is ready.

Final Button

In this tutorial we will learn how to make web button in photoshop. So, lets start.

STEP 1:
Create a new document (File >> New), select size 250 X 250 px, Transparent background.

STEP 2:
Select “Rounded Rectangle tool” from tool palette and set
Radius: 7px
Color: As you wish, I have taken #03578D
style: Default (none)

STEP 3:
Draw a shape of size you wish. My button looks like this.

STEP 4:
Right click the layer in the layer’s pallette, and select “Blending Options” .

and set the following settings.
Drop Shadow:

• Blend mode: Multiply
• Opacity: 50%
• Angle: 120
• Distance: 0 px
• Spread: 0 px
• Size: 2 px

Inner Glow:

• Blend Mode: Overlay
• Opacity: 50
• Noise: 0
• Color: white
• Technique: softer

Gradient

• Blend Mode: Overlay
• Opacity: 50%

Now my button looks like this.

Step 6:
Press and hold ctrl button, and click on the button shape layer. This will select only button shape. Now create a new layer (Layer >> New)

Step 7:
Select “Rectangle Marquee” Tool. Press and hold “alt” key and draw a shape like this. Thus only upper part will be selected.

STEP 8:
Select Gradient Tool, and select foreground color same as you have selected the color of your button in step 2. My button color is #03578D and set background color as white. Now draw gradient from the top to bottom. And set:

• Opacity: 50%
• Fill: 50%
• Layer: Soft Light

Deselect the layer (ctrl + D). Now our button looks like this:

STEP 9:
Now we will add text on out button. And our button is ready.

In this tutorial we will learn how to make shiny square web 2.0 type buttons.

Step 1
Create a new document (File -> New), select size 250 X 250 px, Transparent background.

Step 2
Select “Rounded Rectangle tool” from tool palette and set:

• Radius: 5 px.
• Color: white
• style: Default (none)

rounded rectangle tool

Press and hold “Shift” key and draw a rounded rectangle shape.

Step 3:
Press and hold “ctrl” key and click on the layer to select all region of this layer. Now create a new layer (New >> Layer)

Step 4:
Select “Gradient” tool from tool palette.

gradient tool

And set any dark color as forecolor and little light color as background color. Below is my selection.

Step 5:
Hold and drag mouse from lower selection to upper selection. Now our button looks like this:

Step 6:
Now Contract the selection by 2 pixel. Select -> Modify -> Contract

And create a new layer (layer >> New Layer)

Step 7:
And set little light color as forecolor and little light color as background color than the color we selected in step 4. Below is my selection.

Step 8:
Hold and drag mouse from lower selection to upper selection. Now our button looks like this:

Deselect selection (ctrl + D)

Step 9:
Select “text” tool, and select any strong bold font and large size. Type any alphabet, below is my button.

Step 10:

Right click on text layer and select “Blending options”. In blending options do following settings:

Drop Shadow

• Opacity: 30%
• Distance: 3px
• Spread: 1px
• Size: 3px

Bevel Emboss

• Depth: 10 px
• Technique: smooth
• Direction: Up
• Size: 5 px
• Softten: 0px
• Highlight Mode Opacity: 60 %
• Shadow Mode Opacity: 60 %

Gradiant Overlay

• Color Stop: #BDBBBB
• Color Stop: #FFFFFF

Step: 11
Press and hold “ctrl”  key and click on layer we created in step 1. This will select the button completely. Now create a new layer (new >> Layer). Select Eclipse Marquee Tool, Press and hold “alt”  key and draw a shape like this.

Step 12:
Fill up the selection with white color you want using the “Paint Bucket Tool”.

And set:

• Opacity: 75%
• Fill: 75%
• Layer mode: Soft light

Our button is ready.

In this tutorial we will learn how to make a simple web 2.0 button. So, lets start.

1) Create a new document (File -> New), select size 250 X 250 px, Transparent background.

2) Select “Rounded Rectangle tool” from tool palette and set

• radius to 5 px.
• Color: white
• style: Default (none)

3) Draw a rounded rectangle shape.

4) Hold ctrl key and click on layer to select all region of this layer. Now create a new layer (New -> Layer)

5) Select “Gradient” tool from tool palette.

set any dark color as forecolor and little light color as background color.

6) Hold and drag mouse from lower selection to upper selection. Now our button looks like this:

7) Ceate new layer (layer -> New), now Contract the selection by 1 pixel.

Select -> Modify -> Contract

Select “rentangular marquee tool” and  hold “Alt” button and draw a shape like this.

9) Fill up the selection with white color you want using the “Paint Bucket Tool”.

10) And set:

• Opacity: 75%
• Fill: 75%
• Layer mode: Soft light

Our button is ready.

You can add some text and change color of your choise.