Power Effects

To begin exercise, I've used the Rounded Rectangle Tool to create a simple rectangle with 'the Create New Workpath button depressed (the second selection in the options bar). Under the paths palette I converted my path to a selection and filled it with 50% gray. Then with the Circular Marquee I selected an area along the right edge of the image and deleted the gray.

Pretty cool, huh? Ok, maybe not so much. Better do some more tweaking!

Let's duplicate this layer, and reselect. You can do this by Command/Control Clicking the layer name in the layers palette. On the new layer, contract the selection. At 72 DPI I contracted 8px, but at a higher resolution (I normally design at 200 dpi) you may want to increase the contraction. Now Select inverse, delete, and select inverse again.

Let's play with the Layer Styles a bit. When you installed Photoshop 6, many Layer Style sets were installed with the program. We want to load the Glass Buttons Set. In the Styles Palette select the Load Styles from the menu. You will find the Glass Buttons Styleset in the Photoshop 6>Presets>Styles directory.

Once the Styleset is loaded, make sure the top layer is selected and click on the Orange Glass Style to apply it to this layer.

I want to dress this up a bit by giving the 'button' a little edge so I'm double clicking the 'effects' for this layer and opening the Layer Style options, and applying a black to white gradient stroke to the outside edge of the button.

Eventually I would like to place some text in this button, so in the Layer Styles I'm decreasing the size of the bevel to flatten the center out a bit.

Ok, I think I'm don messing with the foreground for a bit. Let's go back to the previous layer. Command/Control>Click Layer 1 in the layers palette to select it. Make sure layer 1 is highlighted in the palette, as we don't want to disturb our settings for the button layer!

Again, we need to load a Layer Style Set. Following the same procedure for doing so listed above, load the Text Effects Styleset into the palette. The style we are looking for is called, simply enough, 'Wood'. Apply that style to this layer.

A little drop shadow goes a long way, so open the styles for this layer and select the default drop shadow. Just place a check next to 'Drop Shadow' in the blending options menu when you open the styles window.

Now in a new layer I can enter my type and make transitions for rollovers simply by changing the layer style applied to the type!

OR...

You could apply the style change to the button itself, leaving the type alone:

This same method can of course be applied to type. For example:

When you create your menus in this manner, they are extremely versatile and stackable for use in expanding menus. Take a peek: