Crystal button

562

Randall Huamani

862

353879

27 January, 2010

Description

A stunning glass button, Vista styled, with a glowing effect.

Requirement

All Fireworks versions.

Article

Just a few short years ago the gloss, or shiny look took the world of web interface design by storm. From a visual design perspective it became synonymous with web 2.0 - the modern crème de la crème of internet buzzwords! But is the glossy button falling from grace? Perhaps, but that won't stop us from exploring some fun Fireworks techniques as we create some glossy shiny buttons in Adobe Fireworks.

1. Final Result Preview



Final button

2. Step 1

Start with a new document 80x32 pixels with a blue background #0082B0.

Then select the rounded rectangle auto shape (in the Tools bar) and draw a rectangle then go to the Auto Shape Properties (Window > Auto Shape Properties) to modify the rectangle to 60x28 with a 2px rounded corners. See Figure 1.



Figure 1:Auto Shape Properties

As an alternative to the rounded rectangle auto shape you can use a rectangle with a roundness of 2 px applied.

3. Step 2

Apply a radial gradient, white on the center with # 666666 for the background, then expand the handle a little bit, to make the effect a bit softer. See Figure 2.



Figure 2: radial gradient zoomed 300%

4. Step 3

Then apply 2 Inner Shadows to create a bevel effect because the Fireworks bevel does not work very well to this case.

First, Inner Shadow: white color, one pixel wide, 270° angle and 65% opacity. The second Inner Shadow will have a 90° angle.



Figure 3: Inner Shadows



Figure 4: end result zoomed 300%

Thin strokes (1px) on rounded rectangles don't render very well in Fireworks. the stroke set in the PI seems to render heavier in the corners when setting the stroke to 'inside' or 'center'. Both seem to render well when the stroke is set to 'outside' though. As an alternative you may have used the Stroke from the Photoshop Live Effects or rounded corner when stroke is set to 'outside', the corners look almost perfect.

5. Step 4

Now it's time to apply a dark edge to imitate the effect of an inner bevel.



Figure 5: Glow 1



Figure 6: Glow 2

Your button should look something like this:



Figure 7: end result zoomed 300%