Fireworks Tips and Tricks

- Zia Vander Veen

Welcome to Stylusinc.net's tutorial on Fireworks .... the place to pick up interesting tips and techiques.

I have listed out a few techniques which I feel are a good introduction to using Fireworks especially if you are a beginner.

One thing to keep in mind is a simple word - experiment !! Experiment till you get the effect you want....... experiment till you get something that satisfies you completely.

Are you ready ?? Then lets get started.....................


Create an Illusion using Gradients
Level : Beginner
We will be creating the illusion of a 3D button with a simple trick - rotating a gradient 180 degrees.

# Step 1

Open a new file. With the ellipse tool selected, draw a circle.
( Hold SHIFT key to create a perfect circle )

# Step 2

Select the ellipse. Using the Fill palette, fill with a linear gradient. Here I have used shades of red and black.


# Step 3

Select the ellipse. Open the effects panel > Select Bevel and Emboss > Inner Bevel and give the following values :

Bevel edge shape : Flat
Width : 5
Contrast :75
Softness :3
Angle : 135
Button preset : Raised
Your image should look something like this.


# Step 4

Clone the circle.
Right click the circle > Edit > Clone

The second ellipse is now placed on top of the original circle.

Right click the circle > Transform > Numeric transform > Check the Constrain Proportions option and give a value of 75% in the Scale tab.

# Step 5

Select the inner circle and select the Paint bucket tool (G). We now have two handles on the selected circle .
A rectangle one which can be used to rotate the gradient's direction and an oval one which affects offset. Rotate the rectangular handle 180 degrees and drag the oval handle a bit till it looks something like the image on your right. You may need to experiment a little to get the effect you want. Save the file as illusion.png.

HOT TIP
Try using a pattern along with the gradient fill ... it gives an interesting look to the button.

Voila !! A beautiful 3D button.








Push button
Level : Intermediate

Did you know that you can create a complex javascript effect using Fireworks ?? Its a simple process........ just follow the steps outlined below .

We will now use the same image and create a push button effect using the Swap Image command in Fireworks.


# Step 1

Open illusion.png. Open the Layers palette. You will see two layers each containing artwork.


# Step 2

 Double click on the layer name and rename the larger as button. Rename the smaller layer as button_rollover.

# Step 3

Click on the eye icon in the layers palette ( this eye icon toggles visibility ). Hide the layer button_rollover.

# Step 4

Select the layer 'button'. Right click on it and choose Insert slice.

# Step 5

Open Window > Frames palette. You will see the default Frame 1. Select the frame and drag to the icon at the bottom of the palette > New/ Duplicate frame.

# Step 6

Select the second frame. Open Window > Layers Palette. Click on the eye icon to toggle visibility of layer 'button_rollover'. to on

# Step 7

In the frames palette, select Frame 1, in the Layers palette and hide layer 'button_rollover'.


# Step 8

Right click on the slice in your document window > Add Swap Image Behaviour. This opens a dialog box.

  • Select the slice for image swap.
  • Choose the frame number. In this case the frame number to be swapped is Frame 2.
  • Check the Preload Images and Restore Image on MouseOut options.
  • Hit OK.

This is what you should see >>

# Step 9

File > Export . This opens an export dialog box. Type a File name Rollover_Sample, Save as Type > HTML and Images , Slices > Export as Slices.


<< Rolloverthe image to the left see the ' push button effect '


You did it !! Your 3D Push button is ready!

You will need to open the ~~.html file in a web browser to see the effect.