Editing Images


When you're working with images on your site, you'll often want to tweak them to improve their looks. You could use an external image editing program, such as Adobe Photoshop or Macromedia Fireworks to do the job, but it's more convenient to work right in Dreamweaver for simple changes. For extensive modifications, you'll still need an external image editor, however.

The Property Inspector gives you six buttons that allow you to edit an image ( Figure 8.17 ). Two of the buttons, Edit and Optimize in Fireworks, hand the image off to Fireworks (if you own it) for editing and optimization for the Web. Using these buttons is covered in Chapter 14, "Working with Other Applications."

Figure 8.17. The Property Inspector gives you access to a variety of image editing tools.


The other four buttons let you make quick image adjustments right in Dreamweaver. They are: Crop, which lets you trim away portions of an image; Resample, which adds or subtracts pixels from an image that has been resized (this reduces the image size for better download performance); Brightness and Contrast, which allows you to correct images that are too dark or too light; and Sharpen, which changes the contrast of the edges inside an image, making it appear to be more in focus.

Tips

  • You can only edit JPEG and GIF image files with Dreamweaver's built-in tools.

  • If you select an image and the image editing tools are grayed out, it's probably because you enabled Check In/Check Out for your site, and you need to check out the file for editing. For more about Check In/Check Out, see Chapter 16.

  • To halt the editing process after you begin it and leave the image unchanged, press the Esc key.


To crop an image:

1.
Select the image that you want to crop.

2.
In the Property Inspector, click the Crop button.

or

Choose Modify > Image > Crop.

3.
Dreamweaver puts up an alert dialog letting you know that the changes you will be making to the image are permanent, but that you can still use Undo to back away from the changes. Click OK.

A crop selection box with eight resize handles appears within the image. Parts of the image outside of the crop selection box are dimmed ( Figure 8.18 ).

Figure 8.18. The part of the image outside the selection rectangle will be cropped out.


4.
Click and drag the crop selection box to move it around the image, and resize the box by dragging any of its selection handles, until you have the portion of the image you want to keep inside the box.

5.
To complete the crop, press Enter (Return).

or

Double-click inside the crop selection box.

Dreamweaver trims the image.

To resize and resample an image:

1.
Select the image that you want to change.

2.
Using the image's resize handles, make the image larger or smaller.

or

Use the W or H text boxes in the Property Inspector to resize the image numerically . The image resizes, and the Resample button in the Property Inspector becomes available for use.

3.
In the Property Inspector, click the Resample button.

or

Choose Modify > Image > Resample.

Dreamweaver resamples the image. On many images, the effect is quite subtle.

To adjust the brightness and contrast of an image:

1.
Select the image that you want to adjust.

2.
In the Property Inspector, click the Brightness and Contrast button.

or

Choose Modify > Image > Brightness/Contrast.

The Brightness/Contrast dialog appears ( Figure 8.19 ).

Figure 8.19. Drag the sliders in the Brightness/Contrast dialog to change the intensity of the image.


3.
If it isn't already checked, select the Preview check box.

This makes adjusting the image a little slower, but it allows you to see the effects of your changes on the image as you make them.

4.
Move the Brightness and the Contrast sliders until the picture looks the way you want it.

or

Enter a numeric value in the text boxes next to Brightness and Contrast. The sliders begin in the middle of the range, and the acceptable range for each slider is from -100 to 100.

5.
Click OK.

To sharpen an image:

1.
Select the image that you want to sharpen.

2.
In the Property Inspector, click the Sharpen button.

or

Choose Modify > Image > Sharpen.

The Sharpen dialog appears ( Figure 8.20 ).

Figure 8.20. Sharpening an image often brings out important detail that isn't as noticeable in the unsharpened image.


3.
If it isn't already checked, select the Preview check box.

This makes sharpening the image a bit slower, but it allows you to see the effects of your changes on the image as you make them.

4.
Move the Sharpness slider until the picture looks the way you want it.

or

Enter a numeric value in the text box next to Sharpness. The slider begins at zero and goes to 10.

5.
Click OK.

Tip

  • Use a light hand when using the Sharpen tool. Over-sharpening an image often makes it look unnatural , with edges in the picture that look too prominent, or even oddly outlined ( Figure 8.21 ).

    Figure 8.21. Over-sharpening an image (bottom) can make items in the image look weird.





Macromedia Dreamweaver 8 for Windows & Macintosh Visual QuickStart Guide
Macromedia Dreamweaver 8 for Windows & Macintosh
ISBN: 0321350278
EAN: 2147483647
Year: 2005
Pages: 239

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net