Tips, Tricks and Hacks 2: Building Better Buttons
by Heather Champ
Interface design had moved from the original 
to somewhat more designed 
elements which should emphatically scream to the user... click me! Click me! Click me! If you use Adobe's Photoshop you can easily create great looking buttons very quickly and with minimal difficulty.
In Tips, Trick and Hacks 1 I introduced the fine art of the drop shadow. We'll revisit the drop shadow as the final frosting to complete our better buttons.
The Shaded Lozenge
Ovals are great for buttons but tend to take up more room than a lozenge shape therefore requiring more space in your document. Unlike Quark or Pagemaker, Photoshop does not allow for a user to create a lozenge like shape in one move. You can option click the marquee tool to create oval or square shapes. It's easy to work around this deficiency with a couple of deft moves.
1. Create a new layer. Option click on the marquee tool to be able to create a circular shape. Create a circle by holding down the shift key while drawing the shape. Fill the selected area with the color of your choice.
2. Option click on the marquee tool to return the square shape. Select half of the image and use the arrow keys to move it to the left or right.
3. Select the area between the two halves and fill the void.
4. If you work on separate layers you can copy and paste the lozenge shape and shrink or expand it's length depending upon your text.
5. The final pizzazz! I've selected sub-category "Lighting Effects..." from the "Render" category under filters which gives the lozenge shape a more multi-dimensional look. Select "Lightype - Spotlight". It takes a bit of experimentation to achieve a shadow that is neither too dark nor to light. Finally, by adding a drop shadow, the button appears to be slightly elevated from the page which in turn begins to play with spatial aspects. I've inverted the type to white to stand out on the oval.
- you can change the size shape of the completed lozenge with the scale feature under the "Effects" category from "Image" in the main menu.
The Beveled Rectangle
If you prefer a square or rectangular shape, the beveled rectangle is an elegant solution.
1. Create and fill a square or rectangular shape. I'm designing my beveled button with the light striking from the top left so I've selected the top and the left side and brightened the chosen color "+50" with the "Brightness and Contrast" sub-category from "Adjust" option from "Image" in the main menu. The illustration shows the selection of the bottom and right and I've repeated the "Brightness and Contrast" feature but this time, reducing the brightness to "-75".
2. I've enlarged the image to show a pin-striping detail. The beveled appearance in further enhanced by running a line of color around the inside of the brightened and darkened edge. Select the darker color from the bottom and right and run a one pixel line below the top and left lightened area. Then, select the lighter color from the top and left and run it above the bottom and right edge. 3. Again, by adding a drop shadow, the button appears to be slightly elevated adding to the spatial illusion.
These simple tricks are an easy and quick way to gussy up simple graphics.
