website promotion banner
eturnkeys
Your Ad Here
Photoshop  Home Photoshop Web Layout Inset Button
rss

Inset Button

Author: Havenfx.com More by this author


Make your interface buttons look really real by placing 'em in the interface. Hard to describe but nice-looking. Step-by-step instructions proceed...

1) Open up a new image, about 150x150 with a white background. Select the Ellipse Shape Tool. Make the color a darkish gray (#9E9E9E)

2) Now, hold SHIFT and draw out a perfect circle. The shape will automatically be put on a new layer.



3) Head to your Layers Palette (Windows>Layers) and click that little F at the bottom and select Bevel and Emboss. Apply these settings:



4) Now, it looks like a button but we want that inset! So, selection the Pen tool and right-click on your button. Select Make New Selection and apply the default settings. You should have a selection around your button. Create a new layer and name it "inset". Now, select a marquee tool, it doesn't matter which, and right-click on the selection. Click on Transform Selection and it should bring up a box around the selection with anchor points. Holding SHIFT+ALT, drag one of the corner points in a direction away from the circle. Only a little though, maybe one pixel or so. If you're wondering why you pressing SHIFT+ALT, I'll tell you why. SHIFT makes sure the transformation is perfect (i.e. square or circle) and ALT makes sure whatever you do to one side, you do the same to the other. Anyways, with the transform selection still in place, you should have something like this:



5) Head to your Layers Palette (Selection should still be in place) and place the "inset" layer under the shape layer.



6) Click the Gradient Tool (it will be under the paintbucket) and make sure you have these settings in the options bar:

Click to Enlarge
Click to enlarge

7) On the "inset" layer, use your gradient tool and drag a line from the bottom right-hand corner up and past the upper left-hand corner. Start your line past the corners on each end. Refer to the image below if any trouble.



8) Your final piece should look something like this:

Inset Button Tutorial: Final Result



Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Inset Button"