Web buttons

9.1.2006, 15:56
Submited in: Photoshop | Total Views: 181326

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


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)

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category

Most popular tutorials

Resources Worth visiting