adobe fireworks cs3 revealed chapter one: getting started with adobe fireworks

Adobe Fireworks CS3 Revealed

CHAPTER ONE: GETTING STARTED WITH ADOBE FIREWORKS

Chapter 1 Lessons

Understand the Fireworks work environment

Work with new and existing documents

Work with layers and images

Create shapes

Create and modify text

Fireworks Chapter 1 2

Understanding Fireworks

Fireworks is a graphics program for the Web

Tasks are compartmentalized

Can work with, import from, and export files to other formats


Understanding Fireworks

Fireworks integrates seamlessly with other Adobe Web Suite applications

Flash

Dreamweaver

Photoshop

Illustrator


Lesson 1

Understand the Fireworks Work Environment

In this lesson, you will:

Start Fireworks

Open a file

Adjust panels in the Fireworks window


Lesson 1

Viewing the Fireworks Window

The 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

Panel perform specific functions


Lesson 1


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


Lesson 1


Rearrange panels in Fireworks window based on your preference

Collapse/Expand

Open/Close

Regroup

Dock/Undock


Figure 3: Newly Opened Document

Docked panel

Document window

Property inspector


Lesson 2

Work with New and Existing Documents

In this lesson, you will: Set document properties

Use Index and Contents links of Help

Add a layer to the Layers panel

Copy an object between documents


Lesson 2

Working with Files

Fireworks files are called documents

A document consists of multiple layers A layer can contain multiple objects

Fireworks files are saved as PNG files Files have .png extension


Lesson 2

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


Lesson 2

Accessing Help

Fireworks Help command on the Help menu

Can access from two links Contents link lists topics categorically

Index link lists topics alphabetically

Also use Search text box


Figure 11: Help search results


Lesson 3

Work with Bitmap Images


Modify a bitmap image

Create a layer

Lock a layer


Lesson 3

Understanding the Layers panel

Layers position objects (not pixels)

Layers panel

Arranges objects in document in logical design order and grouping

Objects on a layer similar to viewing multiple objects through clear acetate sheets

Stacking order affects visibilityFireworks Chapter 1 16

Lesson 3

Understanding the Layers panel

Layers can be

Hidden or visible

Locked or unlocked

Rearranged and renamed

Duplicated and deleted

Collapsed or expanded


Figure 19: Layers panel

Collapsed layer

Expanded layer

Show/Hide layer icon

Lock/Unlock layer icon

Delete selection

icon


Lesson 3

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


Lesson 3


Bitmap images lose image quality when enlarged

Resolution-dependent Resolution: the number of pixels in an image and

its clarity and fineness of detail


Lesson 3


Vector objects do not lose image quality when enlarged

Resolution-independent

Will retain appearance


Figure 20: Comparing vector and bitmap images

Vector remains

crisp

Bitmap is jagged &

blurry


Lesson 4

Create Shapes


Display rulers and guides

Create a vector object

Modify a vector object


Lesson 4

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


Lesson 4

Using Rulers, Guides, and the Grid

Grid Can display squares or rectangles

Can modify grid colors


Lesson 4

Sizing and Repositioning 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


Lesson 4

Using the Tools panel

Fireworks automatically determines whether the tool is appropriate for the edited object

Basic shape vector tools

Ellipse, Rectangle, Polygon

Auto Shape vector tools


Lesson 4

Understanding Auto Shapes

Auto Shapes

Complex vector shapes

Manipulated by dragging control points

Control point

Yellow diamond

Appears when you select an Auto Shape


Lesson 4

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

TextureFireworks Chapter 1 29

Lesson 4

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


Lesson 5

Create and Modify Text


Create text

Create a path

Attach your text to the path

Save your document

Exit the program


Lesson 5

Using Text in a Document

Text Tool Properties

Font, Color, size, 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


Lesson 5

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


Lesson 5

Attaching Text to a Path

Use 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


Lesson 5

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


Summary

Chapter 1 Tasks

Start Fireworks

Open a file

Adjust panels including undocking and collapsing them

Set document properties

Use the Index and Contents links of Help


Summary

Chapter 1 Tasks

Add a layer

Copy an object between documents

Modify a bitmap image

Create and lock a layer

Display rulers and guides


Summary

Chapter 1 Tasks

Create and modify a vector object

Create text and a path

Attach the text to the path

Save your document

Exit the program


adobe fireworks cs3 revealed chapter one: getting started with adobe fireworks

Documents

fireworks work environmentwork

fireworks work environmentin

understanding bitmap

layer similar

multiple layersa layer

layers panelcopy

compartmentalizedcan

documentsa document