macromedia fireworks 8 revealed macromedia fireworks getting started with
TRANSCRIPT
2Macromedia Fireworks 8 Revealed Chapter 1
Understand the Fireworks work environment
Work with new and existing documents
Work with bitmap images
Create shapes
Create and modify text
Chapter Lessons
3Macromedia Fireworks 8 Revealed Chapter 1
Fireworks is a graphics program for the Web
Tasks are compartmentalized
Can work with, import from, and export files to other formats
Understanding Fireworks
4Macromedia Fireworks 8 Revealed Chapter 1
Fireworks integrates seamlessly with other Macromedia applications– Dreamweaver– Flash– FreeHand– Director
Understanding Fireworks
5Macromedia Fireworks 8 Revealed Chapter 1
Understand the Fireworks Work Environment
In this lesson, you will:– Start Fireworks– Open a file– Adjust panels in the Fireworks window
6Macromedia Fireworks 8 Revealed Chapter 1
Viewing the Fireworks Window
Fireworks window contains – Document window– Property inspector– Panels
7Macromedia Fireworks 8 Revealed Chapter 1
Viewing the Fireworks Window
Document window contains canvas and display buttons– Display buttons: Original, Preview, 2-
Up, 4-Up– 2-Up & 4-Up buttons allow you to
evaluate different optimization settings side by side
Panels perform specific functions
8Macromedia Fireworks 8 Revealed Chapter 1
Viewing the Fireworks Window
Tools panel houses tools organized into tool groups– Select, Bitmap, Vector, Web,
Colors, View
Property inspector – Modifies selected objects– Sets tool properties and other
options
9Macromedia Fireworks 8 Revealed Chapter 1
Viewing the Fireworks Window
Rearrange panels in Fireworks window based on your preference– Collapse/expand– Open/close– Regroup– Dock/undock
10Macromedia Fireworks 8 Revealed Chapter 1
Docked panel
Document window
Property inspector
Viewing the Fireworks Window
FIGURE 3 Newly opened document
11Macromedia Fireworks 8 Revealed Chapter 1
Work with New and Existing Documents
In this lesson, you will:– Set document properties– Use Index and Search tabs of Help– Add a layer to the Layers panel– Copy an object between documents
12Macromedia Fireworks 8 Revealed Chapter 1
Working with Files
Fireworks files are called documentsA document consists of multiple layers– A layer can contain multiple objects
Fireworks files are saved as PNG files– Files have .png extension
13Macromedia Fireworks 8 Revealed Chapter 1
Working with Files
Different file formats support different images
Different ways to obtain images in different file formats– Import file– Open file– Copy and paste object– Drag and drop object
14Macromedia Fireworks 8 Revealed Chapter 1
Accessing HelpHelp 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
15Macromedia Fireworks 8 Revealed Chapter 1
Accessing HelpUse commands on Help menu bar to navigate Help and print topics
Other ways to obtain support online– Fireworks Support Center– Macromedia Online Forums
16Macromedia Fireworks 8 Revealed Chapter 1
Help tabs
Accessing Help
FIGURE 10 Getting help on a topic
17Macromedia Fireworks 8 Revealed Chapter 1
Work with Bitmap Images
In this lesson, you will:– Modify a bitmap image– Create a layer– Lock a layer
18Macromedia Fireworks 8 Revealed Chapter 1
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
19Macromedia Fireworks 8 Revealed Chapter 1
Understanding the Layers Panel
Layers can be– Hidden or visible– Locked or unlocked– Rearranged and renamed– Duplicated and deleted– Collapsed or expanded
20Macromedia Fireworks 8 Revealed Chapter 1
Collapsed layer
Expanded layer
Show/Hide layer icon
Lock/Unlock layer icon
Delete selection
icon
Understanding the Layers Panel
FIGURE 16 Layers panel
21Macromedia Fireworks 8 Revealed Chapter 1
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
Vector graphic is a mathematically calculated object – Composed of anchor points and
straight or curved line segments
22Macromedia Fireworks 8 Revealed Chapter 1
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
23Macromedia Fireworks 8 Revealed Chapter 1
Understanding Bitmap Images and Vector Objects
Vector objects do not lose image quality when enlarged – Resolution-independent– Will retain appearance
Vector remains
crisp
Bitmap is jagged &
blurry
FIGURE 17 Comparing vector and bitmap graphics
24Macromedia Fireworks 8 Revealed Chapter 1
Create Shapes
In this lesson, you will:– Display rulers and guides– Create a vector object– Modify a vector object
25Macromedia Fireworks 8 Revealed Chapter 1
Using Rulers, Guides, and the Grid
Design aides that help you precisely align and position objects– Rulers
• Ruler units are always in pixels
– Guides• Do not print• Insert by dragging a guide from the ruler to
the canvas
26Macromedia Fireworks 8 Revealed Chapter 1
Using Rulers, Guides, and the Grid
Grid– Can display squares or rectangles– Can modify grid colors
27Macromedia Fireworks 8 Revealed Chapter 1
Sizing and RepositioningObjects
View the position of objects and the pointer using– Info panel
• Open from Window menu• Also view color values of selected pixel
– Property inspector
28Macromedia Fireworks 8 Revealed Chapter 1
Using the Tools Panel
Fireworks automatically determines whether the tool is appropriate for the edited objectBasic shape vector tools– Rectangle, Ellipse, Polygon
Auto Shape vector tools
29Macromedia Fireworks 8 Revealed Chapter 1
Understanding Auto Shapes
Auto Shapes– Complex vector shapes– Manipulated by dragging control points
Control point– Yellow diamond– Appears when you select an Auto
Shape
30Macromedia Fireworks 8 Revealed Chapter 1
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
31Macromedia Fireworks 8 Revealed Chapter 1
Applying Fills and Strokes
Anti-Aliasing: blends the edges of a stroke or text with surrounding pixels– Edges blend into the background– Anti-alias settings
• No, Crisp, Strong, or Smooth
32Macromedia Fireworks 8 Revealed Chapter 1
Create and Modify Text
In this lesson, you will:– Create text – Create a path– Attach the text to the path– Save your document– Exit the program
33Macromedia Fireworks 8 Revealed Chapter 1
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
34Macromedia Fireworks 8 Revealed Chapter 1
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
35Macromedia Fireworks 8 Revealed Chapter 1
Attaching Text to a PathUse 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
Can edit text attached to path
36Macromedia Fireworks 8 Revealed Chapter 1
Attaching Text to a Path
Text attached to a path
Path
FIGURE 32 Text on paths
37Macromedia Fireworks 8 Revealed Chapter 1
Attaching Text to a Path
To attach text to a path– Define points on path– Use Attach to Path command on Text
menu
Create text using the Text tool
Edit points on path using the Subselection tool
38Macromedia Fireworks 8 Revealed Chapter 1
Chapter 1 TasksStart Fireworks
Open a file
Adjust panels, including undocking and collapsing them
Set document properties
Use the Index and Search tabs of Help
39Macromedia Fireworks 8 Revealed Chapter 1
Chapter 1 TasksAdd a layer
Copy an object between documents
Modify a bitmap image
Create and lock a layer
Display rulers and guides