information_services_logo

Macromedia Fireworks
3.0
Macintosh and Windows

 

Basic Skills

for_beginners basic_skills advanced_skills using_with_dreamweaver web_resources

Table of Contents

Creating a New Image

Toolbox

Below is the Toolbox in Fireworks 3:

Any tool with a triangle in the bottom right of the box has a menu with alternate tool forms. To select an alternate tool form on a a Mac, hold down the mouse button on the tool to see the menu, then drag to your choice. To select an alternate tool form on a Windows computer, hold down the left mouse button on the tool to see the menu, then drag to your choice. Using a Windows computer you can find out the function of a tool, by hold your pointer over the tool button. In the bottom of the Fireworks window there will be a description of what the tool does.

toolbox

 

Palettes

There are several small windows that offer options for Fireworks drawing tools. Some of these windows may open when you launch Fireworks (unless they were closed last time Fireworks was used). You can close these windows when they are not needed.

To open a window menu, go to Window and click on the window that you would like to open.

Each one of the windows contains several panels. The panels are grouped together into palettes to save space on your screen. Once one of the windows is open, you can click on a panel tab at the top of the window to activate and bring that panel to the front. The name at the top of the window will be the name of the tab that is active. In the Window menu, the names of all panels appear, grouped together by palettes (palettes are separated by a gray line).

Below are listed all of the windows used in Fireworks. There are four palettes that are used. For the purposes of altering graphics, the Optimize/Object/Stroke/Fill/Effect palette is the most useful. Its function is described below.

Optimize, Object, Stroke, Fill, Effect

Drawing Freehand

  1. Select the pencil tool.
  2. On the canvas, click on the spot where you would like to start drawing and drag the mouse to draw freehand.
  3. To choose the color, stroke, fill, and effect find the Optimize/Object/Stroke/Fill/Effect window.
    If it is not open, go to the Window menu and select Optimize.
  4. To change the color and stroke of the line, click on the Stroke tab.
  5. If you have drawn a closed shape, you can change the fill of the shape by clicking on the Fill tab.
  6. To change the effect of the line, click on the Effect tab and use the pulldown menu to select the desired effect.

Drawing Lines

  1. linetool Select the line tool.
  2. On the canvas, click on the spot where you would like the line to begin and drag to where you would like it to end. (If you want your line to be perfectly horizontal, vertical or 45 degrees, you can do this by holding down the SHIFT key as you draw.)
  3. To change the stroke color, thickness, or effect find the Optimize/Object/Stroke/Fill/Effect window.
    If it is not open, go to the Window menu and select Optimize.
  4. To change the color and other stroke properties of the line, click on the Stroke tab.
  5. To change the effect of the line, click on the Effect tab and use the pulldown menu to select the desired effect.

Drawing Shapes

There are three different kinds of shape tools in Fireworks, the rectangle, ellipse (ovals and circles) and polygon (other shapes with multiple sides).

To draw a rectangle or square:

    1. rectangletool Select the rectangle tool.
    2. Click and drag on the canvas until your rectangle is the correct size.
    3. To draw a square, hold down the SHIFT key on your keyboard while you click and drag.
    4. To choose the color, stroke, fill, and effect find the Optimize/Object/Stroke/Fill/Effect window. If it is not open, go to the Window menu and select Optimize..
    5. To change the color and stroke of the line, click on the Stroke tab.
    6. To change the fill of the shape, click on the Fill tab.
    7. To change the effect of the line, click on the Effect tab and use the pulldown menu to select the desired effect..

To draw an oval or circle:

  1. On a Mac, hold the mouse down on the rectangle tool until the other two options (ellipse and polygon) appear. On a Windows computer, hold down the left mouse button until the other two options (ellipse and polygon) appear.
  2. Select the Ellipse tool.
  3. Click and drag on the canvas until your ellipse is the correct size.
  4. To draw a circle, hold down the SHIFT key on your keyboard while you click and drag.
  5. To choose the color, stroke, fill, and effect find the Optimize/Object/Stroke/Fill/Effect window. If it is not open, go to the Window menu and select Optimize.
  6. To change the color and stroke of the line, click on the Stroke tab.
  7. To change the fill of the shape, click on the Fill tab.
  8. To change the effect of the line, click on the Effect tab and use the pulldown menu to select the desired effect.

To draw a polygon:

  1. On a Mac, hold the mouse down on the rectangle tool until the other two options (ellipse and polygon) appear. On a Windows computer, hold down the left mouse button until the other two options (ellipse and polygon) appear.
  2. Select the polygon.
  3. Find the Color Table/Swatches/Mixer/Options window:
    colors_window

    If it is not open, from the Window menu select Color Table.
  4. Click on the Options tab. Make sure the Shape field is Polygon. Choose the number of sides in the polygon in the Sides field.
    Note: To draw a star, Change the Shape field to Star in the pull-down menu. Choose the number of sides in the star in the Sides field.
  5. To choose the color, stroke, fill, and effect find the Optimize/Object/Stroke/Fill/Effect window. If it is not open, select Optimize from the Window menu.
  6. To change the color and stroke of the line, click on the Stroke tab.
  7. To change the fill of the shape, click on the Fill tab.
  8. To change the effect of the line, click on the Effect tab and use the pulldown menu to select the desired effect.

Adding Text to Your Graphic

  1. Select the text tool. texttool
  2. On the canvas, click on the spot where you would like the text to start.
  3. The Text Editor window will appear:
    text_editor
  4. Enter your text, selecting a font, size, alignment, etc. When you have finished editing the text, click Apply, then OK. Notice that you can see the text change on your graphic. If you make a mistake, click Cancel and the text box will disappear.
  5. If you would like to edit the text or its format after you have closed the Text Editor, you can reopen it by selecting the pointer tool pointertool and double-clicking on the text on the canvas.
  6. To delete the text, select it using the pointer tool and press the DELETE key on your keyboard.

Deleting an Object

  1. Highlight the object if it is not already highlighted by selecting the pointer tool pointertool and clicking on it once so that it is surrounded by a blue line.
  2. Hit the DELETE key on the keyboard.

Changing the View Size of Your Graphic

In Fireworks there is a tool that allows you to change the magnification of the graphic that you are working on. This is very handy if you are working on a small graphic and need to see details, or if you are working on a large graphic and need to reduce it so that it will fit on the screen. This does not change the actual size of the graphic, only your view of it while you are working.

  1. magnifytool Select the magnify tool in the toolbox.
  2. Click on the area of the canvas that you would like to magnify. It will immediately zoom in.
  3. Keep clicking until you are satisfied with the magnification.
  4. Alternatively, you can go to the View menu and choose Zoom In.
  5. If you would like to reduce the magnification of what you are doing: On a Windows computer, hold down the ALT key on the keyboard while you are clicking. On a Mac, hold down the OPTION key on the keyboard while you are clicking. You can also reduce the magnification by going to the View menu and choosing Zoom Out.
  6. To view the original size of the canvas, select Magnification from the View menu and choose 100%.

Saving and Exporting

The graphic that you create with Fireworks is a PNG file. If you save the file as a PNG file, you can make future changes to the graphic. However, if you are planning on using this image on a web page, you will need to export the file as either a gif or jpg (JPEG) image. It is recommended that you save a graphic as both a PNG and GIF or JPEG.

To save the PNG file:

Export the file:

Changing the File Format of Multiple Images

  1. Place all the images that you want to convert together in one folder.
  2. From the File menu, choose Batch Process.
  3. A Batch Process dialog box will appear.
  4. From the Files to Process pull-down menu, select Custom.
  5. Click on the button with the three dots that is next to the pulldown menu. A new window will open and you can select the folder containing your files.

    batch_process
  6. To select files one at a time, click on the file once and then click on the Add button, or if the files are listed together, you can select multiple files by holding down the shift key and clicking on the first and last file you want to select in the list and then clicking on Add.
  7. If you are using a Windows computer, click Done when you are finished. If you are using a Mac, click OK when you are finished. You will be taken back to the Batch Process dialog box.
  8. Check the Export checkbox and click on the button next to it.
    batch_process2

    You will see a Batch Export dialog box.
  9. Under Export Settings, select the format that you wish to convert your images to. Click on OK.
    batch_export


  10. Click OK again.
  11. All the image files that you selected will be converted to the format you selected. These images will now appear in a new folder in the directory location you indicated in the previous step. The original files will be put into their own folder.

Changing the Dimensions of an Image

To Resize the Image:

  1. Under the Modify menu, choose Image Size.
  2. An Image Size dialog box will appear.
  3. You can see the current size of the image in pixels or as a percent.
  4. In the Image Size window, make sure that the Resample Image box is checked
  5. Enter a new value in the Width and/or Height text boxes for the pixel dimensions or print size dimensions.
  6. To ensure that the image is not distorted during the process, make sure the box next to Constrain Proportions is checked.
  7. Click OK
    resample

Cropping an Image

  1. If you are using a Mac, click and hold down your mouse button on the Marquee tool marqueetool until you see three buttons pop up. If you are using a Windows computer, click and hold down the left button on the Marquee tool until you see three buttons pop up.
  2. Keeping your mouse button depressed, select the last button croptool, which is the Crop tool.
  3. Using the Crop tool, click and drag over the part of the image you want to keep. A box with a will surround the area that you have selected.
  4. If this is the area you would like to keep, go to the next step. If you want to redraw the box, simply click and drag over a new area.
  5. Once you have selected the desired portion of the image, double-click inside the selected area of the image and it will crop itself.

Flipping an Image

Using Fireworks, you can reverse an image or parts of an image along its vertical and horizontal axes. You can flip either an entire image or you can use the selection tool to reverse just a portion of the entire image.

  1. Using the crop tool, click and drag over the image or portion of the image that you would like to flip
  2. From the Modify menu, choose Transform, and then click on either Flip Horizontal or Flip Vertical.

Flip Horizontal will reverse the image or selection so that what you see at the left will be at the right and vice versa. Flip Vertical will reverse the image or selection so that what you see at the top will be at the bottom and vice versa.

Rotating an Image

You can rotate, or spin, your image by selecting the number of degrees you want to rotate the image or by dragging it.

To rotate a selected object 90 or 180 degrees:

  1. Click on the object so that a light blue line surrounds it.
  2. From the Modify menu choose Transform, and then click on one of the Rotate commands (Rotate 180, Rotate 90 CW or Rotate 90 CCW)

To rotate a selected object by dragging:

  1. Click on the object so that a light blue box surrounds it.
  2. From the Modify menu choose Transform, and then click on Free Transform.
  3. Move the pointer outside the object until the rotation pointer (which looks like an incomplete circle with an arrow) appears.
  4. Click and drag the pointer to rotate the object.

Capturing a Screen Shot

Screen Capture allows you to copy all of or part of your computer screen into an image.

On a Macintosh:

To capture the full screen:

  1. Hold down the APPLE, SHIFT and 3 keys at the same time on your keyboard.
  2. You will hear a camera-like clicking sound and a shot of the full screen will be taken and saved onto the Macintosh HD. It will be labeled as Picture # where the number will be the number of screen shots you have taken.
  3. Drag this file onto your desktop from the Macintosh HD
  4. In Fireworks, choose File > Open and select your saved screen shot.
  5. You can export the image as any file type by choosing File > Export Preview

To capture an area only:

  1. Hold down the APPLE, SHIFT and 4 keys at the same time on your keyboard.
  2. The mouse cursor will become a crosshair.
  3. Click and drag the crosshair to define the screen shot area. When you let go of the mouse button, you will hear a camera click.
  4. Repeat steps 2-5 in the "To capture the full screen" instructions.

To capture an active window:

  1. Hold down the APPLE, SHIFT, CAPS LOCK and 4 keys at the same time on your keyboard.
  2. Click on the active window and you will hear a camera click.
  3. Repeat steps 2-5 in the "To capture the full screen" instructions.

On a Windows Computer:

To capture the full screen:

  1. Press the PRINT SCREEN key on your keyboard. A shot of the full screen will be taken and saved onto the clipboard.
  2. In Fireworks, open a new document. Allow Fireworks to determine the size for you and click OK.
  3. Choose Edit > Paste. Your screen shot will be pasted onto your document.
  4. You can export the image as any file type by choosing File > Export Preview

To capture an active window:

  1. Hold down the ALT and PRINT SCREEfN keys at the same time on your keyboard.
  2. A shot of the active window will be taken and saved onto the clipboard.
  3. Follow steps 2-4 in the "To capture the full screen" instructions.

Using Export Preview

Fireworks provides a few different ways to export your files. If you are interested in optimizing your file during export, or if you would like to compare several different optimization settings at once, you should use the Export Preview dialog box. In the Export Preview dialog box, you can select a palette, image type, set transparency, work with animation properties, and view up to four sets of settings at the same time. This feature allows you to compare various export settings.

To use the Export Preview feature:

    1. When you are finished working on your graphic, choose File > Export Preview to open the Export Preview window.
    2. Select the image type from the Format drop-down menu. If you are going to use your image on the web, make sure to choose either a gif or a jpg image.
      export_preview
      Select any other settings you wish to use.
    3. transparencytoolIf you would like to add a transparent background or another transparent area to your image, click on the transparency dropper and then click once on the area of the image that you would like to be transparent.
    4. When you have finished selecting your settings, click on the Export button.
    5. In the Export dialog box that pops up, type a name for the file and choose the destination. Then click Export if you are using a Macintosh. Click Save if you are using a Windows computer.

    Note: To export an image with a transparent background or other transparent areas, the image MUST be exported as a gif.