1 / 20

CIS 205—Web Design & Development

CIS 205—Web Design & Development. Fireworks Chapter 3. Chapter 3: Importing, Selecting, and Modifying Graphics. Understanding Importing Getting the right graphic for your web site can be critical

dinesh
Télécharger la présentation

CIS 205—Web Design & Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 • 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 importpointer 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 importpointer 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 importpointer 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 Booklayer 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 MagicWand 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 Eyeicon 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 Marqueetool, click the OvalMarqueetool • Verify that Normal is the selected style in the PI, click the Edgeof 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 Scaletool • 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 pointertool, drag the Bookobject and the Saucerobject 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 optionsfor 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 Zoomtool, click the canvas to view the entire image in detail • Click the Lassotool, click the Edge of selection list arrow on the PI, click Feather, enter 1 in the Amountof 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 PolygonLassotool • 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 ExpandMarquee, type 10 in the Expand by text box, click OK • Click Select on the menu, click ContractMarquee, 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 NumericTransform • Verify the Scale is selected in the drop-down list and that the Scaleattributes and Constrainproportions 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 Pointertool, 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 • FlattenSelection 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 planetsobject on the Background layer, click the Zoom tool, zoom in on the small green moon • Click the MagicWandtool, 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 MagicWandtool, click the right yellow half of the nose cone • Click Select on the menu bar, click SelectSimilar (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 AddNoise • 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 Spaceshipslayer • Click Modify on the menu, click FlattenSelection to combine all objects on that layer • Repeat Steps 1 and 2 for the Backgroundlayer • Save your work

More Related