Image editing features in Contribute 3
Macromedia Contribute 3 includes basic image editing functions from Macromedia Fireworks. This functionality, first available in Macromedia Dreamweaver MX 2004, allows editors to make simple changes to any image used on the page.
Within Contribute, editors can use the following five basic editing functions on an image:
- Resize
- Rotate
- Brightness/contrast
- Sharpen
- Crop
Note: Each of these editing functions changes the actual image file. If an image you are editing is used in other pages on the web site, that image on those other pages will now be rotated, resized, recolored or cropped, just as within the current page. Make sure you know the scope of the image.
Resize
An image has inherent characteristics, including a physical height and width measured in pixels. The height and width can be set in the HTML code, and these coded dimensions will supersede the inherent size of the image. It can be tempting for a web page designer to resize a large image in the web page by changing its dimensions in the HTML, but without changing the physical dimensions of the image (which is referred to as resampling). This can lead to a website using a 2MB image when a properly sized image (a resampled image) would only be 100K, for example. The outcome is that the image might look the same on the page as a resampled image, but it would take significantly longer for visitors to download.
Usage
The Resize feature in Contribute prevents designers from resizing without resampling. When a developer resizes an image using the Resize feature, the developer is changing the images height and width in the code, and also automatically resampling the image. Resampling changes the actual file height and width and file size.
Note: This work flow is different than in Dreamweaver MX 2004. In Dreamweaver, developers resize the image within the code first, then the command to resample the image is available.
Example
The image on the left has been resampled. The image on the right has not been resampled. Notice the image on the right is a bit more blurry than the image on the left. In this example, the image on the left is 88K, and the image on the right is 155K. The net result is that the resampled image looks better and is substantially smaller than the image resized only in the code, even though the height and width are the same.
Instructions for resizing an image
- Select the image on the page. The Editing toolbar will convert to the Image Editing toolbar.
- Click the Resize button.
- Drag the resize handles to set the image size.
By default, the aspect ratio does not change. In other words, the width and height both change, ensuring the image is not skewed. To change the image's aspect ratio, press the Shift key while dragging. This is opposite of the way resizing works in other applications. Once you have released the resize handles, you will have to click the Resize button again to make another resize change.
Alternately, if you want a specific size, enter the desired height or width value in the appropriate text field on the toolbar. Changing one size will change the other, thereby maintaining the aspect ratio.
Choosing Undo from the Edit menu will resize the image in the code back to the original size, but the image will still be resampled. The end result will likely be undesirable. Instead, choose Format > Edit Image > Revert to Original.
Rotate
Usage
An existing page will likely have images facing the correct direction, but the rotation tools are a very useful way to quickly add existing images to a website without having to rotate the images in a photo editor.
Example
The two images above indicate the rotate function. If you started with an image that looked like the one on the left, you would choose to rotate counterclockwise to correct the orientation.
Instructions for rotating an image
Two buttons on the toolbar will rotate the image: one button rotates the image in a clockwise direction, and the other rotates an image in a counter-clockwise direction. Clicking either of these buttons will rotate the image ninety degrees in the selected direction. The file is resampled every time it is rotated, and some image formats, such as jpegs, will slightly degrade with each resample (and with each rotation). Use the most efficient way to rotate the image, going in the direction that will take the least number of clicks.
Brightness and Contrast
Brightness describes an image's overall lightness and darkness. Increasing the brightness makes all of the colors lighter, while decreasing the brightness makes all of the colors darker.
Contrast indicates the number of levels between the lightest and darkest parts of the image. Increasing the contrast increases the number of levels between the lightest and darkest colors. Decreasing the contrast decreases the number of levels between the lightest and darkest colors.
Usage
Adjust the brightness or contrast level if the colors in an inserted image seem off, or if you want to achieve a certain effect. For example, you may wish to darken an image if the image is intended to blend into a dark background. To blend even further, you could also decrease the contrast.
Example
In this example, the image in the middle is the original image. Decreasing the brightness level of the middle image produces the image on the left, while increasing the brightness level produces the image on the right.
In this example, the image in the middle is the original image. Decreasing the contrast level of the middle image produces the image on the left, while increasing the contrast level produces the image on the right.
Instructions for changing brightness or contrast
Select an image, then click the Brightness/Contrast button. Both settings appear as scalable ramps. The original image setting will be the middle point of both ramps. Slide either control to the left or right to change the setting, or type in a positive or negative number to change the setting. As long as the Preview option is checked, any setting adjustments will be visible on the screen, but clicking Cancel will return the image to the original appearance. The image will only change permanently when you click OK.
Sharpen
Usage
Sharpening images can be subtle. Sharpening increases the contrast of the pixels along edges in photos. Edges are defined as high contrast between neighboring pixels. For instance, the line between the sky and a shadow on a sunny day will have high contrast at the edge. Sharpening increases that contrast.
Example
The image on the left above is the unaltered image, while the image on the right is the same image after being sharpened.
Instructions for sharpening an image
With Sharpening, there is only more sharpening, there is no de-sharpening. To sharpen, select the image and click the Sharpen button. Move the slider until the image looks correct. As long as the Preview option is checked, any setting adjustments will be visible on the screen, but clicking Cancel will return the image to the original appearance. The image will only change permanently when you click OK.
Cropping
Usage
Cropping an image means cutting off a part of the image. This is used to remove unneeded parts of the image and/or to help viewers focus on the main subject of the image.
Example
The image above is the unaltered image. As an example of using cropping to focus a viewer's attention, the image below is the result of cropping this image. The image is cropped to cut out the foreground. In addition to cropping, the contrast has been increased and the image has been sharpened.
Instructions for cropping an image
- Select the image and press the Crop button. The crop tool will make a blue mask on the image.
- Click and drag on the handles to size the crop mask to the correct size.
- Double click on the image to finish the crop. There is a Finish Crop option in the right click menu.
Accessing the features
Image editing features are available in the Menu bar. With the image selected, choose Format > Edit Image, then select the feature. If the options are disabled, make sure the image is selected on the page. The editing options are also available from the Edit Image submenu of the context menu, which is available when you right click (Windows) or control-click (Macintosh) the image. While there have been no changes to the Image Properties dialog box, there is now a field for Image Border in the Image toolbar. There is also a button to open the Image Properties dialog box.
This content requires Flash
To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.
Download the free Flash Player now!
