Macromedia Fireworks 8 Fireworks Unit 2-1

Unit 2

Macromedia Fireworks 8

Table of Contents

Objectives

File Listing...... 2

Overview...... 2

Teaching Tip: Examining Web Sites Developed Using Fireworks...... 2

Getting to Know Macromedia Fireworks 8...... 2

Teaching Tip: Comparing Panel Layout Preferences ...... 4

Teaching Tip: Keyboard Commands and Keyboard/Mouse Actions...... 6

Understanding Basic Graphic Design...... 7

Teaching Tip: Distinguishing Design Principles from Design Elements...... 8

Macromedia Fireworks 8 Projects...... 8

Teaching Tip: Project Preparation ...... 8

Discussion Topic: Composition Using the Layers Panel...... 8

Key Terms...... 9

Objectives

  • Follow a design document to prepare images for inclusion in a Web page.
  • Run a batch process to prepare multiple images in one step.
  • Use Web site specifications to draw logo images.
  • Use Web site design criteria to define effects and blends.
  • Integrate text and drawn images to generate a design described in Web site specifications.
  • Use the Web site design document to generate a page comp and define elements of a navigation bar.
  • Use the Web site design document to define colors and fonts of a page and a navigation bar.
  • Generate and save a page comp.
  • Build, optimize, and export a navigation bar for use in a Web site.

File Listing

Location / Provided Filename / Saved Filename
No files provided / None / None

INSTRUCTOR’S NOTES

Unit Overview

Macromedia Fireworks 8 is a graphics program used to create and edit sophisticated images for the Web. With Fireworks, the user can quickly create and manipulate images, rollover buttons, and navigation bars. Files storing graphics may be easily compressed, without a significant tradeoff in quality. Firework's import/export features are powerful and easy to use. Applications may incorporate a wide variety of external file types, such as digital camera files and scanned images. Fireworks files themselves may be readily exported to editors, such as Macromedia Dreamweaver 8.

Three projects in this unit expose the student to the concepts of graphic design as well as the skills to implement these designs within a Fireworks application. Before the projects are presented, the student is introduced to the Fireworks development environment and the basics of graphic design.

Teaching Tip / Examining Web Sites Developed Using Fireworks
Fireworks is designed for Web graphics. An interesting way to introduce Fireworks is to examine a few Fireworks-specific Web sites available from the Macromedia Web site, . Explain the importance of download time for elements in a successful Web site. The algorithms in Fireworks programming allow maximum compression of graphics, which in turn allows graphics to download quickly.

Getting to Know Macromedia Fireworks 8

Understanding Macromedia Fireworks

The user can create and manipulate images for print or the Web using Macromedia Fireworks. Quality of design is balanced with file size as required by the image context. Various graphics can be created; these fall into the categories of bitmap and vector.

Bitmap versus Vector Graphics

See Figure 1 for a comparison of bitmap and vector images.

Macromedia Fireworks functions as both a bitmap editor and a vector drawing program. A bitmap graphic represents an image as a matrix of pixels. The file size of a bitmap, such as a GIF or JPEG file, is determined by the number of pixels used to define the image. Vector graphics, on the other hand, store mathematical formulas they use as recipes to construct an image at the time it is presented. Vector graphics give the user precise control in creating an image and allow for more advanced editing and modification. Compare bitmaps and vector graphics displayed in Figure 1.

Figure 1: Bitmap and vector images

Finding Your Way Around the Fireworks Interface

See Figure 2 for a view of the Fireworks work environment and Table 1 for a description of components.

When the user is creating a new document, the area that opens is called the canvas. The Fireworks work environment includes the Tools panel, Property inspector, menus, and other panels, as represented in Figure 2 and described in Table 1.

Figure 2: Fireworks Canvas and Panels

Fireworks Editing Modes

Fireworks knows whether the user wants to create and edit vector objects, bitmap objects, or text, based on the current tool or selection.

Floating and Docked Panels

Panels provide easy access to controls that help the user edit selected objects or elements of the document. Panels can be used for work on frames, layers, symbols, color swatches, and more.

Each panel can be dragged, a feature that enables the user to group panels together in custom arrangements. The user can undock panel groups, add panels to a group, undock individual panels, rearrange the order of docked panel groups, and collapse and close panel groups.

Comparing Panel Layout Preferences

Comparing the default panel layout from a fresh install and the layout preferences of each student provides an interesting insight into the design requirements of a graphics program. Ask students to track how their layout preferences change as they become more proficient in the software. For example, students may want their own panel groups or alternate using the Half Height option from the Property inspector menu option list.

Tools Panel

The Fireworks Tools panel is divided into clearly labeled sections. If the Tools panel is not visible, the user can select the Tools item from the Window menu. To select a tool, the user just clicks it or use the shortcut key shown in parentheses when positioning the mouse pointer over the tool. If a tool has a small black triangle in the bottom-right corner, it is part of a group of tools.

Property Inspector

See Figure 5 for a view of the Rectangle Shape Property inspector

The Property inspector displays options that change according to the current object or tool selection. For example, if the user selects a vector object, the inspector displays options such as stroke and fill. The user can change these and other options right from the Property inspector. The left side of the Property inspector provides information about the selected object. The user can also utilize this area to size or position the object on the canvas.

Figure 5: Rectangle Shape Property inspector

Fireworks Layers Panel

See Figure 6 for a view of the Layers panel

Layers divide a Fireworks document into discrete planes. They simplify the creation of complex images. A document can be made up of many layers, and each layer can contain many objects. In Fireworks, the Layers panel lists layers and the objects contained on each layer. The user can rearrange the order of layers and of objects within layers. If theuser places multiple objects on the same layer, each object appears in a stack of objects contained within the layer and can be selected and manipulated separate from other objects on the same layer. The stacking order determines how objects on one layer overlap objects on the same layer as well as on other layers.

Figure 6: Layers panel

Fireworks History Panel

See Figure 7 for a view of the History panel

The History panel lists commands recently used. It simplifies the process of undoing and redoing commands. The user may also select and save multiple actions for reuse.

Figure 7: History panel

Keyboard Commands and Keyboard/Mouse Actions
Many menu commands also have corresponding keyboard commands and keyboard/mouse actions. For example, to copy an object, the user can click Edit on the menu bar, click Copy, then click Edit and click Paste. Alternatively, the user can press [Ctrl] C (Windows) or [command] C (Macintosh), and then and press [Ctrl] V (Windows) or [command] V (Macintosh). The user can also duplicate an object by pressing and holding [Alt] (Windows) or [option] (Macintosh), and then dragging the object to a new location.

Fireworks Optimize Panel

The Optimize panel is used to select optimization settings. To optimize an image, the user should:

  • Determine which type of file to export, such as GIF or JPEG
  • Select the detailed settings.

GIF images are generally used for line art, images with solid colors, and animation files. JPEG is generally used for photographic images or images with gradients and more colors. JPEG files cannot be transparent or animated, like GIF files. However, the JPEG palette is not restricted to 256 colors, while the GIF palette is.

Options for GIF Optimization

There are six GIF optimization options in the Optimize panel:

  • Settings: select image quality for export
  • Matte: anti-alias an image
  • Colors: control the number of colors in image
  • Dither: approximate a color not in the color palette
  • Loss: lower the image quality on export
  • Transparency: render a background invisible.

Option details are further described in Table 3.

Options for JPEG Optimization

There are five JPEG optimization options in the Optimize panel:

  • Settings: select image quality for export
  • Matte: anti-alias an image
  • Quality: adjust image quality
  • Selective Quality: adjust quality by region
  • Smoothing: blurs hard edges, reduces size

Option details are further described in Table 4.

Fireworks File Types

The user can create a variety of file types for the Web or print. The user can also import and edit files in JPEG, GIF, PNG, PSD, and many other file formats. The following file formats can be saved directly: Fireworks PNG, GIF, animated GIF, JPEG, BMP, WBMP, TIF, SWF, AI, PSD, and PICT (Macintosh only). Files of other types, such as PSD and HTML, open as PNG files. Any edits performedagainst the converted image are applied to the PNG file and not the original. Table 5 provides details of file types that can be saved or exported with Macromedia Fireworks.

Arranging the Fireworks Window

See Figure 11 for a view of the Show/Hide button

Components are easily managed in the Fireworks window. The user has the capability to:

  • Open and close panels as needed
  • Collapse a panel
  • Hide a panel
  • Use Zoom on Tools panel for various levels of magnification
  • Select new magnification from the Set Magnification pop-up menu.

Figure 11: Show/Hide Button

Understanding Basic Graphic Design

The design of graphics should be consistent with the goals of the Web page where they will be used. In the context of site goals, two main components to apply are graphic design elements, which are the building blocks of graphics, and graphic design principles, which are the ways in which elements are used together.

Graphic design elements include the use of lines, colors, shapes, and textures. These separate elements together can evoke different characteristics. The way lines, colors, shapes, and textures are used can produce movement in an image, balance the composition, emphasize an element of the composition, or unify the composition with its surrounding site.

Teaching Tip / Distinguishing Design Principles from Design Elements
Graphic design principles stand in relation to design elements in the way structure stands in relation to content. To internalize the distinction, have your students sketch a simple scene, such as a still life. After the scene is completed, have them describe the interplay between organizing principles, such as balance, with a large scale element, such as a table.

Macromedia Fireworks 8 Projects

Three projects in this unit help students build skills in recognizing graphic design decisions and the building and manipulating of images.

Project 1: Pictures for a Web Site

Students followthe specification for images on a Web site to process multiple photographs quickly and easily for use on that Web site.

Project 2: Experience Bank Logo

Studentsbuild the logo for the Experience Bank Web site.

Project 3: Page Layout and Navigation Bar for a Web Site

Students build the page comp that will guide the developer of the Experience Bank Web site.

Teaching Tip / Project Preparation
The Fireworks work space may initially appear daunting, but is quite user friendly. Before commencing on project work, have students experiment with simple compositions. For example, place a text box above a rectangle object. Then encourage students to experiment with changing the various text properties, so that they can see all the ways in which they can change the appearance of text. Rectangle properties may be tested in like manner.
Discussion Topic / Composition Using the Layers Panel
How may layers be used to help create depth effects, such as foreground and background? In general, how does the stacking of layers and objects influence your graphic design?
Key Terms /
  • Bitmaps - containers that record information pixel by pixel and color by color.

  • GIF image - format generally used for line art and images with solid colors. GIF images can contain transparent areas, but are restricted to 256 colors.

  • Graphic design elements - the building blocks of graphics; for example, lines, colors, shapes, and textures.

  • Graphic design principles - the ways in which design elements are used together.

  • History panel - lists commands you have recently used.

  • JPEG image - format generally used for photographic images or images with gradients and many colors. JPEG files cannot be transparent or animated.

  • Layers - divide a Fireworks document into discrete planes, as though the components of the illustration were drawn on separate tracing paper overlays.

  • Panels - components in the work environment that provide easy access to controls used to edit selected objects or elements of the document.

  • Pixels - discrete squares of color values that can be drawn in a document. The number of pixels in an image determines its resolution.

  • Property inspector - component that displays options that change according to the current object or tool selection.

  • Vector graphics - containers thatstore mathematical formulas they use as recipes to construct an image at the time it is presented.

  • Work environment - developer's work space that includes Tools panel, Property inspector, menus, and other panels.