Site Navigation:

Home // Tutorials // Photoshop® // Micro Buttons V2

Micro Buttons V2

1
Micro Buttons V2 image 1
After surfing some of my favourite sites I came across a flash site that had these great mini beveled buttons. They are very simple to make and work great when imported into flash. Here's how to make them:

Start by creating a new document about 400x400px with a white background. Now Create a new layer. Select the rectangular marquee from the toolbar and in the options at the top choose fixed size from the drop menu, enter about 40-50px for the Width (make this longer if needed), and 11px for the height. Once you have done that click on the centre of your document with the marquee to make the selection shape. It should look like mine opposite.
2
Micro Buttons V2 image 2
Next fill the selection with a very light shade of gray, I'm using HEX: #EFEFEF

If it looks like mine opposite, press CTRL + D to deselect the selection.

Now go to Layer>Layer Style>Bevel and Emboss
3
Micro Buttons V2 image 3
Copy these settings: Bevel And Emboss : Style Inner bevel, technique smooth, depth 1, direction up, size 2, soften 2, angle 146, altitude 30, highlight mode normal, opacity 100, shadow mode multiply, opacity 43.

Next click the tab that says "Inner shadow" to add an inner shadow Use these settings:Blend mode normal, opacity 100, angle 146, distance 1, choke 100, size 1.

Next click the tab that says "Stroke" at the bottom and enter the following settings: Size 1, position outside, blend mode normal, opacity 100, colour grey.

Now its looking good, all that is left to do is to add a drop shadow, so click the drop shadow tab. Drop shadow settings:Blend mode multiply, opacity 22, angle 146, distance 0, spread 0, size 0.

Once done, click OK and it should look something like mine opposite.
4
Micro Buttons V2 image 4
Now the best way to add text to these buttons is to use a bitmap font. The on I'm using is one I picked up somewhere called 0b4_21. Bare in mind I didn't create this font =) Now just add your text to your buttons, here's the settings I used: These make great "submit" or "go" buttons and are nice looking, and easy to make.
5



Micro Buttons V2 image home button     Micro Buttons V2 image about button     Micro Buttons V2 image email button


Try us out
You can take things a step further and create rollovers for your buttons, perhaps even with sound?

Try mine out opposite (mouseover them).
spacer

This Tutorial was Brought to you by Robouk, Please post any questions in the forum. Thank you.
BACK TO TUTORIALS



Home Tutorials Free Stuff About Gallery Forum Links Contact

Copyright © Robouk 2001.

Dreamweaver®, Flash® and Photoshop® are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Hosted by Pixelcode - web design tutorials.