Image Editing Tools
Dreamweaver provides several basic image editing tools in the Property inspector to modify and enhance an image.
• Use an external image editor: Adobe Photoshop is the default image editor if it is installed on your computer, but you can specify which external editor should start for a specified file type. To select an external editor, click Edit on the Application bar and display the Preferences dialog box. Select File Types/Editors from the Category list to display the Preferences File Types/Editors dialog box. Select the image extension and then browse for the External Code Editor executable file.
• Crop an image: Cropping lets you edit an image by reducing the area of the image and allows you to eliminate unwanted portions of the image. When you crop an image and then save the page, the source image file is changed on the disk. Prior to saving, make a backup copy of the image file in case you need to revert to the original image.
• Resample an image: Resampling adds or subtracts pixels to or from a resized JPEG or GIF image file to match the appearance of the original image as closely as possible. Resampling an image also reduces an image’s file size, resulting in improved download performance. When you resize an image in Dreamweaver, you can resample it to accommodate its new dimensions. To resample a resized image, first resize the image and then click the Resample button in the Property inspector.
• Adjust brightness and contrast: The Brightness and Contrast tool modifies the contrast or brightness of the pixels in an image. Recall that a pixel is the smallest point in a graphical image. Brightness makes the pixels in the image lighter or darker overall, while Contrast either emphasizes or de-emphasizes the difference between lighter and darker regions. This affects the highlights, shadows, and midtones of an image.
• Sharpen an image: Sharpening adjusts the focus of an image by increasing the contrast of edges found within the image.
To Crop and Modify the Brightness/Contrast of an Image
The ducks image in the Montana National Parks and Preserves page needs some modification. Cropping the image and emphasizing a better view of the ducks in the image will enhance the page. The following steps show how to crop the image, and then modify the brightness and contrast.
1
• Click the preserves .htm document tab to open the preserves.htm page.
• Select the ducks image to prepare for cropping it.
• Collapse the panel groups so you have more room to work.
• Click the Crop tool in the Property inspector to apply the bounding box (Figure 2-50).
Figure 2-50
Q&A
What should I do Q if a Dreamweaver dialog box is displayed warning that cropping permanently alters the image?
Click the ‘Don’t show me this message again’ check box, and then click the OK button.
When is cropping an image effective? o3
Cropping can be very effective for improving the appearance of a photo by highlighting the main point of interest in an image.
2
• Click the crop handle in the lower-right corner of the ducks image and adjust the handles until the bounding box surrounds the area of the image similar to that shown in Figure 2-51. The W value should be approximately 360 and the H value approximately 305.
Figure 2-51
3
• Double-click inside the bounding box to apply the cropping by resizing the image to match the size of the bounding box.
• If necessary, click the ducks image to select it and to verify that the size after cropping is about 360 x 305 pixels (Figure 2-52).
Figure 2-52
Q&A
How can I make Q changes after I apply the cropping?
If you need to make changes, click the Undo button on the Standard toolbar and repeat Steps
4
• Click the Brightness and Contrast tool in the Property inspector to display the Brightness/ Contrast dialog box (Figure 2-53).
Figure 2-53
5 Experiment
• Drag the Brightness slider and the Contrast slider so you can see how changing the value of each affects the ducks image.
• Drag the Brightness slider to the left and adjust the setting to -10 to change the brightness level.
• Drag the Contrast slider to the right and adjust the setting to 20 to change the contrast level (Figure 2-54).
Figure 2-54
Q&A
What should I do Q if a Dreamweaver dialog box is displayed warning that adjusting the brightness and contrast permanently alters the image?
Click the ‘Don’t show me this message again’ check box, and then click the OK button.
What are the ranges Q for the Brightness and Contrast settings?
The values for the Brightness and
Contrast settings range from -100 to 100.
6
• Click the OK button to accept the Brightness and Contrast settings.
• Click the Save button on the Standard toolbar to save the changes to the preserves.htm page.
• Press the F12 key to view the preserves .htm page in your browser (Figure 2-55).
7
• Close the browser to return to the Dreamweaver window.
Figure 2-55
