Skip to content


Fireworks: jewelButton

Here’s a simple little button that you can create without any external filters/plugins and is scalable to any resolution since it is 100% vector.

1 – Base

Use the Rounded Rectangle tool and draw an object similar to my example image below.

2 – Fill

Now let’s change the fill options for our rectangle. Set the Fill category to Gradient | Radial and set your colors similar to my example image below.

With the Pointer tool , drag the gradient bar from the middle of the image to the bottom like my example image below.

3 – Inner Shadow

With our rounded rectangle still selected click on the + icon in the Filters: section of the Properties Inspector. Choose: Shadow and Glow | Inner Shadow and change the settings to match my example image below.

Press enter and your image should now look like my example below.

4 – Inner Border

Now it’s going to get a little tricky. With our rounded rectangle object still selected press CTRL + C and then CTRL + V to duplicate it.

Now press CTRL + SHIFT + T to bring up the numeric transform dialog box. Change the dropdown option to Resize and uncheck Constrain Proportions.

Change the number values in both boxes to a value that is 2 pixels less then the initial value. For example, my initial values were 90×28 so I changed them to 88×26. See the example image below:

Now we need to change the fill and stroke values for this new object. Set both the fill and stroke options exactly like my example image below.

Finally, change the opacity of this new inner border to 35% or so. Your image should now look like my example below.

5 – Glass Shine

Similarly to step 4, select the inner border object that we just created and duplicate it with CTRL + C and CTRL + V.

This step is really super important!!! In the layer panel, click on the layer BELOW the one you just duplicated. We want our original inner border layer to be on top of our hilite layer.

With that little warning out of the way, let change the fill and stroke option on the layer below the original inner border layer. Simple change the Fill to solid White (#FFFFFF) and the Stroke to nothing. Finally, change the opacity of this layer from 35% to about 15% or so.

Using the Subselection tool , hold down the SHIFT key and click on the 3 control points in the lower right portion of the object. See the example image below to see what I’m talking about.

While these 3 control points are selected simply press the Delete key on your keyboard. Your image should now look like my example below.

Final

And with all of that, our button is finally complete. All you need to do is add some text, an icon image or maybe even a dropshadow and you are good to go. With just a couple of clicks you can easily change the base colors to match your button to any web site color scheme.

Download the source PNG



RSS | valid XHTML & CSS | Powered by TXP

©1992-2008 qrayg.com | all rights reserved.