Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Web Button

Step 1

Create a new document in Adobe Photoshop with the size 400x200 pixels and a black background. Using the Rounded Rectangle Tool draw a rectangle with white color:

image 1

Step 2

In the Tools Tab select the Polygonal Lasso Tool and make a selection like in the next picture (first select the layer which contains the rectangle, in the Layers Tab):

image 2

Set the feather, for this selected area, to 20 pixels, and delete the area using the DEL key (press the DEL key three times):

image 3

Step 3

Set the opacity, for this layer, to 60%. Duplicate the layer (right click in the Layers Tab and choose Duplicate Layer). Flip the new layer horizontally by selecting Edit > Transform > Flip Horizontal, then flip it vertically by choosing Edit > Transform > Flip Vertical and move it like in this picture:

image 4

Step 4

Apply the color overlay effect on the new layer. To make this step, select Layer > Layer Style > Color Overlay. Use the next settings for this effect:

image 5

Step 5

Type a text inside the button and set the layer opacity, in the Layers Tab, to 20%:

image 6

Step 6

On top of all the layers draw another white rectangle:

image 7

And set the opacity to 12%:

image 8

Step 7

Select the Elliptical Marquee Tool in the Layers Tab, and make a selection like here:

image 9

Delete the selected area and move the selection to the right side of the rectangle (use the arrows to make this, but make sure that the Elliptical Marquee Tool is selected in the Tools Tab):

image 10

Delete the selected area and see the result:

image 11

Step 8

You can play with the details and obtain this:

Web Button Tutorial: Final Result



Author's URL: DesignTutorials.info
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Web Button"

Only registered users can write comment

Reader's comments