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 FireworksChapter 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 FireworksChapter 1 3

Understanding Fireworks  Fireworks integrates seamlessly with other Adobe Web Suite applications  Flash  Dreamweaver  Photoshop  Illustrator FireworksChapter 1 4

Lesson 1  Understand the Fireworks Work Environment  In this lesson, you will:  Start Fireworks  Open a file  Adjust panels in the Fireworks window FireworksChapter 1 5

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 FireworksChapter 1 6

Lesson 1  Viewing the Fireworks Window  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 FireworksChapter 1 7

Lesson 1  Viewing the Fireworks Window  Rearrange panels in Fireworks window based on your preference  Collapse/Expand  Open/Close  Regroup  Dock/Undock FireworksChapter 1 8

Figure 3: Newly Opened Document Docked panel Document window Property inspector FireworksChapter 1 9

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 FireworksChapter 1 10

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 FireworksChapter 1 11

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 FireworksChapter 1 12

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 FireworksChapter 1 13

Figure 11: Help search results FireworksChapter 1 14

Lesson 3  Work with Bitmap Images  In this lesson, you will:  Modify a bitmap image  Create a layer  Lock a layer FireworksChapter 1 15

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 visibility FireworksChapter 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 FireworksChapter 1 17

Figure 19: Layers panel Collapsed layer Expanded layer Show/Hide layer icon Lock/Unlock layer icon Delete selection icon FireworksChapter 1 18

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 FireworksChapter 1 19

Lesson 3  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 FireworksChapter 1 20

Lesson 3  Understanding Bitmap Images and Vector Objects  Vector objects do not lose image quality when enlarged  Resolution-independent  Will retain appearance FireworksChapter 1 21

Figure 20: Comparing vector and bitmap images Vector remains crisp Bitmap is jagged & blurry FireworksChapter 1 22

Lesson 4  Create Shapes  In this lesson, you will:  Display rulers and guides  Create a vector object  Modify a vector object FireworksChapter 1 23

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 FireworksChapter 1 24

Lesson 4  Using Rulers, Guides, and the Grid  Grid  Can display squares or rectangles  Can modify grid colors FireworksChapter 1 25

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 FireworksChapter 1 26

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 FireworksChapter 1 27

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 FireworksChapter 1 28

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  Texture FireworksChapter 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 FireworksChapter 1 30

Lesson 5  Create and Modify Text  In this lesson, you will:  Create text  Create a path  Attach your text to the path  Save your document  Exit the program FireworksChapter 1 31

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 FireworksChapter 1 32

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 FireworksChapter 1 33

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 FireworksChapter 1 34

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 FireworksChapter 1 35

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 FireworksChapter 1 36

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 FireworksChapter 1 37

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 FireworksChapter 1 38