Fireworks MX
Macintosh and Windows

Beginning with Fireworks MX

Fireworks MX is software used to create and edit graphic files. Fireworks can be used in conjunction with Dreamweaver to create web pages that include graphics.

Fireworks MX is available on all of the computers in public labs and can be installed on personal and office computers that are part of the the Wellesley College local network. To access installation instructions and software, click the appropriate link below:

• Installing Fireworks MX for Macintosh
• Installing Fireworks MX for Windows

• Windows 300 MHz Intel Pentium II processor or better; Windows 98 SE, Windows Me, Windows NT®4 (Service Pack 6), Windows 2000, or Windows XP

• Power Macintosh G3 processor; Mac OS 9.1 and higher, or OS 10.1 and higher

• 64 MB of free available system RAM (128 MB recommended) 64 MB of free available system RAM (128 MB recommended)

• 80 MB of available hard-disk space 80 MB of available hard-disk space

• 1024 x 768-pixel resolution is highly recommended (600 X 800 resolution will work but does not allow adequate workspace for anything but small graphics), 256-color display resolution or better

• CD-ROM drive

Launch Fireworks, then File >New. A New Document window will appear.

In the Canvas Size section enter a value for the height and width of your graphic. You can choose to set the value in pixels, inches, or centimeters by using the pull-down menu. The canvas size can be modified later. (If you have copied an object into your Clipboard, the initial width and height values match the dimensions of that object.) Remember that some people who will view your graphic have monitors with low resolution so do not make your graphic wider than 800 pixels or higher than 600 pixels.

Resolution should always be set to 72 Pixels/Inch so that the new graphic will work with common monitor resolutions.

In the Canvas Color section, select the color you would like for your canvas or background of your graphic. This can be changed later by going to Modify > Canvas Color.

When your New Document settings are complete, click OK. A blank document window will appear with the size and canvas color you selected.

Launch Fireworks, then from the File menu select Open. Navigate through the folders and files on your computer to the graphic file you want to edit then click Open. Your graphic file will appear in a Fireworks document window

You may open many types of graphic files. Only vector-type graphic formats such as PNG allow you to edit separate objects that are part of a single graphic. If you open a bitmap-type graphic such as JPG or GIF, a new PNG file will be created for editing, however the elements of the graphic that existed when it was opened will only be editable as a bitmap.

If you open a file that was created with an older version of Fireworks files and that requires a font not installed on your computer, you will see a message that asks if you want to "maintain appearance" of the text objects. In this case, you should choose the Replace Fonts option. Files saved in Fireworks MX can properly maintain appearance when viewed on a system that does not have the needed fonts.

After beginning a new graphic or opening an existing graphic file in the document window you will also see other windows called panels: Tools, Properties and several other named panels that appear on the right of the screen.

At any time, if you want to reset the arrangement of panels to the default, from the Commands menu choose Panel Layout Sets, then click your screen resolution. If you are not sure, choose 1024 X 768.

Fireworks allows you to set the layout for the screen size you are using - Commands > Panel Layout Sets. Because this command locates everything in the default position, it is also useful if any panel becomes obscured or you have a problem moving a window. Fireworks MX will be set to 1024 X 768 in the public labs.

There are three screen modes in the view section at the bottom of the Tools panel. Most of the time you will use Standard. The other two views hide some menus so that there is more space for the document window.

At any time, if you want to temporarily hide all panels, click in the document window and type the TAB key. Type the TAB key again to bring the panels back. You might want to do this so that you can enlarge the document window and view a larger area of your graphic.

While the panels are docked in their designated positions, they display a gripper at the left side of the bar with the panel name. On Macintosh computers, the Tools and Properties panels do not dock.

To move one of the panels so that it floats elsewhere on the screen, use your mouse to position the pointer on the gripper and drag. To return a window to is docking position, drag it back into place using the gripper (or blue bar if the gripper is not visible)

To collapse or uncollapse a docked panel, click its name or the small triangle to the left of its name.

Panels that are not collapsed have an Options menu on the right of the name bar. Select from this menu for help or other options available for the panel.

Panels on Macintosh computers also have buttons to close or minimize the panel

Tools:

Buttons for tools are organized into categories. Hover the pointer over any button to read its description and click a button to select that tool. A small black triangle next to a tool means that it is part of a tool group. Click and hold your mouse button to choose from a tool group.

Properties:

Properties is a panel that is usually placed or docked at the bottom of the screen. It is context-sensitive; the options change depending on which tool or object is selected. For example: when a new document is started it shows document properties; when a tool button is selected it shows tool options; when an object is selected in the document window it shows editing options for that object.You can view the Properties window at full-height or half-height. Click the small white arrow on the bottom-right to switch between heights.

Other Panels:

When docked, these panels display in a vertical column on the right of the screen. They are collapsed or uncollapsed independently, allowing you to view useful options while you are editing a graphic in the document window. Some of these panels include more than one tab.

Note: If you find that any pull-down menu on a panel near the bottom of the screen seems to be incomplete, this can be corrected by moving the panel away from the bottom so that there is more room for the menu to display.

• Layers displays a thumbnail of every object in the current file. The order of the thumbnails reflects their relative stacking arrangement (which object is on top) and the objects can be dragged to the desired order. If it is hard to select a certain object in the document window, click the thumbnail in the Layers panel to select it. You can also name objects in the Layers panel (or in Properties).
• Optimize includes controls that let you balance compression and quality, set file type for export and select colors for transparency.
• Assets is a collection of styles (groups of properties) and symbols (prototype buttons, graphics and animations) for reuse.
• Frames is used when creating an animation.
• History records each step you take so that you can remove steps or select several for replay.
• Answers provides links to resources such as tutorials and help files.

  Note: If the Answers panel appears empty, reset it by Commands > Panel Layout Sets > (your screen resolution)

Document window:

To change the magnification setting, use the Zoom tool on the Tools panel (ALT-click with Zoom tool to decrease) or change the magnification setting at the bottom of the window (if visible) or View > Zoom In/Zoom Out. The current magnification setting is displayed on the title bar of the document window. This does not change the actual size of the graphic, only your view of it while you are working.

Tabs at the top of the window allow you to view your graphic in different ways:

• Use the Original tab for editing.
• The Preview tab lets you see how your graphic will look in a web browser.
• Use the 2-Up or 4-Up tab to compare different settings for your graphic side-by-side. File sizes are shown for each view, letting you balance image quality against the time it will take for a graphic to appear on a web site. Select Export Preview from the pull-down menu below one of the views of your graphic and use the Optimize panel to change the settings on that view only.

Saving a file:

Saving a graphic that you are creating or editing in Fireworks results in a PNG file. Saved PNG files can be opened again in Fireworks for further editing without losing access to vector properties and individual objects.

1. File > Save.
2. In the Save as window, type a name for the file and navigate to the location for saving.

 

Exporting a file:

You can export graphics into several formats such as GIF or JPG for use on web pages and elsewhere. After you have done so, the exported copy of the graphic will be editable only with bitmap tools. For example, you will no longer be able to select separate objects for individual resizing, editing an effect, text editing etc. (In order to be able to do this editing, you will need to work from a saved graphic in PNG format.

If your graphic will be part of a web page or web site, it should be exported to a folder on your computer that will hold all of the parts of that web page. If the web page has not yet been created, make a folder now for these files. If you use Dreamweaver or some other editor to create your web file, save the resulting HTML file to the same folder.

1. From the File menu, choose Export Preview. The Export Preview dialog box allows you to select a file format, set transparency (GIF files only), work with animation properties, and compare up to four sets of export settings.
2. In the Format field, select the your choice of graphic file format. When choosing a file format, take into account the required features, file size and preview appearance. This information is all available in the Export Preview window.
   
   

   JPG	Best for photographic images and gradients
   GIF	Best for drawings with blocks of color and most screen shots. Transparency and interlacing are only available in this format.
   Animated GIF	If you have more than one frame choose this format then click the Animation tab for more options.

3. Click Export.
4. In the Export window choose the folder where you would like to save the file. (If you are saving the files for use on a web page, make sure you save them to a folder containing all of the files for that web page.) In the File Name field type a name for your file.
5. Click Save (Windows) or Export (Macintosh).

 

Windows:

• To close a file, click the X button on the top-right of the document window. (This document close button will be immediately below the application close button if the document is maximized.)
• To close Fireworks click the X button on the top-right of the application window or File > Exit

   

Macintosh:

• To close a file click the red button on the top-left of the document window. (Yellow button moves the file to the OS X dock; green button is minimize/maximize)
• To close Fireworks, Fireworks > Exit Fireworks.

• Rebecca Atwood, ratwood@wellesley.edu
• Information Services
• Date Created: June 3, 2003
• Last Modified: September 15, 2003
• Expires: September 1, 2004