CIS 205—Web Design & Development

FireworksChapter 3

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

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– It’s 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

Lesson 1: Work with Imported Files (2)

• Import a .gif file1. Open fw3_1.png, save as horizons.png, click Window

on the menu, click Info2. Change the name of Layer 1 on the Layers panel to

Spaceships3. Click File on the menu, click Import, navigate to your

Data Files4. Click the Files of type list arrow, click All readable files5. Double-click rocket.gif6. Position the import pointer on the canvas at

approximately 350 X/150 Y, then click

Lesson 1: Work with Imported Files (3)

• Import a Fireworks .png file1. Click File on the menu, click Import2. Double-click saucer.png3. Position the import pointer on the canvas at

approximately 65 X/290 Y, then click4. Reposition both imported images if necessary, save

your file

• Import a Fireworks .png file1. 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

Lesson 1: Work with Imported Files (4)

• Import a vector file as editable paths1. 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

2. Click File on the menu, click Import, double-click book.eps

3. Click OK in the Vector File Options dialog box4. Position the import pointer in the upper-left corner of

the canvas, click

Lesson 1: Work with Imported Files (5)

• Import an imported vector object1. Verify that the book object is selected, click Modify on

the menu, click Ungroup2. Drag the bottom border of the Layers panel until all the

layers are visible3. 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

4. Click the Book layer on the Layers panel to select all objects on the layer, click Modify on the menu, click Group

5. Save your work

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

Lesson 2: Work with Bitmap Selection Tools (2)• Select pixels using the Marquee tool

1. Click the Background layer on the Layers panel, click the New/Duplicate Layer button, rename the new layer to Galaxy

2. Open galaxy.jpg from your Data Files3. Click the Marquee tool, verify that the Info panel is open4. Verify that Normal is the selected style on the PI and that Anti-

Alias is the Edge of selection setting5. Place the pointer on the canvas at about 40 X/6 Y, drag a

rectangle that surrounds the galaxy6. Click Edit on the menu, click Copy, click Edit, click Paste7. Click the Eye icon next to the original bitmap on the Layers

panel to hide it

Lesson 2: Work with Bitmap Selection Tools (3)• Select pixels using the Oval Marquee tool

1. 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

2. Click and hold the Marquee tool, click the Oval Marquee tool3. 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

4. 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

5. Drag the marquee or use the arrow keys to reposition the oval if necessary

Lesson 2: Work with Bitmap Selection Tools (4)• Transform a selection

1. 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

2. Click the Pointer tool, select the oval galaxy bitmap, drag the oval to the upper-left corner of horizons.png

3. Close galaxy.jpg without saving changes4. Maximize the horizons.png window, select the galaxy object,

click the Scale tool 5. Place the Pointer outside the object until the rotation pointer

appears, drag the selection 75 deg CCW6. Click the Opacity list arrow on the PI to 75, press [Enter]7. Click the pointer tool, drag the Book object and the Saucer

object to match Fig. 18, save your work

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

Lesson 3: Learn About Selection Areas (2)

• Select pixels using the Lasso tool1. Open astrocat.jpg, maximize the Document window2. Click the Zoom tool, click the canvas to view the entire

image in detail3. 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

4. Drag the pointer along the perimeter of the cat, then notice the areas where the marquee is off the mark

5. Click Select on the menu, click Deselect

Lesson 3: Learn About Selection Areas (3)

• Create a selection using the Polygon Lasso tool1. Press and hold the Lasso tool, click the Polygon Lasso

tool2. Create a selection by clicking the pointer along the

perimeter of the image (connect the start and end points)

3. Click Select on the menu, click Save Bitmap Selection4. Type Kitty in the Name text box, click OK

Lesson 3: Learn About Selection Areas (4)• Transform a selection

1. Click Select on the menu, click Expand Marquee, type 10 in the Expand by text box, click OK

2. Click Select on the menu, click Contract Marquee, type 20 in the Contract text box, click OK

3. Click Select on the menu, click Restore Bitmap Selection, click OK

4. Click Select on the menu, click Smooth Marquee, type 10 in the Sample radius pixels text box, click OK

5. Click Select on the menu, click Restore Bitmap Selection, click OK

6. Click Select on the menu, click Select Inverse, press [Delete]7. Click Select on the menu, click Restore Bitmap Selection, click

OK8. Click Edit on the menu, click Copy

Lesson 3: Learn About Selection Areas (5)• Transform a copied selection

1. Click the Pointer tool, click the large rocket object2. Click Edit on the menu, click Paste3. Click Modify on the menu, point to Transform, click Numeric

Transform4. Verify the Scale is selected in the drop-down list and that the

Scale attributes and Constrain proportions check boxes are selected

5. Double-click the width percentage text box, type 50, click OK6. Drag the cat image on top of the rocket window7. Verify that the Info panel is open, click the Scale tool, position

the rotation pointer outside the object, drag the pointer to -73 degrees

8. Click the Pointer tool, position the image (see Fig. 25), click a blank part of the window, save your work

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

Lesson 4: Select Areas Based on Color (2)• Select and copy pixels using the Magic Wand tool

1. Click the Pointer tool, click the planets object on the Background layer, click the Zoom tool, zoom in on the small green moon

2. 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

3. Click the center of the small green moon, click Edit, point to Insert, click Bitmap Via Copy

4. 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

5. Click the Add Filters button on the PI, point to Adjust Color, click Hue/Saturation

6. Click the Colorize check box, enter 275 for Hue, click OK

Lesson 4: Select Areas Based on Color (3)

• Select and alter pixels1. Click the Pointer tool, click the rocketship bitmap object, click

the Magic Wand tool, click the right yellow half of the nose cone

2. Click Select on the menu bar, click Select Similar (all the yellowish sections of the rocket should be selected)

3. 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

4. Click the Add Filters button on the PI, point to Noise, click Add Noise

5. Double-click the Amount text box, type 24, click the Color check box, click OK

6. Click Select on the menu, click Deselect

Lesson 4: Select Areas Based on Color (4)

• Merge and flatten objects and layers1. Click the Pointer tool, click the Spaceships layer2. Click Modify on the menu, click Flatten Selection to

combine all objects on that layer3. Repeat Steps 1 and 2 for the Background layer4. Save your work