Buttons Page - 3

Discussion

Since we created this aqua button using vector shapes and layer styles, we have a scalable button that's easy to edit. If we want to change its colors, all we have to do is change the colors of the gradients and effects in our layer styles. If we want our button to be slightly longer, we can use the Direct Selection Tool (A) to modify the vector path.

This solution has demonstrated an important concept about layers: even when the fill of a layer is set to 0%, the layer styles still show up! You may find this useful when you're creating your own effects.

Another cool thing about this technique is the fact that once you've created your first aqua button, it's very easy to create other buttons -- you just have to copy the layer effects. I'll quickly show you how you can make a rectangular aqua button in a few simple steps.

  1. In the Layers palette, create the layers you'll need for the rectangular button: the base button layer, the highlight layer, and, if you're planning on using the embedding effect, an emboss layer, as shown here.
  2. To copy the layer effects from the original aqua button to the rectangular button, hold down Alt (Option on a Mac) and drag the layer style icon from the original button layer over to its corresponding rectangular button layer, as shown in the image.
  3. Change the fill of the highlight layer to 0%.
  4. Add the button text and repeat step 2 to copy the drop shadow style we used for the original text.

That's it! Your rectangular aqua button is ready to be used, and should look like the one here.

Making a Transparent Aqua Button

We can also make our aqua buttons see-through, like the one shown here.

In this solution we're going to begin with a basic aqua button. If you don't already have one (and everyone should!), you can make one by following steps 1-16 of the "Making an Aqua Button" solution.

Solution

  1. Place your basic aqua button on top of a faint, patterned background, as shown here.
  2. Double-click on the f icon for the layer -- this will bring up the Layer Style dialog. Select the Gradient Overlay style and click on the Gradient swatch to bring up the Gradient Editor.

  3. Click once above the gradient bar, in the position shown in this image, to create a new opacity stop. Change its opacity to 50%.
  4. Click OK to exit the Gradient Editor, and OK again in the Layer Style dialog to apply the style.

  5. Set the fill of the button layer to 0%, as shown below. The background will show through.

    That's looking pretty good! But, as always, there are a couple of things we can do to make it look even more polished.

  6. Double-click the f icon to open the Layer Style dialog, and select the Drop Shadow style. Choose a bright aqua color for the shadow (#90c9e7) and increase the Distance and Size slightly. Change the Opacity to 40%, as illustrated here.
  7. Next, select the Stroke style. Add a dark blue (#0d487b) 1px stroke, with about 75% opacity, as shown below.
  8. Finally, select the Inner Shadow style. Change the shadow color to a blue that's slightly darker than the one we used in the original gradient button. Lower the Opacity to 50%, and change the Distance to about 10px (or whatever suits the size of your button), as shown below.
  9. Click OK to apply these new styles. And -- as you can see below -- we've got our final transparent aqua button! Swish, very swish!

This entry was written by Damodharan and posted on 1:04 AM and filed under Bookmark the permalink . Follow any comments here with the RSS feed for this post . Post a comment ( in a new window )

0 comments

Make A Comment
Subscribe to: Post Comments (Atom)