CIS 205

1
CIS 205Web Design Development

• Fireworks
• Chapter 1

2
Chapter 1 Getting Started with Fireworks

• Introduction
• Fireworks is a graphics program intended for
  creating Web images and media
• It integrates seamlessly with Flash, Fireworks,
  Photoshop, and Illustrator

3
Lesson 1 Understand the Fireworks Work
Environment

• Viewing the Fireworks Window
• The main area of the Documents window contains
  the canvas
• The Documents window contains four display
  buttons
• Original
• Preview
• 2-Up
• 4-Up
• Tools are housed in the Tools panel, organized
  into groups
• Modify selected objects using the Property
  inspector
• Panels can be arranged using the collapse arrow
  and the gripper

4
Lesson 1 Understand the Fireworks Work
Environment (2)

• Start Fireworks and open a Fireworks document
• Click Start on the taskbar, point to All
  Programs, point to Adobe Web Standard CS3, click
  Adobe Fireworks CS3
• Mac users
• Click File on the menu bar, click Open
• Navigate to your data files, click fw1_1.png,
  click Open

5
Lesson 1 Understand the Fireworks Work
Environment (3)

• Open and adjust panels in the Fireworks window
• Click the arrow next to the name of each open
  panel to close them
• Click the Optimize and Align panel name to open
  it. Move the pointer, drag the gripper (located
  on the left of the panel arrow) to the left until
  you see the placement rectangle and release
• Click the Pages and Layers and Frames panel title
• Click the Collapse arrow in the middle left of
  the panel
• Click the Expander arrow to expand a panel area
• Drag the Optimize and Align panel to the top
• Click File on the menu bar, click Close

6
Lesson 2 Work with New and Existing Documents

• Working with Files
• A Fireworks file is called a document, which has
  properties.
• A document consists of many layers, each of which
  can contain multiple objects.
• A layer can contain sub layers.
• Working with Pages
• A document contains one page and pages can be
  added
• A page stores all layers in a document
• You can create a Master Page containing common
  elements

7
Lesson 2 Work with New and Existing Documents (2)

• Working with Pages (continued)
• The file type of a document is PNG.
• Other formats are JPEG (for photos) and GIF (for
  line art)
• You can copy, paste, drag, and drop images or
  text from other applications into a Fireworks
  document
• Accessing Help
• Click Help on the menu bar, click Fireworks Help
• Using Filters on Bitmap Images
• Filters enhance images by transforming pixels

8
Lesson 2 Work with New and Existing Documents (3)

• Create and save a new document
• Click File on the menu bar, click New
• Type 325 in the Width text box, double-click the
  value in the Height text box, type 275, enter 72
  pixels/in in the Resolution text box
• Click the Custom canvas option, click the Canvas
  color box
• Type 0099FF in the Swap colors text box, press
  Enter, click OK
• Click File on the menu bar, click Save As, type
  my_blue_heaven in the File name text box,
  navigate to the desired location, click Save

9
Lesson 2 Work with New and Existing Documents (4)

• Get Help and add a layer
• Click Help on the menu bar, click Fireworks Help
• Type adding layers in the Search text box
• Type adding layers in the Search box, press
  Enter
• Click Adding and removing layers, click the Help
  window Close button
• Open the Layers panel, click the New/Duplicate
  Layer button at the bottom of the panel

10
Lesson 2 Work with New and Existing Documents (5)

• Drag and drop an object
• Open pool.png (located in your Data Files),
  resize the two documents so that both are visible
  at the same time
• Make sure the Pointer tool is selected
• Click anywhere on the pool image, drag it to the
  my_blue_heaven document
• Close pool.png w/o saving changes
• Expand the Optimize and Align panel, click the
  Align tab, click the To Canvas button
• Make sure the bitmap object is selected, click
  the Align horizontal center icon, click the Align
  vertical center icon
• Collapse the Optimize and Align panel, click File
  on the menu bar, click Save

11
Lesson 2 Work with New and Existing Documents (6)

• Apply filters to an image
• Verify that the bitmap is selected, click the
  Pointer tool
• Click the Add Live Filters button on the PI,
  point to Shadow and Glow, click Inner Shadow
• Press Enter to close the pop-up window
• Click the Add Live Filters button on the PI,
  click Photoshop Live Effects, click the Bevel and
  Emboss check box, click Bevel and Emboss
• Click the Style list arrow, click Outer Bevel,
  click OK
• Click away from the image
• Save your work, close my_blue_heaven.png

12
Lesson 3 Work with Layers and Images

• Understanding the Layers Panel
• In Fireworks, you use layers to position objects
• The position of objects/layers in the Layers
  panel affects the appearance of the document
• A layer can contain many objects and you can
  collapse or expand, lock, duplicate, hide, or
  show layers
• Understanding Bitmap Images and Vector Objects
• A bitmap graphic is an image with a matrix of
  pixels
• Vector graphics are mathematically calculated
  objects
• Scaling a bitmap image loses resolution (ppi)
• Vector graphics are resolution independent

13
Lesson 3 Work with Layers and Images (2)

• Open a document and display the Layers panel
• Open fw1_1.png in your data files, save it as
  breads
• Make sure the Layers panel is displayed and
  expanded
• Click the Eye icon next to the Great_Crusts
  object
• Click the Show/Hide icon next to the Great_Crusts
  object in Layer 1
• Click the Great_Crusts object in Layer 1 on the
  Layers panel, drag it beneath the LoavesBrie
  object in the Background layer until a flashing
  double line appears
• Verify that the Great_Crusts object is still
  selected, click the Delete Selection button