Macromedia Fireworks
MX 2004 –
Design Professional
GETTING STARTED WITH
Macromedia Fireworks MX 2004
Chapter Lessons
Understand the Fireworks work
environment
Work with new and existing
documents
Work with bitmap images
Create shapes
Create and modify text
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
2
Getting started with
Macromedia Fireworks
Fireworks is a graphics program for
the Web
Tasks are compartmentalized
Fireworks operates similarly on
Windows and Macintosh platforms
Can work with, import from, and
export files to other formats
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
3
Getting started with
Macromedia Fireworks
Fireworks MX 2004 integrates
seamlessly with other Macromedia
MX and MX 2004 applications
– Dreamweaver
– Macromedia Flash
– FreeHand
– Director
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
4
Understand the Fireworks
work environment
Start Fireworks
Open a file
Adjust panels in the Fireworks
window
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
5
Viewing the Macromedia
Fireworks window
Fireworks window contains
– Document window
– Tools
– Panels
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
6
Viewing the Macromedia
Fireworks window
Document window contains canvas
and display buttons
– Original
– Preview
– 2-Up
– 4-Up
– 2-Up & 4-Up buttons evaluate different
optimization settings side by side
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
7
Viewing the Macromedia
Fireworks window
Panels help perform specific
functions
– Tools panel houses tools
separated into
– sections
• Select, Bitmap, Vector, Web,
Colors, View
– tool groups
• small arrow on button indicates
tool group
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
8
Viewing the Macromedia
Fireworks window
– Property inspector
– modifies selected objects
– sets tool properties & other options
– Rearrange panels in Fireworks window
based on your preference
–
–
–
–
collapse/expand
open/close
regroup
dock/undock
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
9
Opening a file and viewing panels
Document
window
Docked
panel
Property
inspector
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
10
Work with new and existing
documents
Set document properties
Use Index and Search tabs of
Help
Add a layer to the Layers panel
Copy an object between
documents by dragging and
dropping
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
11
Working with files
Fireworks files are called
documents
A document consists of multiple
layers
– A layer can contain multiple objects
Fireworks files are saved as PNG
files
– PNG = Portable Network Graphics
– Files have .png extension
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
12
Working with files
Different file formats support different
images
Different ways to obtain images in
different file formats
– Import files
– Open file
– Copy and paste object
– Drag and drop object
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
13
Accessing Help
Help command on Help menu
Can access from three tabs
– Content
– lists topic by subject matter
– Index
– enter keyword to access topics that begin
with keyword
– Search
– enter keyword to retrieve topics with
keyword in title
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
14
Accessing Help
Use commands on Help menu bar to
navigate Help and print topics
Other ways to obtain support online
– Fireworks Support Center
– Macromedia Online Forums
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
15
Creating a new document
New
document
dialog
box
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
16
Using Help
Help tabs
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
17
Adding a layer
to the Layers
panel
New/Duplicate
Layer button
Object
dragged and
dropped
into document
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
18
Work with Bitmap Images
Modify a bitmap
Create a layer
Lock a layer
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
19
Understanding the Layers
Panel
Layers position objects (not pixels)
Layers panel
– Arranges objects in document in
logical design order and grouping
Objects on layer similar to viewing
multiple objects through clear
acetate sheets
– Stacking order affects visibility
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
20
Understanding the Layers
Panel
Layers can be
– Hidden/shown
– Locked or unlocked
– Rearranged/renamed
– Duplicated/deleted
– Collapsed or expanded
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
21
The Layers panel
Collapsed layer
Expanded layer
Show/Hide
layer icon
Lock/Unlock
layer icon
Getting Started with Fireworks MX 2004
Delete
selection
icon
Web Collection: Fireworks M 2004 Chapter A
22
Understanding Bitmap
Images and Vector Objects
Bitmap graphics represent a picture
as a matrix of pixels on a grid
– Realistically depict pixel colors in a
photograph
– Pixel = smallest discrete square of color
Vector graphic is a mathematically
calculated object
– Composed of anchor points, straight or
curved line segments
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
23
Understanding Bitmap
Images and Vector Objects
Bitmap images lose image quality
when enlarged
– Resolution-dependent
– resolution = the number of pixels in an
image and its clarity and fineness of detail
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
24
Understanding Bitmap
Images and Vector Objects
Vector objects do not lose image
quality when enlarged
– Resolution-independent
– Will retain appearance
Vector
remains
crisp
Getting Started with Fireworks MX 2004
Bitmap is
jagged &
blurry
Web Collection: Fireworks M 2004 Chapter A
25
Moving a layer
Pointer as layer
being moved
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
26
Create Shapes
Display rulers and guides
Modify a vector object
Apply a stroke to an object
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
27
Using Rulers, Guides, and
the Grid
Align and position bitmap and vector
objects using displays opened from
the View menu
– Rulers
– Chapter of measurement is in pixels
– Guides
– do not print
– insert by dragging a guide from the ruler to
the canvas
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
28
Using Rulers, Guides, and
the Grid
– Grid
– can display
squares
or rectangles
– can modify
grid colors
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
29
Sizing and Moving Objects
View the position of objects and the
pointer using
– Info panel
– open from Window menu
– also view color values of selected pixel
– Property inspector
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
30
Using the Tools Panel
Fireworks automatically determines
whether the tool is appropriate for the
edited object
View the position of objects and the
pointer using
– Info panel
– open from Window menu
– also view color values of selected pixel
– Property inspector
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
31
Using the Tools Panel
Basic shape vector tools
– Rectangle
– Rounded Rectangle
– Ellipse
– Polygon
Auto Shape vector tools
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
32
Applying Fills and Strokes
Adjust fill and stroke attributes on
Property inspector
Fills
– Solid color
– Texture
– Pattern
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
33
Applying Fills and Strokes
Fill attributes
– Color
– Category (solid, gradient, or pattern)
– Type and amount of edge of fill
Stroke attributes
– Color
– Tip size
– Softness
– Texture
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
34
Applying Fills and Strokes
Anti-Aliasing = blends the edges of a
stroke or text with surrounding pixels
– Edges blend into the background
– No, Crisp, Strong, or Smooth
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
35
Rounded Rectangle Auto Shape
properties
Color pop-up
window
Fill properties
Getting Started with Fireworks MX 2004
Stroke
properties
Web Collection: Fireworks M 2004 Chapter A
36
Vector object with applied stroke
Bitmap
image
Vector
object
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
37
Create and Modify Text
Create text
Create a path with the Pen tool
Spell check text
Attach the text to the path
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
38
Using Text in a Document
Text tool properties
– Font, size, color, style, kerning
leading, alignment, text flow, offset,
anti-alias
Kerning adjusts the space between
adjacent letters or a range of letters
Leading adjusts the amount of
space between lines of text
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
39
Using Text in a Document
Text blocks
– Fixed-width size never changes
– Auto-sizing expands the text block to
accommodate the amount of text
Spell check
– Can perform on one or more blocks
of text at a time
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
40
Attaching Text to a Path
Use the Pen tool to define points on
a path
– Path = an open or closed vector
consisting of a series of anchor points
– Anchor points join path segments
– corner or curve
To attach text to a path
– Define points on path then attach text
Can edit text attached to path
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
41
Attaching Text to a Path
Use the Pen tool to
define points on a path
– Path = an open or
closed vector consisting
of a series of anchor
points
– Anchor points join path
segments
– corner or curve
Getting Started with Fireworks MX 2004
Text on a path
Web Collection: Fireworks M 2004 Chapter A
42
Attaching Text to a Path
To attach text to a path
– Define points on path
– Use Attach to Path command on Text
menu
Edit text attached to path using Text
tool
Edit points on path using
Subselection tool
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
43
Attaching Text to a Path
Modify path appearance
– Alignment
– Orientation
– Direction
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
44
Creating text
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
45
Creating a
path
Attaching text
to a path
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
46
Chapter A Summary
Fireworks creates graphics for Web
Fireworks window includes
Document window, tools, and panels
that can be arranged based on user
preferences
Panels contain tools, properties and
perform specific functions
Fireworks documents are .png files
and contain objects on layers
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
47
Chapter A Summary
Work with new and existing files and
with bitmap and vector objects
Use Help to learn skills
User layers and Layers panel to
arrange objects
Create and modify bitmap and vector
objects
Align objects using guides, grid, and
the ruler
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
48
Chapter A Summary
Size and position objects using Info
panel or Property inspector
Create and modify text
Spell check text
Attach text to a path
Getting Started with Fireworks MX 2004
Web Collection: Fireworks M 2004 Chapter A
49