1. CIS 205—Web 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 – 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

4. Lesson 1: Work with Imported Files (2) Import a.gif file 1.Open fw3_1.png, save as horizons.png, click Window on the menu, click Info 2.Change the name of Layer 1 on the Layers panel to Spaceships 3.Click File on the menu, click Import, navigate to your Data Files 4.Click the Files of type list arrow, click All readable files 5.Double-click rocket.gif 6.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 1.Click File on the menu, click Import 2.Double-click saucer.png 3.Position the import pointer on the canvas at approximately 65 X/290 Y, then click 4.Reposition both imported images if necessary, save your file Import a Fireworks.png file 1.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 1.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 box 4.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 1.Verify that the book object is selected, click Modify on the menu, click Ungroup 2.Drag the bottom border of the Layers panel until all the layers are visible 3.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

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 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 Files 3.Click the Marquee tool, verify that the Info panel is open 4.Verify that Normal is the selected style on the PI and that Anti- Alias is the Edge of selection setting 5.Place the pointer on the canvas at about 40 X/6 Y, drag a rectangle that surrounds the galaxy 6.Click Edit on the menu, click Copy, click Edit, click Paste 7.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 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 tool 3.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

11. 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 changes 4.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 CCW 6.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

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 1.Open astrocat.jpg, maximize the Document window 2.Click the Zoom tool, click the canvas to view the entire image in detail 3.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

14. Lesson 3: Learn About Selection Areas (3) Create a selection using the Polygon Lasso tool 1.Press and hold the Lasso tool, click the Polygon Lasso tool 2.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 Selection 4.Type Kitty in the Name text box, click OK

15. 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 OK 8.Click Edit on the menu, click Copy

16. Lesson 3: Learn About Selection Areas (5) Transform a copied selection 1.Click the Pointer tool, click the large rocket object 2.Click Edit on the menu, click Paste 3.Click Modify on the menu, point to Transform, click Numeric Transform 4.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 OK 6.Drag the cat image on top of the rocket window 7.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

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

19. Lesson 4: Select Areas Based on Color (3) Select and alter pixels 1.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

20. Lesson 4: Select Areas Based on Color (4) Merge and flatten objects and layers 1.Click the Pointer tool, click the Spaceships layer 2.Click Modify on the menu, click Flatten Selection to combine all objects on that layer 3.Repeat Steps 1 and 2 for the Background layer 4.Save your work