Using the Image Editing panel in Fireworks

Why use the Image Editing panel in Fireworks? In short, because it is a real timesaver! Anything that saves time and reduces the frustration of searching through numerous menus is a welcome addition for any user.

With the spread of outsourced, data-driven websites with editable regions, almost everyone in an organization (and especially those in academia, as I am) must be able to edit content and upload images that are optimized for the web. If you have been assigned an editable region of a page on a website or intranet site that you are responsible for updating from time to time, you are really going to appreciate the timesaving features of the Image Editing panel.

Managing all your digital images

If you have a digital camera, you probably have a lot of digital images. You can simply download them from your camera into a folder (perhaps named Camera) on your computer desktop, open them in Fireworks, and go from there. In addition, scanning prints is still a very good way to gather digital images. If you have stacks of prints like most of us do, you could scan them to another desktop folder named something like Scanned Images.

If you have the camera or scanner software installed on your computer, you can import files directly into Fireworks by selecting File > Scan > Twain Select and selecting either the camera or scanner. (On a Mac, select either File > Acquire > Twain Select or File > Acquire > Camera Select.) Though resolution on a screen can be only 72 (or in some cases 96) DPI, it is a good idea to save all of your images at a higher resolution in order to be able to edit and enhance them later for the web and still retain a copy for quality printing later.

I prefer to save a copy of all of my original images as 300 DPI TIFF files in a folder on my computer desktop. After completing a project, I move all of the files to a CD or other external storage medium for long-term storage. Then it is a matter of deciding whether you want to use all or just part of an image, what you want to emphasize in an image, and how big you want the final image to be. Scanning and scaling (changing the size) often cause a blurring effect that must be sharpened for the image to look more in focus. Here is where the Image Editing panel in Fireworks comes to the rescue.

Enhancing a digital image with the Image Editing panel

The Image Editing panel (see Figure 1) has everything you need to produce quality images for the web.

This panel groups most of the commonly used image editing tools in one easy-to-find location. In this article, I will take you through the Image Editing panel's features and tools, and provide examples of how you can use them best.

I am going to step you through the process of preparing images to be posted in the course announcements window of Ucompass Educator (see Figure 2). Educator is an example of a powerful, Flash-enhanced course management system (CMS) which makes it possible for all faculty members to prepare and upload course materials—including images, diagrams, math problem solutions, and so on—in order to add online content to all of their on-campus and distance-learning courses. In addition, the college's intranet (the ColdFusion powered Judson Academic Intranet by CommToolz) requires nearly everyone in the organization to upload images in order to customize portions of the site. All faculty and staff are able to jump quickly into Fireworks, find and use the right tools, upload the optimized images, and be on their way.

As the instructor of a graphic design course, I might want to give my students some real-world examples of problems. To do that I might want to show my students before and after pictures and then give them a case study in which a problem is presented and a solution is found (see Figure 3).

At first glance, this seems almost impossible. You know that simply enlarging a digital photo will result in degradation of image quality. But, guess again! If you scanned the image at a 300 DPI resolution, you will be able to crop out the desired portion of the image and improve it greatly with the tools included in the Image Editing panel.

Quick and easy solution to Case Problem #1

Here are the broad steps you will follow:

1. Use the Crop tool to crop the portion of the image you want to keep.
2. Select the Scale tool and drag the corner of the image inward to the size that is required.
3. Click outside the image and select Fit Canvas in the properties panel.
4. Click Filters > Unsharp Mask.
5. Click Adjust Colors > Auto Levels.
6. If desired, use the Blur tool to blur the parts of the image you want to de-emphasize and use the Sharpen tool to emphasize other areas.
7. Save the image as a JPEG at the optimized setting you have chosen (see Figure 4).

This method will give you acceptable results in most instances, and the resulting image may be just the one you want.

However, for those of you who prefer to control all of the filters and tools individually, Fireworks offers a full range of options, which I will discuss as you work through the steps in this solution:

1. Unzip the contents of the image_editing_samples.zip file to a folder on your computer desktop.
2. Open Fireworks and open butterfly_1.tif from the samples (see Figure 5).

3. If you are a trial-and-error learner as I am, you will want to show the main toolbar with its handy Undo and Redo Buttons by selecting Window > Toolbars > Main. (This works in Windows only.)

In the following sections of this article, I will take you through the broad steps I outlined above.

When isolating an object on the canvas in Fireworks, I find it helpful to use some of the visual guides that Fireworks offers. The Image Editing panel packages these visual aids in one place for easy access. If it is not already open, open the Image Editing panel by selecting Window > Image Editing. Then click View Options in the panel (see Figure 6).

Here is a brief description of each of the viewing options:

• Show/Hide Rulers provides rulers, which can be set to measure in inches or centimeters and from which guides can be dragged
• Show/Hide Grid shows grid lines at repeated intervals
• Snap/Don't Snap to Grid causes objects to align with the grid lines
• Show/Hide Guides turns the guides on or off
• Snap/Don't Snap to Guides causes objects to align with the guides
• Lock/Unlock Guides locks or unlocks the guides

Guides are used most often to align objects on the canvas and help give you visual queues of where objects are on the canvas in relation to one another. However, if you are new to image editing, they can also help you mark out an area of an image that you want to crop. In the next steps, you are going to use the guides to mark the part of the image you want to keep:

1. In View Options, click Show/Hide Rulers to make the rulers appear.
2. Drag from the left ruler to create a vertical guide on the right side of the butterfly and repeat to create a vertical guide on the left side of the butterfly (see Figure 7). When you create a guide, the Show Guides command is automatically turned on.

3. Drag from the top ruler to create a guide below the butterfly and repeat to create a guide above the part of the butterfly image that you are intending to crop.
4. Mouse over the guides and your cursor will change indicating that you can reposition the guides.
5. Reposition the guides until you are happy with the selection.

When you print or export your images, the guides will not show up in your image. In the next section, I will show you how to crop the image.

Now that you have your guides in place and have identified exactly what you want to crop, you can get onto the business at hand. Notice the tools at the top of the Image Editing panel (see Figure 8).

Here is a description of what each one does (from left to right):

• Red-eye corrects the red eyes that are commonplace in snapshots using a flash
• Crop allows you to trim edges off images
• Scale changes the image's size (can also be used to rotate the selected object)
• Blur works like the Blur filter, except you can drag this tool over an image to blur just part of an image (I explain filters later in this article)
• Sharpen works like the Sharpen filter, except you can drag this tool over an image to sharpen just part of an image
• Dodge lightens the area underneath as you drag it across an image
• Burn darkens the area underneath it as you drag it across an image

To use these tools, simply select and and drag them over the part of the image you want to modify. In this case, you will use the Crop tool:

1. Select the Crop tool in the Image Editing panel.
2. Click and drag it across the butterfly in the image (see Figure 9).

Reposition the crop area with the crop handles so that the crop outline matches the guides you created in the previous section. When you reposition the crop area, you will notice that the crop area border snaps to the guides.

3. Press Enter (Return) to execute the crop. Note that the image is now shown at 100% (see Figure 10). You can make your image appear at 100% by clicking the percentage in the lower right corner of the canvas and selecting 100% from the menu. You can also do this by selecting View > Magnification.

Once you get familiar with using the Crop tool, you may find that you can skip using the guides before cropping images. In the next section, I will show you how to scale the image.

It's often the case that the image you crop is not the correct size, or that you need to alter it in some way. The features in the Transform Tools section of the Image Editing panel will help you accomplish this. In the next steps, you will scale the butterfly image that you have cropped.

In the Image Editing panel, click the Transform Tools section (see Figure 11).

Notice all the tools in the menu that appears:

• Scale enlarges or reduces an object; using the corner handles maintains the proportions of the object you are scaling
• Skew distorts an object by moving control handles in opposite directions
• Distort allows you to modify the proportions of an object by allowing each corner handle to be moved independently
• Free Rotate allows you to drag either clockwise or counterclockwise to rotate an image

Here's how you can use the Scale tool on the image:

1. Select the Scale tool.
2. Position your pointer over the lower right corner of the image until your cursor turns into a diagonal arrow.
3. Holding your Shift key, click and drag the corner up and to the left (see Figure 12). Holding the Shift key maintains the image's proportions. You do not want your image to be scaled more horizontally than vertically, or else it will become distorted. As you scale the image, you can see the resulting image size by looking at the indicator in the ruler.

Fitting the canvas around the cropped image

Once you have scaled the image, you will see that there is some extra space on the canvas that you don't need. Use the following steps to remove it:

1. Click outside the image on the canvas (see Figure 13).

2. Select Fit Canvas in the properties panel. The extra area in the canvas will be eliminated so that only the image and no white space appears (see Figure 14).

In the next section I will show you how to use the Transform commands in the Image Editing panel.

The Transform Commands section of the the Image Editing panel gives you a variety of tools for rotating and flipping images (see Figure 15).

In the Image Editing panel, click the Transform Commands section. Notice all the tools in the menu:

• Numeric Transform makes it possible for you to scale, resize, or rotate an image using precise values
• Rotate 180° turns an image upside down
• Rotate 90° CW rotates the image 90 degrees clockwise
• Rotate 90° CCW rotates the image 90 degrees counterclockwise
• Flip Horizontal flips the image along its horizontal axis
• Flip Vertical flips the image along its vertical axis
• Remove Transformations gives you a chance to start over again

Perhaps you really like your image, but it is facing the wrong direction compared to other elements on the web page that you will eventually place it on. Follow these steps to flip the image horizontally:

1. Select the image on the canvas.
2. Select Flip Horizontal from the Transform Commands section of the Image Editing panel. The butterfly flips to face the opposite direction (see Figure 16).

In the next section, I will review how you can adjust the color of your image.

Very often your initial image is too dark or light and needs some adjustment due to the exposure of the image and the lighting conditions when the picture was taken. The Adjust Colors section of the the Image Editing panel offers a complete range of tools from the simplest, automatic fixes to the most advanced tools (see Figure 17).

Here is a brief description of each of the options in the Adjust Colors section of the Image Editing panel:

• Auto Levels applies a preset adjustment that balances tonal range within the image
• Brightness/Contrast allows you to increase or decrease both the lightness and the contrast between light and dark areas of the image
• Curves is a rather advanced tool that lets you make changes on a tonal graph
• Hue/Saturation lets you tint images or shift color values within the image
• Invert reverses images (useful if you are starting from a negative)
• Levels is another advanced tool that permits you to move the black, white, and midpoint values
• Convert to Grayscale does just what it says
• Convert to Sepia Tone also does just what it says

The simplest method of adjusting the tonal range of an image is to apply Auto Levels. To do this, select the image on the canvas and select Adjust Colors > Auto Levels in the Adjust Colors section of the Image Editing panel to see an immediate improvement in the image (see Figure 18). In most cases, this is just the fix you want for your image.

If you decide you want more control over the color adjustments, you can select Brightness/Contrast, which opens a dialog box that lets you adjust these values separately by dragging slider bars (see Figure 19).

In the next section, I will show you how to apply filters to your images.

Filters are effects that you can apply to an image. Once you apply them using the Image Editing panel, you can remove them only by using the Undo command. Therefore, you should be sure that you are happy with the filter effect before saving the file because you will not be able to open the file at a later time and remove the filter.

The same filters are available also in the Live Filters area of the Property inspector. If you are thinking about possibly removing a filter later after closing the image, you should apply it through the Property inspector. However, having the filters available in one place with your other image editing tools in the Image Editing panel is quite convenient (see Figure 20). In most cases, you will know whether you want to keep the filter immediately after you apply it.

Here is a brief description of what each filter does:

• Blur, Blur More, Sharpen, Sharpen More, and Unsharpen Mask may be used in a similar manner; simply click the name in the drop-down list of filters to apply them
• Add Noise adds a grainy texture to an image
• Convert to Alpha converts an image into a grayscale version that allows for the creation of see-through effects
• Find Edges creates a line where there was an edge between colors

The Unsharp Mask is one of the quickest ways to make scanned images look better. It is similar to the Sharpen command in that it sharpens the image, Unlike the Sharpen filter, the Unsharp Mask gives you control over how much the image is sharpened. Fireworks sharpens an image is by analyzing dark and light pixels that make up the edge of objects in an image.

Follow these steps to apply the Unsharp Mask filter:

1. Select the butterfly on the canvas.
2. Select Unsharp Mask in the Filters drop-down menu. The Unsharp Mask dialog box appears.
3. Adjust the Sharpen amount, Pixel radius, and Threshold sliders (see Figure 21). The Sharpen amount slider controls how much contrast to apply between light and dark pixels that border the edges of objects in an image. The Pixel radius slider controls how many pixels are taken into account when deciding whether to adjust the contrast. The Threshold slider controls how different the shades of light and dark pixels around the edge of an object must be for the sharpening to affect the object's edge.

4. Toggle the Preview option on and off to see if the settings make the image look better.
5. Once you have the settings you desire, click OK.
6. If you are not happy with the effect produced, click the Undo button to remove it.

The slider settings in the Unsharp Mask filter can take some getting used to. If you are not getting the effect you want, try the Sharpen filter.

Note: There are several other filters in the Live Filters section of the Property inspector, but the most common ones used in image editing have been included in the Image Editing panel.

In the next section, I will review the Blurring, Burning, and Dodging tools in the Image Editing panel.

The Blur, Dodge, and Burn tools (see Figure 22) work like the previously discussed filters, except that instead of applying the filter to the entire image, you can apply the effect just to the area where you drag the tool. I gave a brief description of these tools in the "Cropping the image" section of this article. Refer to that section for a refresher of what these tools do.

Please use these tools subtly in your own work. These tools take some getting used to; it's easy to overdo things.

The butterfly pic probably doesn't really need any of these tools applied but I will take you through using them on that image so that you have an idea of what they do:

1. Magnify your image by selecting View > Magnification > 300% to give you some more room to work in detail.
2. Select the Blur tool and drag it over areas of the image you would like to blur. In this case, drag it over the light edge of the black window frame behind the butterfly. This will remove the detail from it that diverts attention from the butterfly.
3. Select the Dodge tool and drag it over the section of the image that you would like to make lighter. In this case, drag it over the orange part of the butterfly wing to lighten it. The more you drag over it, the more it will lighten. Try to be subtle. Select Edit > Undo if you lighten it too much.
4. Select the Burn tool and drag it over the section of the image that you would like to make darker. In this case, drag it over the yellow flower under the butterfly.
5. Bring your image back to 100% magnification by selecting View > Magnification > 100%.

In the next section I will take you through exporting the image so it is optimized for the web.

Now that you have cropped and improved the image, you need to choose a file format and save your image so it's optimized for the web. While exporting is not something you do in the Image Editing panel, I will cover it here because it is an essential step for creating web-optimized images.

Large file sizes can take a very long time for users to download. Some distance-learning students have very slow dial-up connections, so it is very important for instructors to use the smallest file size possible that still yields an acceptable quality. Fireworks offers a variety of formats in which to save a file. While GIF images are very useful for logo or line art, photographs—which usually are composed of many colors—are best saved as JPEG.

You have several options to save an image in JPEG format. You can select File > Export, File > Save, or File > Save As to save the file to a folder on your desktop:

1. Click File > Save As.
2. Navigate to the folder that you will use for your final images. I usually name mine "final."
3. Enter the name of your file and choose JPEG in the Save As Type box.
4. Click the Options button to open the Image Preview dialog box. You can also access this dialog box by choosing File > Image Preview instead of File > Save As.
5. Select the quality you want in the Image Preview dialog box (see Figure 23). The higher the quality, the larger the file size. For each quality setting you choose, you can see the resulting file size and a preview of the image. You just need to decide which setting gives you both acceptable quality and acceptable file size. Notice that even during this very last step, you have the option to crop or edit the image.

In fact, at any stage of the process you can go back and change the settings that you applied previously. I encourage you to experiment with the different options in the Image Preview dialog box. It is actually quite powerful.

6. When you have made your choice, click Save. You are done (see Figure 24).

Now you are ready to upload your image to the web. Our professor with Case Problem #1 might want to ask his students to identify the butterfly (Gulf Fritillary or Agraulis vanillae—very common in the southern region of the United States) or the plant that has attracted it (Lantana—also very common).

Where to go from here

One of the best ways to learn how to use the Image Editing panel in Fireworks is to start at the beginning with images that you would like to use on the web and then just experiment with its various tools.

Learn more about preparing images for the web by reading the following:

• Fireworks CS4 How-Tos excerpts: Importing, exporting, symbols, prototyping, scaling
• Top 10 features of Fireworks CS4 from an application designer's perspective
• Creating an icon in Fireworks

Older articles that may help you include the following:

• Using vector masks
• Handling photographs in Fireworks
• Using the Auto Shape Properties panel