The trend of glass-like or glossy design effects comes and goes, and right now it’s definitely in, at least if you go by folks like Nintendo, Apple, and Adobe.

A glossy effect can easily be achieved on any solid shape, photograph, or icon with a simple selection marquee and a white-to-transparent gradient. But if you create the effect using selection marquees, you limit your ability to resize and reuse it later. I like to go a step further when I make glossy buttons for the web by using versatile vector shapes…

1) Start things off on a new layer with a bright foreground color chosen and a slightly lighter background color chosen. Use any vector shape tool to draw your button. I’m using the Rounded Rectangle tool. Make sure that the first button in the options bar, “Shape layers,” is selected so you’re drawing a simple vector shape. The shape will show an outline, but this won’t show in your final output. (By the way, even if you’re not into these glossy buttons, learning to use vector shapes is still smart!)

2) Give the button a subtle gradient. This isn’t as simple as using the Gradient tool since we’re using a vector shape. Instead, add a Gradient Overlay layer style (Layers > Layer Style > Gradient Overlay). In the Layer Style dialog, click the gradient ramp and choose the Foreground to Background gradient so the colors you chose earlier are used.

3) Doesn’t look very glossy, does it? To give the glossy button its trademark highlight, we’ll create a new vector shape that intersects with the existing one. This shape can be a copy of the existing button shape, a simple rectangle or circle, or a more curved shape. I prefer the latter, and I like to make the shape slightly smaller than the button.

Duplicate the shape layer and make sure you’re on the top layer. Choose the vector shape tool you prefer and click the “Intersect shape areas” button in the options bar (the fourth button in the pathfinder lineup—hold your cursor over the buttons to see their names). Also, choose white for your foreground color before continuing on.

4) Now draw your shape so that it sits in the upper part of the button, a few pixels in from each side. You can even use multiple shapes plus different pathfinder tools to create just the right shape, or draw it freehand with the Pen tool. I’ve seen some great glossy buttons out there that use a wavy, Pen tool-drawn shape across the button’s diagonal.

For mine, I added a rounded rectangle with the “Intersect shape areas” pathfinder, then subtracted an ellipse shape from it using the “Subtract shape areas” pathfinder. The resulting shape is a rounded rectangle at the top with a concave bottom. This will be clearer when the next gradient is added.

5) Your duplicated layer with your intersected shape will already have your original gradient overlay on it, but we need to change the color. Double click the layer style to edit it, and in the Layer Style dialog, click the gradient ramp. With white as your foreground color, choose the Foreground to Transparent gradient. This at first appears backwards—we want the white on top and transparent (fading to the original shape color) on the bottom. Click OK, then simply reverse the angle of the gradient to -90.

6) At this point, your glossy button is essentially done, but hard to see properly because of the outlines on the shape layers. Click on the Background layer to see your results. Chances are, this isn’t exactly how you want it the first time, but the versatility of using vector shapes and the Gradient Overlay style means you can make lots of edits easily. For example, I decided to slightly darken the foreground color of my original button gradient to make my highlight gradient shape stand out even more.

7) With your button complete, you can add any text or icons needed. You can also easily scale the button’s vector shapes to create other buttons. This maintains the shape and effects quality, unlike the old selection marquee method. You can even easily change the color of the buttons by simply editing the gradients.

There are tons of variations on this technique, and with some experimenting, you’ll probably find even better ways to create special button effects and use vector shapes. At least until the next button trend comes along.

This entry was posted on Tuesday, July 24th, 2007 at 9:13 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.