21 April 2007

Really fast buttons

This technique can be used to make good looking buttons in a very short time.

  1. Open a new document in your favourite graphics program.
  2. Create a rounded rectangle to the size you require.
  3. Add a drop shadow: Distance 0, Softness 3.
  4. Add another rounded rectangle. This one should be half as high as the first with 1 pixel on the top, left and right sides.
  5. Create a gradient on the new rectangle. It should be fully white with full opacity on the top and 35% on the bottom. Drop the total opacity of this box to 35%.
  6. Add your text in white.
  7. Drop the opacity of your text to 65%.
That's it. You can now change the fill colour of the first rectangle to whatever you want to make new buttons. If your new colour is very light, then change the text colour to black and raise the highlight rectangle opacity to 65%. If you wish, give the first rectangle an outline of a slightly lighter or darker colour than the fill.

Here are some examples: