Macromedia Fireworks MX 2004 – Design Professional Macromedia Fireworks MX 2004 GETTING STARTED...

Macromedia Fireworks MX 2004 – Design Professional

Macromedia Fireworks MX 2004GETTING STARTED WITH

2Getting Started with Fireworks MX 2004 Web Collection: Fireworks M 2004 Chapter A

Understand the Fireworks work environment

Work with new and existing documents

Work with bitmap images

Create shapes

Create and modify text

Chapter Lessons


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 Macromedia Fireworks


Fireworks MX 2004 integrates seamlessly with other Macromedia MX and MX 2004 applications– Dreamweaver– Macromedia Flash– FreeHand– Director

Getting started with Macromedia Fireworks


Understand the Fireworks work environment

Start Fireworks

Open a file

Adjust panels in the Fireworks window


Viewing the Macromedia Fireworks window

Fireworks window contains – Document window– Tools– Panels



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



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



– 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


Opening a file and viewing panels

Docked panel

Document window

Property inspector


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


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– PNG = Portable Network Graphics– Files have .png extension


Working with filesDifferent 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


Accessing HelpHelp command on Help menuCan 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


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


Creating a new document

New document

dialog box


Using Help

Help tabs


Adding a layer to the Layers panel

New/Duplicate Layer button

Object dragged and dropped into document


Work with Bitmap Images

Modify a bitmap

Create a layer

Lock a layer


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


Understanding the Layers Panel

Layers can be– Hidden/shown– Locked or unlocked– Rearranged/renamed– Duplicated/deleted– Collapsed or expanded


The Layers panel

Collapsed layer

Expanded layer

Show/Hide layer icon

Lock/Unlock layer icon

Delete selection

icon


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



Bitmap images lose image quality when enlarged– Resolution-dependent

– resolution = the number of pixels in an image and its clarity and fineness of detail



Vector objects do not lose image quality when enlarged – Resolution-independent– Will retain appearance

Vector remains

crisp

Bitmap is jagged &

blurry


Moving a layer

Pointer as layer being moved


Create Shapes

Display rulers and guides

Modify a vector object

Apply a stroke to an object


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


Using Rulers, Guides, and the Grid

– Grid– can display

squares or rectangles

– can modify grid colors


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


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


Using the Tools Panel

Basic shape vector tools– Rectangle– Rounded Rectangle– Ellipse– Polygon

Auto Shape vector tools


Applying Fills and Strokes

Adjust fill and stroke attributes on Property inspector

Fills– Solid color– Texture– Pattern


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


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


Rounded Rectangle Auto Shape properties

Fill properties

Color pop-up window

Stroke properties


Vector object with applied stroke

Bitmapimage

Vector object


Create and Modify Text

Create text

Create a path with the Pen tool

Spell check text

Attach the text to the path


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


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


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

– corner or curve

To attach text to a path– Define points on path then attach text

Can edit text attached to path


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

– corner or curveText on a

path


Attaching Text to a PathTo 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


Attaching Text to a PathModify path appearance– Alignment– Orientation– Direction


Creating text


Creating a path

Attaching text to a path


Chapter A SummaryFireworks creates graphics for WebFireworks window includes Document window, tools, and panels that can be arranged based on user preferencesPanels contain tools, properties and perform specific functionsFireworks documents are .png files and contain objects on layers


Chapter A SummaryWork with new and existing files and with bitmap and vector objectsUse Help to learn skillsUser layers and Layers panel to arrange objectsCreate and modify bitmap and vector objectsAlign objects using guides, grid, and the ruler


Chapter A SummarySize and position objects using Info panel or Property inspector

Create and modify text

Spell check text

Attach text to a path

Macromedia Fireworks MX 2004 – Design Professional Macromedia Fireworks MX 2004 GETTING STARTED...

Documents

Transcript of Macromedia Fireworks MX 2004 – Design Professional Macromedia Fireworks MX 2004 GETTING STARTED...