Title: CIS 205
1CIS 205Web Design Development
2Chapter 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
3Lesson 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
4Lesson 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
5Lesson 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
6Lesson 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
7Lesson 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
8Lesson 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
9Lesson 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
10Lesson 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
11Lesson 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
12Lesson 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
13Lesson 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
14Lesson 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
15Lesson 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
16Lesson 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
17Lesson 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
18Lesson 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
19Lesson 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
20Lesson 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