Create a new document and import files

1
Unit Lessons
OVERVIEW

• Create a new document and import files
• Learn about the Macromedia Fireworks window
• Work with bitmap and vector images
• Create and modify text

2
Understanding Fireworks
INTRODUCTION

• Fireworks MX is a graphics program for the Web
• Fireworks MX integrates seamlessly with other
  Macromedia programs
• Dreamweaver
• Flash
• FreeHand
• Director

3
Understanding Fireworks
INTRODUCTION

• What can you do in Fireworks MX?
• Work with vector objects and bitmap images
• Add JavaScript-enabled interactivity and
  animation
• Optimize files for the Web

4
Working with Files
LESSON 1

• Fireworks files are called documents
• Fireworks files are saved as PNG files
• Portable Network Graphics
• have .png extension

5
File Formats
LESSON 1

• Many file formats can be imported into Fireworks
• Fireworks documents can be exported to many file
  formats
• You can copy and paste images into Fireworks

6
File Formats
LESSON 1
Available options for Fireworks
7
The Fireworks Window
LESSON 2

• The Fireworks workspace is the area where you
  work with documents, tools, and panels
• Panels help perform specific functions
• Tools panel houses tools
• Layers panel organizes objects

8
The Fireworks Window
LESSON 2

• Property inspector
• used to modify selected object
• shows properties specific to a tool or command
• docked at bottom of workspace

9
The Fireworks Window
LESSON 2

• The document window has four tabs
• Original
• Preview
• 2-Up
• 4-Up
• 2-Up and 4-Up are used to evaluate different
  optimization settings side by side

10
The Layers Panel
LESSON 2

• Layers are used to manipulate objects
• Objects are the individual elements in your
  document, such as text or images
• Layers function like folders, divided into
  sections that contain objects

11
The Layers Panel
LESSON 2

• Layers can be
• hidden or shown
• locked or unlocked
• rearranged
• duplicated
• deleted
• collapsed or expanded
• renamed

12
The Layers Panel
LESSON 2

• Objects can be moved to new layers

Great Crusts object being moved to Background
layer
13
Bitmap Images
LESSON 3

• A bitmap graphic represents a picture image as a
  matrix of dots, or pixels, on a grid
• Resolution refers to the number of pixels in an
  image
• onscreen resolution is 72 or 96 pixels per inch

14
Bitmap Images
LESSON 3

• Bitmap images should not be scaled in order to
  preserve quality
• Bitmap file formats
• BMP
• PICT
• GIF
• JPEG
• PNG
• TIFF
• PSD (Adobe Photoshop)

15
Bitmap Images
LESSON 3

• Bitmap tools in Fireworks are used to modify
  pixels
• Blur tool
• Sharpen tool
• Burn tool
• Dodge tool
• Smudge tool
• Rubber Stamp tool

16
Vector Objects
LESSON 3

• Vector objects are mathematically calculated
  objects composed of
• anchor points
• straight or curved line segments

17
Vector Objects
LESSON 3

• Vector objects are created in Fireworks with
• Shape tools
• Pen tool
• Text tool
• Line tool
• Vector objects can be manipulated using the
  Subselection tool

18
Bitmap and Vector Objects
LESSON 3
Bitmap graphic imported into Fireworks
Vector object created with Rectangle tool
19
Positioning Objects
LESSON 3

• You can align and position bitmap and vector
  objects using
• Rulers
• Guides
• Grid
• Objects can snap to guides
• Guides can be hidden or shown using the View menu

20
Working with Text
LESSON 4

• Text can be created and modified in Fireworks
• Text properties include font, size, color,style,
  kerning, leading, alignment, text flow, offset,
  and anti-aliasing

21
Working with Text
LESSON 4

• Kerning adjusts the space between adjacent
  letters or a range of letters
• Leading adjusts the amount of space between lines
  of text
• Anti-aliasing blends the edges of type to the
  color behind them
• You can choose Crisp, Strong, Smooth or No
  anti-aliasing

22
Working with Text
LESSON 4

• Fixed-width text blocks are created by dragging
  the Text tool on the canvas to a fixed size
• Clicking the Text tool on the canvas and typing
  creates an auto-sized text block

23
Attaching Text to a Path
LESSON 4

• Text can be attached to a path to create an
  interesting design
• Create text
• Create path using Pen tool
• Use Attach to Path command on Text menu

24
Attaching Text to a Path
LESSON 4

• You can edit text on a path
• To edit a path, you must detach the text first
  using the Detach from Path command

Text on a path
25
Unit Summary
SUMMARY

• Fireworks creates graphics for Web
• You can import and export many file formats
• The workspace includes canvas, tools, and panels
• Objects are organized in the Layers panel
• The Property inspector helps you modify a
  selected object and shows options for tools

26
Unit Summary
SUMMARY

• You can manipulate bitmap images and create
  vector objects
• You can align and position objects using guides,
  grid and the ruler
• You can create and modify text with many
  formatting features found in word processors
• Text can be attached to a path and detached if
  necessary