OVERVIEW

1
(No Transcript)
2
Objectives
OVERVIEW

• 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

3
Objectives (continued)
OVERVIEW

• 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

4
Objectives (continued)
OVERVIEW

• 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

5
Understanding Macromedia Fireworks

• Create images for print or Web
• Balance design quality with file size
• Two major graphics categories
• Bitmap graphics
• Vector graphics

6
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

7
FIGURE 1 Bitmap and vector images
8
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

9
FIGURE 2 Fireworks Canvas and Panels
10
Fireworks Editing Modes

• Tools panel allows easy tool selection
• Object focus identified by tool selected
• Example Eraser tool implies bitmap focus

11
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

12
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

13
FIGURE 3 Tools panel
14
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

15
FIGURE 4 Text Property inspector
16
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

17
FIGURE 6 Layers panel
18
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

19
FIGURE 7 History panel
20
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

21
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

22
FIGURE 8 Optimize panel with options for GIF
images
23
Table 3
24
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

25
Table 4
26
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

27
Table 5
28
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

29
FIGURE 13 Options menu in the History panel

30
FIGURE 14 Set Magnification menu
31
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

32
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

33
Summarizing Introduction to Unit 2
SUMMARY

• 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