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

• Objects can be moved to new layers

The Layers Panel

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