CIS 205

1
CIS 205Web Design Development

• Fireworks
• Chapter 3

2
Chapter 3 Importing, Selecting, and Modifying
Graphics

• Understanding Importing
• Getting the right graphic for your web site can
  be critical
• You may need to import graphics from other
  sources such as Photoshop, Illustrator, or a
  digital camera
• Modifying Images
• You can modify the pixels of a bitmap image
• Pixels can be selected by area or by color

3
Lesson 1 Work with Imported Files

• Working with Other Adobe CS3 Applications
• Fireworks has always integrated well with
  Dreamweaver and Flash
• Fireworks also works with Photoshop and
  Illustrator
• Adobe Bridge is a tool for managing different
  kinds of files
• Using Files Created in Other Applications
• Photoshop files can be imported by opening them
  in Fireworks, dragging and dropping into
  Fireworks, or copying and pasting
• Its best to import a .psd file into Fireworks so
  that the structure and effects are preserved
• You can also import Illustrator files (.ai
  extension) with all structure and effects
  preserved
• Importing and Saving Files
• Selecting Edit, Preferences sets up how files are
  imported
• You can save an imported file as .png or as some
  other type

4
Lesson 1 Work with Imported Files (2)

• Import a .gif file
• Open fw3_1.png, save as horizons.png, click
  Window on the menu, click Info
• Change the name of Layer 1 on the Layers panel to
  Spaceships
• Click File on the menu, click Import, navigate to
  your Data Files
• Click the Files of type list arrow, click All
  readable files
• Double-click rocket.gif
• Position the import pointer on the canvas at
  approximately 350 X/150 Y, then click

5
Lesson 1 Work with Imported Files (3)

• Import a Fireworks .png file
• Click File on the menu, click Import
• Double-click saucer.png
• Position the import pointer on the canvas at
  approximately 65 X/290 Y, then click
• Reposition both imported images if necessary,
  save your file
• Import a Fireworks .png file
• Click the Background layer on the Layers panel,
  click the New/Duplicate Layer button (bottom of
  the Layers panel), change the name of the new
  layer to Book

6
Lesson 1 Work with Imported Files (4)

• Import a vector file as editable paths
• Click the Background layer on the Layers panel,
  click the New/Duplicate Layer button (bottom of
  the Layers panel), change the name of the new
  layer to Book
• Click File on the menu, click Import,
  double-click book.eps
• Click OK in the Vector File Options dialog box
• Position the import pointer in the upper-left
  corner of the canvas, click

7
Lesson 1 Work with Imported Files (5)

• Import an imported vector object
• Verify that the book object is selected, click
  Modify on the menu, click Ungroup
• Drag the bottom border of the Layers panel until
  all the layers are visible
• Click a blank part of the canvas, click the
  Group 9 objects object on the Layers panel to
  select the word Horizons, drag the word to center
  it on the book
• Click the Book layer on the Layers panel to
  select all objects on the layer, click Modify on
  the menu, click Group
• Save your work

8
Lesson 2 Work with Bitmap Selection Tools

• Understanding Pixel Selection Tools
• You can select an area of pixels with a marquee
  selection
• You can use the Marquee, Lasso, and Magic Wand
  tools to select pixels
• You can copy or cut a pixel selection as a new
  object
• Using the Marquee Tools
• You can create a marquee as a rectangle, ellipse,
  square, or circle
• You can use the properties of the marquee tool to
  set exact size
• Using the Transformation Tools
• These tools consist of the Scale tool, Skew tool,
  and Distort tool
• Scale resizes an object
• Skew slants an object
• Distort can create perspective for an object

9
Lesson 2 Work with Bitmap Selection Tools (2)

• Select pixels using the Marquee tool
• Click the Background layer on the Layers panel,
  click the New/Duplicate Layer button, rename the
  new layer to Galaxy
• Open galaxy.jpg from your Data Files
• Click the Marquee tool, verify that the Info
  panel is open
• Verify that Normal is the selected style on the
  PI and that Anti-Alias is the Edge of selection
  setting
• Place the pointer on the canvas at about 40 X/6
  Y, drag a rectangle that surrounds the galaxy
• Click Edit on the menu, click Copy, click Edit,
  click Paste
• Click the Eye icon next to the original bitmap on
  the Layers panel to hide it

10
Lesson 2 Work with Bitmap Selection Tools (3)

• Select pixels using the Oval Marquee tool
• Click the Eye icon next to the top galaxy bitmap
  on the Layers panel, click the Show/Hide icon
  next to the bottom galaxy bitmap to hide the
  rectangular selection
• Click and hold the Marquee tool, click the Oval
  Marquee tool
• Verify that Normal is the selected style in the
  PI, click the Edge of selection list arrow, click
  Feather, enter 20 in the Amount of feather text
  box
• Place the pointer in the middle of the galaxy
  (180 X/175 Y), press and hold Alt, drag to
  create an oval that covers the galaxy
• Drag the marquee or use the arrow keys to
  reposition the oval if necessary

11
Lesson 2 Work with Bitmap Selection Tools (4)

• Transform a selection
• Click the resize button of the galaxy.jpg window
  to make it smaller (upper-right corner of the
  window), drag it so that it and the horizons.png
  window are both visible
• Click the Pointer tool, select the oval galaxy
  bitmap, drag the oval to the upper-left corner of
  horizons.png
• Close galaxy.jpg without saving changes
• Maximize the horizons.png window, select the
  galaxy object, click the Scale tool
• Place the Pointer outside the object until the
  rotation pointer appears, drag the selection 75
  deg CCW
• Click the Opacity list arrow on the PI to 75,
  press Enter
• Click the pointer tool, drag the Book object and
  the Saucer object to match Fig. 18, save your
  work

12
Lesson 3 Learn About Selection Areas

• Using the Lasso Tools
• The Lasso tool allows you to select an exact area
  working freeform
• You click repeatedly around the area you want to
  select
• Using Select Menu Commands
• The Select command on the menu provides more
  options for selecting pixels after you have
  created a marquee

13
Lesson 3 Learn About Selection Areas (2)

• Select pixels using the Lasso tool
• Open astrocat.jpg, maximize the Document window
• Click the Zoom tool, click the canvas to view the
  entire image in detail
• Click the Lasso tool, click the Edge of selection
  list arrow on the PI, click Feather, enter 1 in
  the Amount of feather text box
• Drag the pointer along the perimeter of the cat,
  then notice the areas where the marquee is off
  the mark
• Click Select on the menu, click Deselect

14
Lesson 3 Learn About Selection Areas (3)

• Create a selection using the Polygon Lasso tool
• Press and hold the Lasso tool, click the Polygon
  Lasso tool
• Create a selection by clicking the pointer along
  the perimeter of the image (connect the start and
  end points)
• Click Select on the menu, click Save Bitmap
  Selection
• Type Kitty in the Name text box, click OK

15
Lesson 3 Learn About Selection Areas (4)

• Transform a selection
• Click Select on the menu, click Expand Marquee,
  type 10 in the Expand by text box, click OK
• Click Select on the menu, click Contract Marquee,
  type 20 in the Contract text box, click OK
• Click Select on the menu, click Restore Bitmap
  Selection, click OK
• Click Select on the menu, click Smooth Marquee,
  type 10 in the Sample radius pixels text box,
  click OK
• Click Select on the menu, click Restore Bitmap
  Selection, click OK
• Click Select on the menu, click Select Inverse,
  press Delete
• Click Select on the menu, click Restore Bitmap
  Selection, click OK
• Click Edit on the menu, click Copy

16
Lesson 3 Learn About Selection Areas (5)

• Transform a copied selection
• Click the Pointer tool, click the large rocket
  object
• Click Edit on the menu, click Paste
• Click Modify on the menu, point to Transform,
  click Numeric Transform
• Verify the Scale is selected in the drop-down
  list and that the Scale attributes and Constrain
  proportions check boxes are selected
• Double-click the width percentage text box, type
  50, click OK
• Drag the cat image on top of the rocket window
• Verify that the Info panel is open, click the
  Scale tool, position the rotation pointer outside
  the object, drag the pointer to -73 degrees
• Click the Pointer tool, position the image (see
  Fig. 25), click a blank part of the window, save
  your work

17
Lesson 4 Select Areas Based on Color

• Using the Magic Wand Tool
• The Magic Wand tool makes selections based on
  color
• The Select Similar command selects pixels close
  to the original color
• Merging and Flattening Objects and Layers
• A Layers panel with a large number of objects can
  become cluttered and disorganized
• You can merge objects into single images, but
  they then cannot be broken apart
• Merge Down merges adjacent object
• Flatten Selection merges all selected objects

18
Lesson 4 Select Areas Based on Color (2)

• Select and copy pixels using the Magic Wand tool
• Click the Pointer tool, click the planets object
  on the Background layer, click the Zoom tool,
  zoom in on the small green moon
• Click the Magic Wand tool, double-click the
  Tolerance text box on the PI, type 64, click the
  Edge of selection list arrow, click Anti-Alias
• Click the center of the small green moon, click
  Edit, point to Insert, click Bitmap Via Copy
• Click Select on the menu, click Deselect, click
  the Pointer tool, click the copied bitmap on the
  canvas, drag to the upper-left corner of the
  canvas
• Click the Add Filters button on the PI, point to
  Adjust Color, click Hue/Saturation
• Click the Colorize check box, enter 275 for Hue,
  click OK

19
Lesson 4 Select Areas Based on Color (3)

• Select and alter pixels
• Click the Pointer tool, click the rocketship
  bitmap object, click the Magic Wand tool, click
  the right yellow half of the nose cone
• Click Select on the menu bar, click Select
  Similar (all the yellowish sections of the rocket
  should be selected)
• Click Edit, point to Insert, click Bitmap Via
  Copy, click Select, click Deselect, click the
  Pointer tool, click the new bitmap on the Layers
  panel
• Click the Add Filters button on the PI, point to
  Noise, click Add Noise
• Double-click the Amount text box, type 24, click
  the Color check box, click OK
• Click Select on the menu, click Deselect

20
Lesson 4 Select Areas Based on Color (4)

• Merge and flatten objects and layers
• Click the Pointer tool, click the Spaceships
  layer
• Click Modify on the menu, click Flatten Selection
  to combine all objects on that layer
• Repeat Steps 1 and 2 for the Background layer
• Save your work