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

Microbevel Button


1) Make a 400x400 document. You can edit>fill the background layer to any colour you want, I suggest a moderately dark gray

2) Make a rectangle selection about the size of the button that you want.

3) Keeing the same slection, to make it a little more stylish we'll kill the corners. Go to selection>modify>smooth>do 2 pixels (this depends on the size of your button, do 2 pixels at first, you'll quickly get the idea)

4) Now on a layer NOT your background, (you may need to create a new layer) fill in this selection with whatever colour you want your button. I like Hot Pink. So you should have something like this:



5) Now, hold ctrl and select your layer, this will select the contents of the layer. Create a new layer, and add a stroke to this selection on the new layer with these settings:



6) Now Your going to use the Polygonal lasso tool:



And make a selection of the lower half of the button, corner to corner like this:



7) We will now darken this stroke to a dark grey by going to image>adjustments>hue/saturation and using lightness of: -69

It should look like this after:



(note if your button becomes darker then you did not create a new layer for the stroke, go back and do so)

8) Some May be happy at this point, but for added affect add these effects to the pink button layer, and NOT the stroke layer.

Inner Shadow for more depth:



Outershadow for even more depth:



and now a stroke:



(note that the stroke needs to be darker then the bottom portion of the stroke added earlier, or it looks weird)

9) There You should have something that looks something like what is below, now just toss some text on it and your on your way!

(note that I used a pixel font on my button, and any of the Arial and Verdana fonts look good small w/out any antialiasing)

Microbevel Button Tutorial: Final Result

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

Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

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

Captcha