Home
Photoshop
Web Layout
Creating a Micro Button
Level: Beginner Software:
Photoshop
This tutorial will show you how to make a nice micro button like the one shown above.
Also, feel free to download the .psd-file for this tutorial. Link can be found at the bottom of this page.
Create a new transparent image, 150x50 pixels should be more than enough. Now select the Rounded Rectangle Tool with the following settings: Fill pixels, Radius: 3px, Mode: normal, anti-aliasing off. Draw a rectangle and open the Layer Settings (double-click the layer). Use the settings from the screenshots:
Now add the text with the text tool.
You probably didn't use all the space in the image, so lets remove the unnecessary area around the button. Zoom in to 300% and use the Crop Tool to drag a rectangle around the button and press enter to remove everything on the outside. That's it! You're done. Use File > Save for web (Alt+Shift+Ctrl+S) to save it as a transparent gif.
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials
Reiven March 01, 2005 says:Thanks Amitabh. I have corrected the mistake and slightly improved the tutorial.
graphicsguru February 25, 2005 says:Good eye amitabh on the typo in the gradient gif image at first glance I did not see this at all. only after I download the gradient gif image I seen it
amitabh February 25, 2005 says:there seems to be a slight typo error in this article: when applying "Gradient Overlay", the two colors should be #A1A1A1 and #ffffff .