Quantunet.com

My Account

Joins Us
Fireworks QuickSkills

Creating A Web 2.0 Style Button

How to create a web 2.0 style button:

1. Draw the rounded rectangle:

  • In the tools panel in the "Vector" section:
    • Press and hold the left mouse button on the "Rectangle tool" icon and select the "Rounded Rectangle" from the menu.
  • Position the cursor where you want a corner of the rectangle.
  • Press and hold the left mouse button then drag the cursor to extend the rectangle to the required size.
  • Release the mouse button to draw the rectangle.
  • Use the yellow drag handle near a corner of the rectangle to set the roundness of the corners to maximum.
  • In the align panel click on the "To Canvas" icon then click on the "vertical center" and "horizontal center" icons.

2. Create a color gradient fill:

  • Then in the properties panel:
    • Click on the color box next to the pencil icon and set the stroke color to "#FF3300".
    • Click on the "Fill category" menu next to the "Paint bucket" and go to Gradient > Linear.
  • On the gradient fill:
    • Position the cursor over the small black point (gradient pivot).
    • Drag the cursor to move the pivot point.
    • Hover over the gradient line.
    • When the "rotation" cursor appears drag to rotate the gradient.
    • Position the cursor over the large black point (gradient boundary).
    • Drag the cursor to reposition the boundary.
  • Then in the properties panel:
    • Click on the color box next to the pencil icon and set the stroke color to "#FF3300".
    • Click on the "Fill category" menu next to the "Paint bucket" and go to Gradient > Linear.
    • Click on the chevron next to the "Paint bucket" icon.
      • In the gradient fill editing panel set the color options e.g. "#FF9900" and "#FF3300".

3. Create the button shine effect:

  • In the main menu go to Edit > Duplicate.
  • Then in the "Align" panel center the rectangle to the stage.
  • Then in the Image Editing panel click on "Transform Commands".
  • In the "Numeric Transform" window set the scale to "95%" and press the "OK" button.
  • Select the blue corner point to the rectangle and drag to vertically resize.
  • In the properties panel:
    • Click on the color box next to the pencil icon and set the stroke to transparent.
    • Click on the chevron next to the "Paint bucket" icon.
      • In the gradient fill editing panel:
        • Set the color options e.g. "#FFFFFF" and "#FFFFFF"
        • Set the pixel opacity to "80%" and "0%".
  • In the properties panel click the "Add live filters or choose preset" button and select Blur > Blur.

4. Add a glow to the button:

  • Select the large rounded rectangle.
  • In the properties panel:
    • Click the "Add live filters or choose preset" button and select Shadow and Glow > Inner Glow.
      • Then in the filter editing menu:
        • Set the the "Width" to "2" pixels.
        • Set the "Color" to "#FFFFFF".

5. Create the button text:

  • In the tools panel click on the "Text tool" icon.
  • Position the cursor where you want to insert the text.
  • Left click then type the text you require using the keyboard e.g."Quantunet".
  • Select the text and align it to the center of the stage.
  • Then in the layers panel select the text layer and drag it between the two rectangle layers.
 

© 2007 Quantunet LLC All Rights Reserved | Intellectual Property | Terms of Use | Privacy
Home | About Quantunet | FAQ's | Contact Us