adobe dreamweaver cs5 on demand part 24 pot

When you edit an image in Dreamweaver, you're actually mak-ing permanent changes to the original, and Dreamweaver lets you know as you work.. Editing Images Use Optimize Open the Web pag

When you place an image into a Dreamweaver document, there's a good chance that the image was first processed in another application

For example, you might use Adobe Fireworks or Photoshop to prep pho-tographs If you planned out the Web project, you'll be able to drop that image into the Web page, and it will fit like the proverbial glove

Unfortunately, you might not be the one creating the images; or it’s pos-sible that you need to make a change While it's always desirable to edit an image in the originating application, Dreamweaver gives you the ability to make minor changes to the image For example, you can use Dreamweaver's new optimize feature (Hint: If you've ever used Photoshop's and Illustrator's Save For Web feature, you're halfway there) In addition, you can resize the image to fit a specific width and height When you edit an image in Dreamweaver, you're actually mak-ing permanent changes to the original, and Dreamweaver lets you know as you work

Editing Images

Use Optimize

Open the Web page with the

image you want to edit

Select the image you want to

modify

Click the Modify menu, point to

Image, and then click Optimize.

Click the Options tab to utilize the

following options:

◆ Format Click the Format list

arrow, and then select a format

from the available options

◆ Palette Click the Palette box,

and then select a color palette

from the available options

◆ Loss Set to zero by default (not

applicable PNG-8 images)

◆ Dither Select the Dither check

box, and then set the dither

percentage you want from zero

to 100 percent The dither

option helps to visually

approximate colors that are not

4

3

2

◆ Color Value Enter a value that

represents the maximum

number of colors in the image

(2-256), and then adjust the

colors (optional) in the color

box

◆ Transparency Click the

Transparency list arrow, and

then click No Transparency,

Index Transparency (based on

available colors), or Alpha

Transparency (based on an

alpha mask)

◆ Eyedropper Click the Select

Transparent Color button, and

then click in the Index Color

box to choose the image colors

to be made transparent You

can also use the other

eyedropper buttons to add or

remove a color from the

transparency

◆ Remove Unused Colors Select

the Remove Unused Colors

check box to remove any

unused colors from the color

box

◆ Interlaced Browser Display

Select the Interlaced Browser

Display check box to display

(load) images in the client

browser at low resolution and

then progressively increases to

full resolution

◆ Optimize To Size Click the

Optimize To Size button to

specify the desired size of the

image In turn, Dreamweaver

attempts to optimize the image

to the selected size

Continue Next Page

4

Preparing Images for the Web

There are several differences between preparing images for the Web and for print documents The major differences include: (1) Web images are typically saved at 72 dpi (dots per inch), while print images are generally saved at 300 dpi, (2) Web images are saved using the RGB (Red, Green, Blue) color system, while print images are CMYK (Cyan, Magenta, Yellow, Black) color mode, and (3) Web images are saved to JPEG, GIF, or PNG format (which you can create

or modify in Photoshop, Illustrator, and Fireworks), while print images are typically saved in the TIFF format

For Your Information

Continued from Previous Page

Click the File tab to utilize the

following options:

◆ % Enter a value from 2 to 200

percent, or drag the slider to

change the size of the image,

based on a percentage value

◆ W and H Enter a value (in

pixels) to change the width and

height of the image

◆ Constrain Select the Constrain

check box to keep the width

and height in proportion

◆ Export Area Select the Export

Area check box to crop the

image using x and y, or w

(width) and h (height) values

Alternately, you can click on

the image in the Preview

window, and use the corner

and side anchor points to the

manually adjust the image

Select from the following Preview

options:

◆ Preview Select the Preview

check box to toggle the

preview of the image

◆ Saved Settings Click the Saved

Settings list arrow, and then

select from the preset

optimization options

◆ Select Click the Pointer button

to select and move a cropped

image in the Preview window

◆ Crop Click the Export Area

button to crop the active image

Use the Hand cursor to specify

the area you want

6

5

◆ Zoom Click the Zoom in/out

button, and then click the

image to zoom the preview of

the active image in (plus sign in

magnifying glass) or press Alt

(Win) or Option (Mac) and click

the image to zoom the preview

of the active image out (minus

sign in magnifying glass), or

click the Zoom list arrow, and

then select a preset zoom

value

◆ Preview Display Click a button

to change the view to display 1,

2 or 4 images

◆ Image display Click a button to

control the view of multiple

images used in animations

NOTE When you click the

Options tab and select a different

format, you see new options based

on the selected format In this

example, the options displayed

reflected the modification of a GIF

image

Click OK.

7

7 6

And if that were not all, you can change the brightness and contrast of the image, and increase its sharpness Once you have inserted an image into a Web page, you can adapt them to meet your needs

Perhaps you don’t quite like the colors it uses You can increase or decrease the brightness of the image, as well as the color contrast

The Brightness/Contrast adjustment changes an image by an overall lightening or darkening of the image pixels While good for special effects, its linear way of changing an image's brightness and contrast

do not lend themselves to photo restoration

Changing Image

Brightness and

Contrast

Change Image Brightness and

Contrast

Open the Web page with the

image you want to modify

Select the image you want to

modify

Click the Modify menu, point to

Image, and then click

Brightness/Contrast.

TIMESAVER Click the

Brightness and Contrast button in

the Properties panel

Select from the following options:

◆ Brightness Click and drag the

slider to change the overall

brightness of the selected

image (-100 - 100)

◆ Contrast Click and drag the

slider to change the overall

contrast of the selected image

(-100 - 100)

◆ Preview Select to toggle the

preview of the image in the

display window

Click OK.

5

4

3

2

1

Brightness and Contrast button

Select to preview the results

4

5

If you have an image that looks a little fuzzy in spots, you can use the Sharpen command to create more image definition Sharpening increases the contrast of pixels around the edges of objects in an image to increase the image’s definition or sharpness If you don’t like the sharpening effect applied to an image, you can use the Undo com-mand on the Edit menu before you save the image to revert the image back to the original

Changing Image

Sharpness

Change Image Sharpness

Open the Web page with the

image you want to modify

Select the image you want to

modify

Click the Modify menu, point to

Image, and then click Sharpen.

TIMESAVER Click the Sharpen

button in the Properties panel

NOTE An alert may appear

warning you that the changes you

are about to make are permanent

Click OK to continue

Select from the following options:

◆ Sharpen Click and drag the

slider to increase the

sharpness of the active image

(0-10)

◆ Preview Select to toggle the

preview of the image in the

display window

Click OK.

5

4

3

2

Sharpen button

5

Cropping is the process of framing a portion of a photo and eliminating any unnecessary visual elements If, for example, you have a photo that

is not centered properly, you can crop out the side to center it You can use the Crop button in the Properties panel to drag a resize handle on a graphic to crop out part of the image The graphic remains unchanged and you can uncrop it at any time

Cropping an Image

Crop an Image

Open the Web page with the

image you want to modify

Select the image you want to

modify

Click the Modify menu, point to

Image, and then click Crop.

TIMESAVER Click the Crop

button in the Properties panel

NOTE An alert may appear

warning you that the changes you

are about to make are permanent

Click OK to continue

Crop the image by clicking and

dragging any of the 4 corners, or 4

side control points

Click in the middle of the image

and drag to move the crop

window

Double-click the image or press

Enter (Win) or Return (Mac) to set

the crop, or press the Esc (Escape)

key to cancel

NOTE Although the cropping

function is permanent, you can

always click the Edit menu, and

then click Undo to return the

image back to its original state

6

5

4

3

2

Crop button