2. 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

3. 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

4. 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

5. 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

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

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

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

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

10. 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

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

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

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

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

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

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

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

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

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

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

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

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

23. Table 3
Macromedia Studio Step-by-Step

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

25. Table 4
Macromedia Studio Step-by-Step

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

27. Table 5
Macromedia Studio Step-by-Step

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

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

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

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

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

33. 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