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.

Here is mine: DOWNLOAD PSD FILE

Like this tutorial? Share it


User Comments

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좋네여~~
kin Nov/16/05 01:46it is poolish. mm... 초
Jay Sep/30/05 15:28another good one there. thanx.
See 26 - 27 of 27 comments

Leave A Comment

Your Comment:
Your Name:
Your Email:
Your Website: (optional)
ecover design tutorial tutorial tutorial url shortener
psdeluxe Photoshop Lover Good Banners Add Your Site