|Commands||Styles||Textures||Libraries||Patterns||Auto-Shapes||Rich Symbols||Swatches||Plugins||All Extensions|
A stunning glass button, Vista styled, with a glowing effect.
All Fireworks versions.
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.
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.
As an alternative to the rounded rectangle auto shape you can use a rectangle with a roundness of 2 px applied.
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.
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.
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.
Now it's time to apply a dark edge to imitate the effect of an inner bevel.
Your button should look something like this:
Become an author
Sponsored LinksAddiction Recovery
Copyright © 2013 Fireworks Zone
Fireworks is a registered trademark of Adobe