ptg 148 Chapter 6 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 in the original image. 4 3 2 1 3 2 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 149 ◆ 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 From the Library of Wow! eBook ptg 150 Chapter 6 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 5 6 From the Library of Wow! eBook ptg Chapter 6 Working with Web Page Images 151 ◆ 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 From the Library of Wow! eBook ptg 152 Chapter 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 1 2 3 Brightness and Contrast button Select to preview the results 4 5 From the Library of Wow! eBook ptg 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. Chapter 6 Working with Web Page Images 153 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 1 1 3 2 Sharpen button 5 4 Select to preview the results From the Library of Wow! eBook ptg 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. 154 Chapter 6 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 1 1 3 2 5 Crop button From the Library of Wow! eBook . 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. 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. 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 From the