Firework skill--using fireworks to create fake 3D buttons

Buttons | creating | tips

Use the gradient effect in fireworks to make a 3D button that looks really like it. Less gossip, let's get started.

First step:

Open a new file, select the ellipse (Ellipse) tool, and draw a circle (hold down the SHIFT key to draw a positive circle).

Step Two:

Select the circle you just drew, fill with a linear gradient with the Fill tool (fill). I'm using a red and black gradient here, as shown in Figure 1.

Figure 1

Step Three:

Select the circle, open the effect (Effect) panel, select bevel and Emboss >inner bevel in the Drop-down menu, and set the following parameters:

Bevel Edge Shape:flat Width:5 Contrast: Softness: angle:135 Button preset:raised

Your picture should be like this, as shown in Figure 2:

Figure 2

Fourth Step:

Clone the Circle (Ctrl+shift+d), at which point the second circle is already in the upper part of the original circle.

Right-click this circle, select Transform >numeric transform, and tick before constrain proportions, enter a value of 75%. Are you sure.

Fifth Step:

Select the circle and choose the paint barrel (Paint bucket) tool. You will see two adjustment handles, where the square is used to rotate the gradient direction, and the circle is used to adjust the offset. Rotate the square handle 180 degrees and drag the round handle slightly to make it look like the following figure, as shown in Figure 3s:

Figure 3

Save the file as a illusion.png.

Look! A pretty 3D button is done!

Here we want to add a "down" dynamic effect to this button.

First step:

Open Illusion.png. Open Layer (Layers) panel, you can clearly see that this picture contains two layers, as shown in Figure 4.

Figure 4

Step Two:

Double-click the name of the layer to change the first level name to a button, and change the second layer name to Button_rollover (Figure 5).

Figure 5

Step Three:

Click on the eye icon to hide the button_rollover layer.

Fourth Step:

Select the button layer. Right-click on the picture and select Insert Slice command.

Fifth Step:

Open window (window) >frames (frame) panel. What you see is the default Frame1. Select it and drag it to the "new/duplicate frame" icon in the lower-right corner of the panel.

Sixth step:

Select the second frame (frame 2) To open Windows (window) >layers Palette (layer Panel). Click the eye icon on the left side of the button_rollover layer to make the layer visible.

Seventh Step:

In the frame panel, select the first frame (frame 1) to make sure that the "button_rollover" layer of the level board is hidden.

Eighth Step:

Click on the Web layer layer to make sure that the layer is visible. Right-click the slice on the picture window and select "Add Swap image behaviour (add swap image behavior)". A dialog box appears, as shown in Figure 6.

Figure 6

* Selected slices for picture exchange
* Select frame number, where Frame 2 is selected.
* Select "Preload image" and "Restore image onmouseout".
* Press OK button.

Then your picture will become like this, as Figure 7:

Figure 7

Nineth Step:

Select File > Output (export) to open an Output dialog box. Enter the filename, select "HTML and Images" in the Save type, and "Export as Slices" to the right of "Slices".

Your 3D button to complete this smoothly, do not hurry with the mouse click to see the effect!