• Select desired shape from the tools panel
  • Drop-down menu on rectangle option reveals multiple shape options
• Resize shape
  • Holding Shift key constrains proportions
  • Utilizing w and h coordinates enters precise measurements
  • Changing x and y coordinates positions object on canvas
  • Selecting object and using transform handles also resizes
• Duplicate shapes
  • Select shape
  • Edit > copy; edit > paste

Applying Colors and textures:

• Select objects (edit > select all to apply to multiple objects
• Utilize fill color box in property inspector to add fill color
  • Choose color off palette; utilize extended palette, or enter hexadecimal value
• Change edge from anti-alias to feather to apply texture to object
  • Adjust settings/texture options
  • Use slider on right of texture to adjust opacity

Adding Type

• Select Text Tool form Tools Palette
• Utilize Property Inspector to change font, size and color
• Select pointer tool to select text block to reposition
• Select pointer tool to select text block
• Rearrange objects in foreground or background by rearranging layers or selecting Modify > Arrange.

Composing with Photos

• To import photo to canvas Select File > Import; position cursor on canvas and click
• Click Add Effect"+" sign in Property Inspector to add effects such as dropped shadows, blurs, beveled edges, etc. to image.
• Select tools in tools palette to add specific effects to images such as blurring edges, etc.
• To create a mask:
  • Select rectangle tool - set fill color to white; stroke to transparent
  • Draw rectangle over image
  • Select Modify > Mask > Group as Mask.

Working with Layers

• Choose Window >Layers to view layers panel
• Use drop-down menu on panel to add layers
• Rearrange layers to change stacking order of objects
• Name layers to keep track of elements on screen
• Show/hide and lock layers using symbols in layers panel

Creating buttons:

• Create a button from "scratch" - Choose Edit > Insert > New Symbol
  • Alternative - Converting an existing graphic to a button
  • Select an existing graphic/picture
  • Choose Modify > Symbol > Convert to Symbol
• Name new symbol and select "button" as type
• Draw symbol on canvas to create button
• Use Align panel if needed to align objects (Window > Align)
• Click on "over" tab to create button "Over" state
  • Click "Copy Graphic UP Button" if same graphic is desired
  • Modify button for Over state
• Repeat for down state if desired
• Check active area
• Click Preview to view rollover states.

Duplicating Buttons

• Often you want to re-use a button graphic but with different text on each button. This is often done for horizontal or vertical navigation bar buttons. There is an easy way to do this in Fireworks.
• After you have converted the graphic to a Button Symbol, you can then duplicate copies of the button and change the button text and link
• Select Button
• Select Edit > Duplicate from the Main Menu. This will duplicate the original button and place a new duplicate button near the original button on the canvas.
  • Edit > Clone would create a new button directly over the existing button. You do not want to use Edit > Clone in this exercise. Use Edit > Duplicate.
• Select the duplicate button with the Arrow tool.
• Using the Properties Bar,
  • Change the Button Text in the Text Format window.
  • Change the X coordinate location for the button:
  • If the Button is 150 pixels wide, buttons would be placed as follows
    • Original Button - Text = "Home" and X = 0
    • New button 1: text = "Page 2" and X = 150
    • New button 2: text = "Page 3" and X = 300
    • New button 3: text = "Page 4" and X = 450
• Save the changes to the duplicate button.
• Repeat the process to create additional buttons as needed. All buttons will have the identical colors, shape, and text font, but will have different text labels on the buttons.

Creating Roll-over buttons With Pop-up Menus

• After creating a button;
• Select button on canvas
• Click center circle to "Add Pop-up Menu"
• Add links as desired - Macromedia / Apple / CNET / WebOPedia.com
• Set position of the Pop-up Menu on page with blue wireframes
• Add Submenu
  • New Links - Fireworks / Flash
  • Indent those to Macromedia

Adapted from and with grateful acknowledgement to Prof. Krista Perry, Macromedia Studio MX Workshop, Radford University, May, 2004