Home | Success Stories | Services | Partnerships | Contact

Fireworks Tips and Tricks

By Zia van der Veen

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

I have listed out a few techniques and tips 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 a 3D illusion using gradients.

• Create a Push button effect

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 :
Softness :
Angle : 135
Button preset : Raised

Your image should look something like this.

# Step 4

Clone the circle. 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 circle and select the Paint bucket tool (K). 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 first layer as button. Rename the second 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 the command > 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'.

# Step 7

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

# Step 8

Click on the eye icon to toggle visibility of the Web layer. 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 >>