Home About Contact Us search

Micro Buttons

Micro buttons are quite popular on the internet, this tutorial will show you how to create a micro button that is crisp and clean to use for your website navigation. .

- Start a new document.
- Create a new layer.
- Then use the rectangle marquee tool and create a selection the size of the button you want to create and fill it in with light grey (#E3E3E3)

Now CTRL+D to deselect and zoom into the image large enough for us to work with single pixels (i zoomed in at 600%)

- Create a new layer.
- Use the pencil tool with 1 pixel hard edge brush selected, then draw 4 lines like I have below. (Left and Top: #6D6D6D - Right and Bottom: #303030) Now you can hide

Now draw another right and bottom line (inside and outside) using color:
(Outside #A8A8A8, Inside: #BEBEBE)


Now draw another line inside, this time, all 4 sides. Use color:: ( Right and Bottom #D1D1D1. Left and Top: #FFFFFF

Now use the type tool to create your text. We will use "Verdana" I think this is standard on windows (if you dont have it, try arial) and use the following settings in your characters pallete to create a pixel font.

Then apply the following drop shadow (Layer » Layer Style » Drop Shadow) to the text layer.

Now zoom out to acutal size and there you have it, a microbutton to use for your website.


Like this tutorial? Share it

User Comments

PERNIS Mar/05/2010 06:09VAGTASTIC
Sammaye Feb/16/2010 21:18Nice tutorial. Helped me decide how to present micro buttons for my shopping site project and jesse you shouldn't judge this tutorial so easily...if it's so dumb why do all the shopping sites (including Amazon) use this type of micro button...
egypt web design Feb/03/2010 20:51thanks for the nice tutorial
jesse hernandez Oct/07/2009 04:50this is the stupidest tutorial ive ever seen/done. you should be asamed of yourself! goodbye!
Atul Aug/29/2009 02:11Nice Tutorial for beginners
http://www.tuties.com - hacking, sex, photoshop, f Oct/15/08 16:10http://www.tuties.com - hacking, sex, photoshop, flash and much more tutorials.
hola Sep/8/08 12:47Marvelous. Thanks, will spread this among my friends!
shaista Dec/13/07 20:45i want to know that in adobe photoshop how we can create links that a new page open on that link u can mail me plz at shaistamustafa2002|@yahoo.com,ushaista@hotmail.com thanks bye
kmfdm Dec/12/07 08:33stupid you say... gave me a great idea for a startup
Bubba Gump Jun/23/07 04:50Stupendous. Thanks, will spread this among my friends!
My Cocks in ur ass Jun/16/07 13:36read the name
Cockk ass Jun/5/07 21:33I Will Spread this On my Friends. and they will like it. its creamy. cream. i want to rub butter on your ass
aswathy Feb/19/07 00:35excellent.. i will spread this among my friends
ringtones Jan/5/07 03:50Marvelous. Thanks, will spread this among my friends!
student loans Jan/4/07 23:38Marvelous. Thanks, will spread this among my friends!
juicey Dec/26/06 22:22Marvelous. Thanks, will spread this among my friends!
immitation Dec/26/06 18:00Marvelous. Thanks, will spread this among my friends!
balenciaga Dec/26/06 13:05Marvelous. Thanks, will spread this among my friends!
martin Nov/6/06 14:23ti josh:you're a little blind..
Josh Sep/11/06 23:07Buttons are too hard too read, espcially for people with limited visuals.
Leonardo Procópio Jul/29/06 09:45MuitO bom esse tutorial!
dasaef Mar/13/06 06:10I dont now how to change the text size from pt in px.Pls help me!
terry mccann Mar/12/06 12:08bla is a homo. nice work
Bla Feb/28/06 13:13This was awful!!!
이성식 Jan/14/06 12:09좋네여~~
See 26 - 29 of 29 comments

Leave A Comment

Your Comment:
Your Name:
Your Email:
Your Website: (optional)
ecover design tutorial tutorial tutorial

» Web Templates - by BoxedArt

psdeluxe Photoshop Lover Good Banners Add Your Site