Fireworks 4 Training Guide:

N.B. If you're not sure whether you ought to learn Fireworks or not, you might want to read the note on "Why Use Fireworks?", look over the Macromedia Learning Product Matrix comparing the many Macromedia software tools, or look at the Macromedia Fireworks FAQ. If all else fails, you can download a 30-day free trial copy from the Macromedia site and try it. (Please send suggested improvements to dmandell@saintmarys.edu)

Other training resources you will want to use include books, the Fireworks Help system, which includes "Using Fireworks", plus an Index to various help topics, and the built-in Tutorial, as well as several Web-based information sources (Fireworks Support Center Web site is updated regularly with the latest information on Fireworks, plus advice from expert users, advanced topics, examples, tips, and updates at http://www.macromedia.com/support/fireworks/. ). I would recommend skipping the Fireworks Tutorial, an interactive introduction to the key features in Fireworks, as it has a number of bugs and mis-information.

Also, look at

• One-Day Fireworks Tutorial at Webmonkey
• Optimizing Images for the Web with Fireworks 3
• American University's Macromedia Fireworks Tutorial

Training Guide Topics:

1. Getting Started in Fireworks
2. Drawing Objects
3. JavaScript powered buttons
4. Selecting, Grouping and Stacking
5. Bitmap Editing
6. Applying Text, Fills, and Live Effects
7. Advanced techniques
8. Applying Colors and Styles
9. Exporting and Optimizing
10. Creating Animated GIF Images
11. Creating Buttons
12. Using Image Maps and Rolloevers
13. Integration with Dreamweaver

1. Getting Started

• When Fireworks opens, you see its work space, with command menus (across the top ), the Toolbox (on the left side), and several multi-tab panels on the right side of the screen. Opening a document places a document window in the middle. You are likely to use these Fireworks components frequently:

  • The document window displays the current Fireworks PNG document.
  • Using the 2-Up, and 4-Up windows and the Optimize panel you can optimize images in the workspace. Preview displays how he graphic would appear in a browser so you can decide how much optimization to use.
  • Color Table panel
  • The Toolbox houses all your drawing tools. Depending on the tool you select, you can draw, reshape, reposition, resize, rotate, crop, or enter text. There are selection, drawing, and magnify tool, and some mysterious tools such as the Hotspot tool; the Slice tool. The triangle in the bottom right corner of some of the tool icons indicates that several tools are available from this icon.

• The Object, Stroke, Fill, and Effect inspectors control a wide range of characteristics of selected objects.
• The Color Mixer, Swatches panel, and Color Table panel manage the current document's color palette.
• Layers and Frames panels organize a document's structure and contain options for creating, deleting, and manipulating layers and frames. The Frames panel contains options for creating animation.
• The Behaviors inspector manages behaviors, which determine what happens when hotspots or slices respond to mouse movement.
• The History panel lists recent commands that you can quickly undo and redo.
• The Button Editor helps you make quick work of building JavaScript rollover buttons and navigation bars.
• The Library panel contains graphic symbols and button symbols. You can easily drag instances from the Library onto your document.

When the positioning of graphics and objects on the screen is critical, the use of guides or grids is recommended: To display document rulers: VIEW > RULERS

To create guides: Drag from the left ruler to create one or several vertical guides and drag from the top ruler to create horizontal guides

To create a document grid: VIEW > GRID
To control the spacing of the grid, use VIEW > GRID > EDIT GRID

• Identify the function of the Toolbox tools

• Setting Up a new Document:
  • Choose FILE > NEW to open the New Document dialog box.Define the hight and width of the document. The background background is set to white, transparent or some custom color. Click OK to create the new document in an untitled window. (You will still be able to choose a different height, width or color using the menu
    Modify > Docume

Bitmap or Vector Drawings: Generally, a computer image is either a vector drawing or a bitmap image. Applications such as Adobe Illustrator, Macromedia FreeHand, or CorelDraw create vector drawings. Applications such as Adobe Photoshop create bitmap images.

What's the difference and why does it matter? Paths and points are the basic elements of vector graphics. As you draw a path in Fireworks its points are generated automatically. The eight path tools (rectangle, ellipse, polygon, straight line, curved line, pen, brush, pencil) create different shapes that become the basis of Fireworks images. Even when magnified, a vector graphic looks good, only bigger. In contrast, a bitmap image is a matrix of pixels that forms an image, like the tiles of a mosaic. When magnified a bitmap image becomes more granulated, and ultimately unrecognizable, as enlargement reveals the individual pixels.

Fireworks blurs the distinction between vector graphics and bitmap image graphics. Objects drawn in Fireworks have editable vector paths, yet magnifying a Fireworks object reveals pixels, which redraw in response to vector editing. With the Fireworks Pen tool, you can draw editable bitmap images as if you were drawing vector paths in FreeHand or Illustrator.

When you draw in Fireworks, you can use vector or bitmap drawing tools to create bitmap graphics. The bottom line is that no matter which drawing tool you use, Fireworks objects give you a level of drawing and editing control previously available only in vector graphic applications, and Fireworks object attributes give you a level of artistic control previously available only in bitmap graphic applications.

We will start by focusing on drawing (path) objects in the default mode called object mode. (Later we will learn to draw, paint and edit pixels using bitmap editing techniques in image edit mode. For more information see Editing Pixels)

• Object mode is called the default because when you create a new Fireworks document, it opens in object mode by default. [However, if you open a bitmap image, or if you have used a tool that has switched Fireworks to image edit mode, you must return to object mode in order to draw and edit path objects.]
  
  
• When you see a striped border around a document canvas, Fireworks is in image edit mode.To return to object mode any of the following will work:
  • Double-click an area of the document window beyond the canvas with any selection tool.
  • Click the Stop button in the Status bar at bottom.
  • Use a tool that only works in object mode, such as the Text tool.
  • Choose Modify > Exit Image Edit.
  • Press the Esc key.

   

It is clear from the following table describing each tool's basic function in each mode that the characteristics of some tools change according to the mode in which you are drawing. Tools that behave exactly the same in both modes are omitted from this table.

Understanding open and closed paths:

Paths are either open or closed:

• An open path's beginning point and ending point do not connect.
• A closed path's beginning point and ending point are the same point.
• A single path can overlap itself to create a loop that appears to enclose an area, but this is not a closed path. Only joined endpoints create a closed path. Either type of path can have a fill.

To draw a line, rectangle, or ellipse:

1. Choose the Line tool or a basic shape tool.
2. Hold down the mouse button to start the path.
3. Drag diagonally to draw it.
4. When the path is complete, release the mouse button. (To create rectangles with rounded corners double-click the Rectangle tool in the toolbox. This opens the Tool Options for the Rectangle tool. Drag the Corner slider to increase the corner radius.

Exercise: draw a square: Hold down Shift while dragging the Rectangle tool.

Exercise: draw a circle: Hold down Shift while dragging the Ellipse tool.

Exercise: To constrain a line's orientation to increments of 45 degrees: Hold down Shift while dragging the Line tool.

Exercise: To draw a basic shape from a specific centerpoint:

• In Windows, hold down Alt and drag a drawing tool.
• On the Macintosh, hold down Option and drag a drawing tool.

Tip: To both constrain a shape and draw from the centerpoint:

• In Windows, hold down Shift+Alt while dragging a drawing tool.
• On the Macintosh, hold down Shift+Option while dragging a drawing tool.

To draw a triangle or other polygon:

1. Double-click the Polygon tool to open the Polygon tool Options panel.
2. Choose Polygon from the Shape pop-up menu.
3. Enter the number of sides for the polygon.
4. Hold down the mouse button and drag to draw the polygon.

Drawing Stars:

To draw a star double-click the Polygon tool (if not visible, press the pop-up group member that is showing to select the Polygon):

1. Choose Star from the pop-up list in the Tools Options panel
2. Use the slider or enter the number of sides of the star
3. Use the angle slider to define the interior angles of the star's points

Drawing Line Segments:

To create a straight line segment:

1. Click the pen tool
2. move the pointer to the document area. The cursor changes to the plus sign with a white dot to indicate the start of a path.
3. Click to set an anchor point for the line
4. Move the cursor to the next anchor point of the line segment and click to connectthe two anchor points with a straight line.
5. Continue connecting straight line segments

 

Drawing curved line segments:

1. Click the Pen tool
2. Press and drag to create the starting anchor point withcontrol handles
3. Release the mouse button. The length and direction of the handle controls the height and direction of the curve
4. Move the cursor to next anchor point. Drag to create the curved segment between the two anchor points...and continue.

Drawing Corner Curves:
(corner curves are sharp changes in direction in a curved line segment)

1. Press and drag to create an anchor point with control handles. Do not release the mouse button
2. Hold the Option / Alt key and move the mouse to pivot the second handle
3. release the mouse button when the second handle is the correct length and direction
4. Continue creating additional anchor points of thecurved or corner variety...

There are two ways to finish any line segment:

• Creating an open path:

1. move the pen away from the last point
2. hold the Command/Ctrl key and double-click, or simply switch to another tool in the toolbox. Both leave the path open.

• Creating a closed path:

move the cursor to the starting anchor point of the path. The cursor changes to a plus sign with a black square dot. Click to close the path.

4. Editing Bitmap Objects

Fireworks combines the artistic richness of bitmap applications with tools previously only found in vector applications, such as Illustrator or FreeHand. However, you can also edit individual pixels and areas of pixels in bitmap images. Bitmap images contain tiny squares that combine like the tiles of a mosaic to create an image. These tiny squares are called pixels. An example of a bitmap image is a color photograph. Editing options include painting and drawing with traditional bitmap-application tools, changing the color of pixels, correcting and enhancing images with filters, replicating image elements with the Rubber Stamp tool, and feathering image edges. You can even apply Photoshop plug-in filters to images.

• Although it is the vector objects in Fireworks that give it speed and power, if you want to use images such as photographs or scanned art these cannot be created by using vector tools. In addition to the vector tools, there are tools for working with bit-mapped (sometimes referred to as pixel-based graphics or image objects).
  
  
• Behind the layers of every fireworks document, one can place a background image to serve as the canvas over which other layers appear.
  
  
• To edit an existing image, double-click the bitmap image, and Fireworks changes to image edit mode. You can see that Fireworks is in image edit mode by the striped border that appears around the entire document. When the border is visible, you can paint or edit pixels anywhere within the document.
  
  
• To modify an existing background image,
  • Choose Modify > Background Image. (This opens the background image in an image editing mode indicated by the thick black line around the image.), or
  • Click the background layer in the Layers panel (A square black dot indicates the layer is active) and that you are in image editing mode.
    
  • Once in Background editing mode, you can paint on the image as in any paint program (using Pixel tools such as Marquee tools, Lasso, Magic Wand, Selection commands, Similar command, Feather command, Rubber Stamp tool, Eraser, Eye Dropper and Paint Bucket).
    
    
• Fireworks can import Photoshop, TIFF, JPEG, GIF, BMP, PICT (Mac only), PNG, and Targa to serve as a background:
  
  To import scanned pixel images as the background canvas,

  FILE > OPEN

  • You can also import pixel-based images onto one of the object layers in Fireworks. This allows you to to apply effects to the image object.
    To import scanned images:
    • choose FILE > IMPORT
    • a small corner symbol indicates the file is ready for placing on the currently selected layer.
      • Drag the corner symbol to draw a rectangle that image scales to fit, or
      • Click to simply place the image at the original size.
  • To switch to image-editing mode:
    1. Select the image object that you want to edit. Then either
    • Choose MODIFY > IMAGE OBJECT. A thick black line appears around the image indicating you can edit it, or
    • Double-click with the Pointer tool on the image object to switch to image-editing mode.
    2. To return to the object mode, deselect the object, or choose MODIFY > EXIT IMAGE EDIT.
       
       
       
• Using Selection Tools
  • Exercise: In image edit mode, the primary selection tools are the Marquee and Ellipse Marquee tools, the Lasso and Polygon Lasso tools, and the Magic Wand tool. Use the Marquee tool and choose a rectangle or elliptical shape
    
    Adding or removing pixels using modifier keys
    
    
  • Using modifier keys, you can add or delete pixels from the flickering marquee border. You can also select pixels at the intersection of two overlapping marquee selections.
    • To add pixels to a marquee selection:
      1. Hold down Shift and select the pixels you want to add. Note: You can also create an additional marquee selection using the Shift key. While holding down the Shift key, create a marquee selection that does not overlap the original marquee border.
      2. To delete pixels from a marquee selection Hold down Alt (Windows) or Option (Macintosh) and select the pixels you want to delete.
    • Editing pixels
      1. After selecting pixels, you can edit them using
      • the Pencil, Brush, or Paint Bucket tool.
      • Or you can clone pixels,
      • feather image edges,
      • erase pixels, or
      • crop an image.
      • Editing pixels with the pencil or brush tool
      • You can change pixels one by one or change several pixels at once.

       

• Using the Magic Wand
  1. Press the Lasso tool to choose the Magic Wand
  2. In Magic Wand Tool Options panel, select the tolerance
  3. Use the edge list in the Tool Options panel to choose among Hard edge, Anti-Alias, or Feather
  4. Click the area you want to select

Other Selection Tools: When there is time, you might want to explore a number of other selection tools.

• Controlling the edge of a Selection
• Using the Lasso Tool
• Using the Rubber Stamp Tool
• Using the Eraser Tool
• Usingthe Marquee Tools
• Additional Selection Options
• Using the Magnifying Glass

Lesson 2: Selecting,Grouping,and Stacking

• Making Selections in Vector Mode
• Grouping Objects
• Using the Layers Panel
• Using Single-layer Editing
• Changing the Stacking Order of Objects on a Layer
• Using the Select Behind Tool

Lesson 3: Using Vector tools

• Creating a Logo
• The History Panel
• Using the Knife Tool
• Using the Mouse
• Highlight Feature
• Applying Strokes
• Editing Strokes
• Changing Stroke Placement
• Applying Fill Color
• Trimming the Canvas
• Using the Info Panel
• Importing Images
• Importing FreeHand or Illustrator Files
• Setting Vector File Options

Lesson 4: Applying Text,Fills,and Live Effects

• Adding Text
• Aligning Objects
• Adding Live Effects
• Reordering Effects
• Working with Masks
• Applying Transformations
• Applying Fills
• Using Web Dither
• Using Patterns using Textures
• Changing the Opacity
• Creating Gradients Lesson

5: Advanced Techniques

• Duplicating Objects with the Repeat Command
• Combining Shapes On Your Own
• Adding Text along a Path
• Adjusting Text Flow on the Path
• Converting Text to a Path
• Masking an Image Lesson

6: Applying Colors and Styles

• Choosing Colors
• Selecting from Swatches of Color
• Mixing Colors
• Saving Selected Colors
• Using the Color Boxes
• Creating and Using Styles

Lesson 7: Exporting and Optimizing

• Exporting Your Images
• Choosing the Image Format
• Exporting as GIF
• Previewing in the Workspace
• Working with the Color Table
• Creating Transparency
• Using a Matte Color
• Exporting as JPEG
• Saving
• Export Presets

Lesson 8: Creating Animated GIF Images

• Defining Animated GIFs
• Making an Animation
• Using Onion Skinning
• Controlling Playback
• Exporting a GIF Animation
• Applying Tweening
• Controlling Static Objects in Animations
• Creating Symbols
• Animation Symbols
• Using the Library

Lesson 9: Creating Buttons

• Working with Rollover Buttons
• Using the Button Editor
• Working with the Web Layer
• Using Live Effects for Rollover Buttons
• Using the Link Wizard

Lesson 10: Using Image Maps and Rollovers

• Creating Image Maps
• Using the URL Panel
• Slicing an Image
• Creating Disjointed Rollovers
• Using the Behaviors Panel
• Adding a Pop-up Menu
• Putting It All Together

Lesson 11: Production Techniques Using Find and Replace

• Using the Project Log
• Performing Batch Processing

Lesson 12: Integration with Dreamweaver

• Using Fireworks in Dreamweaver
• Updating HTML from Fireworks
• Inserting Buttons from Fireworks into Dreamweaver
• Working with CSS Layers
• Working with Dreamweaver Library Items