OVERVIEW 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 Macromedia Studio Step-by-Step

Objectives (continued) OVERVIEW Objectives (continued) 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 Macromedia Studio Step-by-Step

Objectives (continued) OVERVIEW Objectives (continued) 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 Macromedia Studio Step-by-Step

Understanding Macromedia Fireworks Create images for print or Web Balance design quality with file size Two major graphics categories Bitmap graphics Vector graphics Macromedia Studio Step-by-Step

Bitmap versus Vector Graphics Bitmap graphic Defined by matrix of pixels File size determined by number of pixels Sample of file types: BMP, JPEG, GIF Vector graphic Constructed with mathematical formulas Image is specified at presentation time More precise than bitmaps Fireworks supports both graphic types Macromedia Studio Step-by-Step

FIGURE 1: Bitmap and vector images Macromedia Studio Step-by-Step

Finding Your Way Around the Fireworks Interface Fireworks work environment Document window: appears in center Objects placed on canvas Tools panel: appears on left side Contains labeled categories; e.g., Bitmap tool group Property Inspector: appears on bottom Displays properties relative to selected object Panels: grouped on right side Example: Frames and History Macromedia Studio Step-by-Step

FIGURE 2: Fireworks Canvas and Panels Macromedia Studio Step-by-Step

Fireworks Editing Modes Tools panel allows easy tool selection Object focus identified by tool selected Example: Eraser tool implies bitmap focus Macromedia Studio Step-by-Step

Floating and Docked Panels Panel controls used in various contexts Examples: frames, layers, and symbols Panel flexibility Drag panels into customized groups Undock panels individually or by group Add panels to a group Rearrange order of docked panel groups Collapse and close panel groups Macromedia Studio Step-by-Step

Tools Panel Divided into clearly labeled sections Tools panel visible by default If not visible, click Tools from Window menu Two ways to select a tool Click the icon on the pane Use the shortcut key for tools Pass mouse over tool to show shortcut Small black triangle: group tool symbol Located in bottom-right corner Macromedia Studio Step-by-Step

FIGURE 3: Tools panel Macromedia Studio Step-by-Step

Property Inspector Displays options by current object or tool Example: font options display for text selection Change options from Property inspector Property inspector visible by default Control visibility from Window menu Object information on left side Use area to size or position object Macromedia Studio Step-by-Step

FIGURE 4: Text Property inspector Macromedia Studio Step-by-Step

Fireworks Layers Panel Layers: discrete planes in a document Simplify the creation of complex images Layer hierarchy One document can have many layers Each layer can have many objects Objects will appear in a stack Stacking order determines overlap Layers panel lists layers and objects You can rearrange layer and object order Macromedia Studio Step-by-Step

FIGURE 6: Layers panel Macromedia Studio Step-by-Step

Fireworks History Panel Lists commands recently used Simplifies undo and redo operations Allows multiple actions to be saved Set of saved commands may be reused Macromedia Studio Step-by-Step

FIGURE 7: History panel Macromedia Studio Step-by-Step

Fireworks Optimize Panel How to select optimization settings Determine file type to be exported Select the detailed settings GIF images Used for line art, solid images, animations Restricted to 256 colors JPEG images Used for photographic images Used for gradients and more colors Cannot be transparent or animated Macromedia Studio Step-by-Step

Options for GIF Optimization Six GIF options in Optimize panel Settings: select image quality for export Matte: anti-alias an image Colors: control number of colors in image Dither: approximate color not in palette Loss: lower image quality on export Transparency: render background invisible Option details in Table 3 Macromedia Studio Step-by-Step

FIGURE 8: Optimize panel with options for GIF images Macromedia Studio Step-by-Step

Table 3 Macromedia Studio Step-by-Step

Options for JPEG Optimization Five JPEG options in 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 in Table 4 Macromedia Studio Step-by-Step

Table 4 Macromedia Studio Step-by-Step

Fireworks File Types Create images using various file formats Import and edit various file types Examples: JPEG, GIF, PNG, PSD Save various file types directly Examples: PNG, GIF, JPEG, BMP, TIF Open certain files as PNG types Examples: PSD, HTML Table 5 contains additional details Macromedia Studio Step-by-Step

Table 5 Macromedia Studio Step-by-Step

Arranging the Fireworks Window Open and close panels as needed Collapse a panel Hide a panel Magnification tools Use Zoom on Tools panel Opt for various levels of magnification Set Magnification pop-up menu Macromedia Studio Step-by-Step

FIGURE 13: Options menu in the History panel Macromedia Studio Step-by-Step

FIGURE 14: Set Magnification menu Macromedia Studio Step-by-Step

Understanding Basic Graphic Design Rule 1: understand goals of Web page Graphic design elements Building blocks of graphics Examples: lines, colors, shapes, textures Graphic design principles Provide guidance for structuring graphics Examples: movement, balance, emphasis Macromedia Studio Step-by-Step

Macromedia Fireworks 8 Projects Project 1: Pictures for a Web site Follow specifications for site images Project 2: Experience Bank Logo Build logo for Experience Bank Web site Project 3: Page Layout and Navigation Bar for a Web Site Build page comp for Experience Bank site Macromedia Studio Step-by-Step

Summarizing Introduction to Unit 2 SUMMARY Summarizing Introduction to Unit 2 Use Fireworks to develop Web graphics Distinguish bitmap from vector graphics Work environment: document window, Property inspector, menus, panels Some important features: optimization, import/export Coordinate design elements using graphic design principles Macromedia Studio Step-by-Step