Web buttons

This tutorial will show you how to make cool web buttons for your sites layout using Adobe Photoshop.

Step 1

Create new document and set white as background color.

Using Rounded reqtangle tool create shape as below.
Radius is 5px and foreground color is #3584DE.



Step 2

Now go to the blending options for the shapes layer and use "Inner Glow", "Gradient overaly" and "Stroke" settings.

Inner glow



Gradient overaly



Stroke



Now you have this:



Step 3

Create new layer, zoom in, and draw two vertical lines like it's beeing showed on a picture below.



Now you have this:



Step 4

Right click on shape layer(button layer) and select "Rasterize layer"
Make a new layer again.

Take Magic wand tool and make a selection like below.
(Select "Contiguous" and "Use all layers" and set Tolerance to 20)



Step 5

Type some text and add your favorite icon and we're done.



Download example (40 KB)