Dreamweaver Tutorial: Working with Dreamweaver's image editing tools
What you’ll learn in this Dreamweaver Tutorial:
This tutorial provides you with a foundation for working with Adobe Dreamweaver image editing. It is the first lesson in the Adobe Dreamweaver CS6 Digital Classroom book. For more Adobe Dreamweaver training options, visit AGI’s Dreamweaver Classes.
Dreamweaver Tutorial: Working with
Dreamweaver's image editing tools
Although it’s best to make adjustments to your images using a professional graphics-editing program like Adobe Photoshop, sometimes that’s not an option. Dreamweaver offers a number of editing options, including an Edit link that allows you to quickly open a selected image in the graphics editor of your choice.
The Edit button can be customized in the File Types/Editors section of the Preferences dialog box, found under the Dreamweaver drop-down menu. You can use this section to add or subtract programs from the list of available editors, and set programs as the primary choice for handling specific file extensions.
Adjusting brightness and contrast
Now you’ll use Dreamweaver’s Brightness and Contrast button to lighten up the eggplants image on your products page.
1 Click on the eggplants.jpg image in products.html to select it, then click on the Brightness and Contrast button in the Property Inspector.
Select the Brightness and Contrast button in the Property Inspector.
A warning dialog box appears, indicating that you are about to make permanent changes to the selected image. Press OK.
2 When the Brightness/Contrast dialog box appears, drag the Brightness slider to 20 or type 20 in the text field to the right of the slider.
3 Drag the Contrast slider to 10 or type 10 in the text field to the right of the slider.
4 Click the Preview checkbox in the lower-right corner to see the original photo. Click the Preview checkbox again to see the changes. Press OK.
While changing the brightness and contrast is very convenient in Dreamweaver, you should be sure you are not performing the corrections on the original, as these changes are destructive.
In most cases, if you need to have fine control over the appearance of your graphics, you should open an image editor designed for that purpose. Both Dreamweaver and Photoshop are made by Adobe, and you’ll see some of the integration between the two in this exercise. However, sometimes you will just want to make a quick-and-easy change to a graphic. In this scenario, you can use the Edit Image Settings option in the property inspector.
You’ll use this feature to change the optimization of the belgianchocolate.jpg image, but before you make any permanent changes, you’ll duplicate this image in the Files panel. It’s good practice to save copies of your image files before making permanent changes. Later, you’ll use this backup copy to undo your changes.
1 In the Files panel, click on the belgianchocolate.jpg file to select it. From the Files panel menu (), select Edit > Duplicate. A new file named belgianchocolate - Copy.jpg appears in the list of files inside the images folder.
2 Click on the belgianchocolate.jpg image in the document window to make sure it is selected, then click the Edit Image Settings button () in the Property Inspector at the bottom of your page. The Image Optimization window appears. This window allows you to either choose from a number of compression presets, or to create your own. Currently, the format is set to JPEG because Dreamweaver recognizes the type of file you have selected. Notice in the bottom-left corner that the file size is listed; in this case, 31k. Pay attention to this number as it plays a role in the rest of this exercise.
The Image Optimization window appears when you click on the Edit Image Settings button.
3 Click the preset menu and choose GIF for Background Images. The optimization settings appear. Click the Color menu and choose 4. The image of the chocolate changes to a preview of these settings, and the image has become flat with most of the detail removed. Notice that the file size has changed to 3K.
This tells you that you would achieve a tremendous reduction in file size, but it would occur at the expense of image quality. In fact, the GIF file format is not generally suited for photographic images. You will now try a custom setting.
4 Click the Format menu and choose JPEG from the list. You now have a slider for quality, the default value is 80 and you can see the file size has changed to 9K. Drag the slider to the left to a quality of 10 and notice that the image quality changes instantly. Again, this is too drastic a trade-off. Drag the quality slider to 90. The image looks slightly better than it did at a quality of 80, and you have a file size of around 14K (which is approximately 50% of the original image).
Click OK to commit the change. Note that this method of optimization is risky if you do not have a backup. (Recall the backup created in step 1.)
5 You can also choose to do your optimization in Photoshop. Click the cucumbers image, and then in the Property Inspector, click the Photoshop icon if available. Note that you must have Photoshop installed for this icon to be visible. As noted earlier, you can always change the photo editor that Dreamweaver uses by opening Edit > Preferences > File Types/Editors (PC) or Dreamweaver > Preferences > File Types/Editors (Mac), and then changing the application associated with images.
Click on the Photoshop icon to launch Photoshop.
6 The image will open in Photoshop, and then you can make any changes you want, as well as use the more in-depth controls of the Save for Web feature. We will not walk through that process now, so you can close this image and return to Dreamweaver.
Assuming you have a backup copy of an image, it is possible to swap one image for another. To swap out the image, you’ll simply change the Src attribute, using the Property Inspector. But first, it’s a good idea to rename the duplicate image.
1 Right-click (Windows) or Ctrl+click (Mac OS) on the file named belgianchocolate - Copy.jpg in the Files panel and choose File > Rename. Type belgianchocolate_original.jpg and press Enter (Windows) or Return (Mac OS).
2 Click on the chocolate image in the Design view to select it. In the Property Inspector at the bottom of your page, highlight the text that reads images/belgianchocolate.jpg in the Src text field.
3 Click and drag the Point to File icon to the belgianchocolate_original.jpg image you just renamed. The compressed image is replaced with the copy you made earlier.
4 Choose File > Save.