Navigate directly to any step..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
Home Fireworks@Parrotworks Welcome Design Instructional Note Feedback

fireworks tutorial - welcome
System requirements, time requirement, audience, objective

design
This tutorial has been designed to also instruct you while in the actual software

instructional notes

opening a new document
Select the File menu. Then select New.

define canvas size
Enter a Canvas Width of 400 and a Height of 100. Then click the OK button to proceed.

draw a box
Select the Rectangle tool, then draw a large box. This will become the button backdrop. Click next to proceed.

open the fill window
Select the Window menu.
Then select Fill.

change fill
Here is a sample of the types of fills you can use. Select Pattern from the drop down menu.

apply fill
And this is a sample of the types of patterns you can use.
Click the Apply button.

drop guidelines to define buttons
Drag guidelines from the top and left rulers to define four buttons.
Click next to proceed.

open the layers window
Select the Window menu.
Then select Layers.

add a new layer
Select the button on the right hand side of the Layers menu.

add a new layer
Select New Layer.

name the layer
Type the name "Text".
Click the OK button.

select the text tool
Select the Text tool.
Then click on the canvas where you want the text to begin.

create your text
Create your text. There are several options including kerning and leading.
Click the OK button to proceed.

duplicate the text
Copy and paste the text for the four buttons. Double click on each text field to change it using the text editor.
Click next to proceed.

change the text color
Shift-click on each text field to select all four. Choose a text color from your Fill Window.
Then click the Apply button.

open the frames window
Do a Ctrl+D to deselect all.
Then click on the Frames tab.

duplicate the frame
Open the Frames Window dropdown and select Duplicate Frame.
Click next to proceed.

enter number of frames
Buttons can have up to four states: Up, Over, Down and onClick. Enter the number three.
Then click the OK button.

select text in frame two
Duplicating automatically advanced you to the second frame. Select all of the text on the canvas.
Click on the Effects tab.

choose an effect for frame two
Here is a sample of the effects you can use. Choose an effect.
Then click the Apply button.

choose effects for other frames
Apply effects to the other two frames.
Then click the Apply button.

set slice defaults
Select the File menu.
Then select Slice Defaults.

open comparative view
Select the two pane view button.

select best export quality
Use the comparative view to preview and select a default export format.
Click the Save & Close button.

define button target
Select the Slice Tool and drag a box to define the first button.
Click next to proceed.

create a new link
Select a URL, change the slice type to rollover and select a slice export setting.
Then click the OK button.

enter a new link
The red lines represent where the graphic will be sliced.
Click next to proceed.

create other URL links
Repeat this process for all four buttons.
Click next to proceed.

hide URL links
Click the Hide URL Hot Spots button.

export slices
Select the File menu.
Then select Export Slices.

save
Make sure the Generate HTML option is checked. Enter a file name.
Then click on the Save button.

tada
Try your new buttons out.
Then select an option below.

feedback
Your feedback is important to us, even if it is merely to tell us how the tutorial performed on your platform. Thank you!