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

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

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

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

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

Getting started with Macromedia Fireworks

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

Understand the Fireworks work environment

Start Fireworks

Open a file

Adjust panels in the Fireworks window

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

Viewing the Macromedia Fireworks window

Fireworks window contains – Document window– Tools– Panels

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

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

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

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

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

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

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

Opening a file and viewing panels

Docked panel

Document window

Property inspector

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

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

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

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

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

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

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

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

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

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

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

Creating a new document

New document

dialog box

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

Using Help

Help tabs

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

Adding a layer to the Layers panel

New/Duplicate Layer button

Object dragged and dropped into document

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

Work with Bitmap Images

Modify a bitmap

Create a layer

Lock a layer

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

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

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

Understanding the Layers Panel

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

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

The Layers panel

Collapsed layer

Expanded layer

Show/Hide layer icon

Lock/Unlock layer icon

Delete selection

icon

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

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

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

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

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

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

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

Moving a layer

Pointer as layer being moved

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

Create Shapes

Display rulers and guides

Modify a vector object

Apply a stroke to an object

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

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

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

Using Rulers, Guides, and the Grid

– Grid– can display

squares or rectangles

– can modify grid colors

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

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

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

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

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

Using the Tools Panel

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

Auto Shape vector tools

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

Applying Fills and Strokes

Adjust fill and stroke attributes on Property inspector

Fills– Solid color– Texture– Pattern

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

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

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

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

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

Rounded Rectangle Auto Shape properties

Fill properties

Color pop-up window

Stroke properties

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

Vector object with applied stroke

Bitmapimage

Vector object

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

Create and Modify Text

Create text

Create a path with the Pen tool

Spell check text

Attach the text to the path

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

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

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

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

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

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

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

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

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

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

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

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

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

Creating text

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

Creating a path

Attaching text to a path

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

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

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

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

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

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

Create and modify text

Spell check text

Attach text to a path