• 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

Back to Top

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

Back to Top

Adding Text

• 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.

Back to Top

Working 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.
• Simple Photo Editing
• Crop an Image
  • Select the photo on the stage - See magnolia_tree.png
  • Crop Tool:  Tools Panel > Select Panel > Crop Tool
  • Click & Drag with mouse over area to be cropped
  • Properties Toolbar - Fireworks Bottom Panel - Change Width & Height to get perfectly square 100 x 100 thumbnail, for example.
  • Use the Arrow Keys to position the crop selection.
  • Hit "Enter" key to crop/resize.
  • Edit > Undo to undo crop and start over.
• Re-size an image
  • Select image on stage
  • Note Image Size on the Satus Bar (Below Image)
  • Select Modify > Canvas > Image Size
  • Image Size Dialog Box: 
    • Make sure Constrain Proportions is checked!
  • "Enter" or "OK" to make selection
  • Edit > Undo to undo and start over
• Enhance an Image - Brightness, Contrast, Sharpen
  • Select Image on Stage
  • Filters > Adjust Colors - Brightness, Contrast - note Preview feature
  • Filters > Sharpen - Sharpen an image.  Thumbnail images (reduced size images) often need to be sharpened.

Back to Top

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

Back to Top

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.

Back to Top

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.

Back to Top

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

Back to Top