2 March 2009
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.
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.
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.
Here are the broad steps you will follow:
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:
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:
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:
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):
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:
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.
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:
Here's how you can use the Scale tool on the 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:
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:
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:
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:
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:
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:
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:
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:
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.
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).
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:
Older articles that may help you include the following: