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

Inset Button


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

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


Author's URL: Havenfx.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Inset Button"

Captcha