Transcript Document

Macromedia Fireworks
Understanding Fireworks
• 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
Working with Files
• Fireworks files are called
documents
• Fireworks files are saved as PNG
files
– Portable Network Graphics
– have .png extension
File Formats
• Many file formats can be imported
into Fireworks
• Fireworks documents can be
exported as a variety of file
formats
• You can copy and paste images
into Fireworks
File Formats
Available options for Fireworks
The Fireworks Window
• 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
The Fireworks Window
• Property inspector
– used to modify selected object
– shows properties specific to a tool or
command
– docked at bottom of workspace
The Fireworks Window
• 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
The Layers Panel
• 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
The Layers Panel
• Layers can be
– hidden or shown
– locked or unlocked
– rearranged
– duplicated
– deleted
– collapsed or expanded
– renamed
The Layers Panel
• Objects can be
moved to new
layers
Bitmap Images
• 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
Bitmap Images
• Bitmap file formats:
– BMP
– PICT
– GIF
– JPEG
– PNG
– TIFF
– PSD (Adobe Photoshop)
Bitmap Images
• Bitmap tools in Fireworks are used
to modify pixels
– Blur tool
– Sharpen tool
– Burn tool
– Dodge tool
– Smudge tool
– Rubber Stamp tool
Vector Objects
• Vector objects are mathematically calculated
objects composed of
– anchor points
– straight or curved line segments
• Vector objects are created in Fireworks with
– Shape tools
– Pen tool
– Text tool
– Line tool
• Vector objects can be manipulated using the
Subselection tool
Positioning Objects
• 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
Working with Text
• Text can be created and modified in the
properties panel
• Text properties include font, size, color,style,
kerning, leading, alignment, text flow, offset,
and anti-aliasing
• Kerning adjusts the space between adjacent
letters or a range of letters
• Leading adjusts the amount of space between
lines of text
Working with Text
• 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
• Anti-aliasing blends the edges of type to
the color behind them
– You can choose Crisp, Strong,
Smooth or No anti-aliasing
Attaching Text to a Path
• 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
Attaching Text to a Path
• You can edit
text on a path
• To edit a path,
you must
detach the text
first using the
Detach from
Path command
Working with Objects
• Fireworks 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
Working with Objects
• Objects can be combined with others to
become new shapes
• Apply fills, strokes and effects to
objects using the Property inspector
• Objects can be joined using the Group
command
• Group objects are treated as one unit
• Ungrouped objects maintain their
original appearance
Path Operations
• Fireworks offers six ways to the paths
of two or more vector objects
–
–
–
–
–
–
Join
Split
Union
Intersect
Punch
Crop
Path Operations
• Join
– Combines the paths of two or more
objects to create a single merged
object
– Includes all points on both paths
– Overlapping area appears empty
– Can be used to join selected end
points of open paths
Combine Paths Options
• Split
– Splits the path of two or more objects
that had been combined using the
Join command
• Union
– Creates a path that is the sum total
of all selected areas
Combine Paths Options
• Intersect
– Creates an object by eliminating everything
except the overlapping areas of the selected
objects
• Punch
– The topmost object carves its shape
through all lower selected objects
• Crop
– The topmost path removes the areas of the
paths beneath it
Modifying Objects
• Vector objects can be modified by
– Applying fill color, gradients and
patterns
– Changing stroke color, texture, type
of edge, opacity and blend mode
Gradients
• Gradients are two or more colors that
blend into each other in a fixed design
– Gradient options are found in
Property inspector
– Fireworks includes preset gradients
Patterns
• Patterns are chosen from the Fill
category list arrow
– There are many preset pattern fills
– Pattern fills can be modified
– Patterns can be previewed in the
Property inspector
– You can create a custom pattern
using a bitmap file of your own
Edges and Textures
• Edges refer to the edge of a fill applied
to a vector object
• The type of edge (hard, soft or feather)
make it appear to blend or fade into the
background
• Textures can be applied to fills to create
a tactile illusion
• Custom textures can be created from
bitmap files
Working with Effects
• Effects are like filters that add the illusion of
depth and dimension to objects
• Examples of effects include drop shadows,
blurs, and glows
• Effects are found in the Property inspector
• Multiple effects can be applied to objects
• The Edit and arrange effects list in the
Property inspector lets you
– Change effect settings
– Temporarily hide an effect
– Rearrange order of effects
– Adjust opacity of effects
Understanding Filters
• Filters are very similar to effects
– Found under Filters menu
– Are not listed in Edit and
arrange effects list in Property
inspector
– Cannot be temporarily hidden
or rearranged
Understanding Opacity
• Opacity is the amount that an
object is opaque or transparent
– Completely opaque = 100% opacity
– Completely transparent = 0% opacity
• Opacity settings are found in
Layers panel and Effects section of
Property inspector
Working with Styles
• Styles are preset attributes that can be
applied to text and objects
• Style attributes include
– color
– texture
– type of edge
• Preset styles are found in the Styles panel
• Styles can be renamed and edited
• The Edit Styles dialog box allows you to
control which attributes the style should apply
– Example: Deselect the Font and Text Size
check boxes to maintain the original font
style and size
Using Plug-ins
• Plug-ins are mini applications that add
features or enhancements to other software
applications
– Eye Candy 4000 LE made from Alien Skin
products is an example of a plug-in
• Adobe Photoshop plug-ins are accessible in
Fireworks
– Open Fireworks Preferences dialog box
– Click Folders tab to access folders
containing Photoshop plug-ins
– Click Import tab to determine how
Fireworks translates layers and text