Design Learning Guide for Fireworks: Selecting and editing bitmap images

Fireworks CS4 is a versatile image editing tool, capable of editing and manipulating both vector and bitmap graphics. Being able to combine both raster and vector images in a single document and have complete control over both types is a huge advantage—and saves you production time because you can make most of your graphic changes directly in Fireworks.

This section focuses on the various ways you can edit and update bitmap graphics to fit your project. I cover the process involved in scaling bitmap graphics and give some recommendations when doing so. I also provide information on selecting bitmap objects and how to select just a portion of a bitmap.

In many projects, it is necessary to create elements with a transparent background, so you'll see tips on simulating the appearance of a"non-rectangular" image. I also discuss how to rearrange the stacking order of objects and crop bitmap images.

The last part of this section explains the difference between Live Filters and filters,and the advantages of using each. You'll learn how to apply filters to bitmap images, including Hue/Saturation and Gaussian Blur, as well as how to apply Live Filters to bitmap images.

So let's get started. Before you can edit or transform a bitmap graphic in Fireworks CS4, you first need to select the object, or select the portion of the bitmap that you wish to change. The easiest way to select an entire bitmap graphic is to simply click on it with the Selection tool.

Alternatively, you can use the Selection tool to click and drag over any portion of the bitmap graphic. When a bitmap object is selected, a blue bounding box displays around the image with four anchor points appearing at each of the four corners (see Figure 1).

Scaling a bitmap graphic

While the bitmap is selected, choose the Scale tool (or press "Q" to access it). Notice that the Scale tool is one of the four available options: Scale, Skew, Distort, and the 9-slice scaling tool (see Figure 2).

A black bounding box appears, with eight handles located at each corner and the midpoint between each corner (see Figure 3). After dragging one of the corner handles inward to the preferred size, press Return (Windows) or Enter (Mac) to commit the changes. If you have begun transforming the object and then decide you don't want to scale the image, press Escape to exit the Scale tool.

Note: Bitmaps should always retain their original aspect ratio—otherwise the image will look squished or stretched. Press and hold the Shift key while dragging one of the corner handles inward to reduce the bitmap's dimensions while constraining the proportions of the image. Always use bitmaps of the same or smaller dimensions; never scale a bitmap up to a larger size.

Simulating the appearance of a "non-rectangular" image

By default, all graphic assets are rectangular. They cannot be any other shape, and Fireworks will export files that are rectangular regardless of the selected file format. However, there are two ways in which you can simulate an image to be a circular or non-rectangular shape.

The first approach is to set the background color of the canvas to Transparent. You can do this as you create a new file. You can also specify the canvas color after the file is created by selecting Modify > Canvas > Canvas Color.

Although the image will remain rectangular, only the area with pixel data will be visible, allowing any background images or colors in the web page to show through (see Figure 4).

When exporting the finished file, select one of the two file formats that supports transparency: GIF or PNG. Choose File > Image Preview to access all of the export settings. Be sure to select the transparency option as you export the file (see Figure 5).

The second method involves setting the background color of the canvas to the exact same color of the web page's background. Choose Modify > Canvas > Canvas Color to set the background color. Click the Custom color chip and then either select the color from the swatches or enter the hexadecimal value of the background color. Click OK to close the dialog box (see Figure 6).

Tip: To ensure that you are using the precise corresponding color value that matches the background of the application or web page, type (or copy/paste) the hexadecimal value of the background color.

After setting the background color, export the file in the desired file format. When the image is embedded in the web page or interface, the background of the image will blend seamlessly with the other background color. The drawback to this approach is that you may need to edit the master PNG file and re-export the image in the event that the background color changes.

Selecting portions of a bitmap image

Use the selection tools, such as the Marquee tool, Lasso tool, or Magic Wand tool to select part of the bitmap image. When you apply filters to the bitmap, only the selected area of the image will be affected.

It is also helpful to select a portion of the bitmap and choose Edit > Copy and then Edit > Paste if you wish to create a separate object from the selected pixels. The Fireworks interface makes it very easy to create a photo collage, by simply pasting bitmaps (or parts of bitmaps) on top of other bitmaps. You can seamlessly move back and forth between selecting different bitmap images and move them with the Selection tool. See Select pixels in the Using Fireworks CS4 online documentation for more information.

Rearranging the stacking order of objects

If you want to change the stacking order of two (or more) objects, right-click (Command-click on Mac OS) and select Arrange > Bring to Front or Send to Back. You can also choose Arrange > Bring Forward or Send Backward to move the object above or below other objects in the display order.

Alternatively, you can click on the object in the Layers panel and drag the sublayer above or below the other sublayers in the document to rearrange the stacking order and make one object appear above or beneath another.

Both layers and sublayers can be reordered in this manner. You can also create layers that contain nested sublayers, and convert a sublayer to a regular layer.

It is a best practice to always name your layers and sublayers with descriptive labels.

Understanding the difference between Live Filters and filters

Live Filters and filters can be applied to a selected object in an open document. Both result in visually changing the selected pixels. When you compare the options available in the Filters drop-down menu to the options available in the Property inspector accessed with the Add Live Filters button, the two seem very similar. But in reality, there are many important differences between using the two methods to adjust pixel values and perform color correction operations.

First, let's take a look at the filters available in the Filters drop-down menu (see Figure 7).

In addition to applying filters to an entire object, these filters can also be applied to a region of selected pixels in an object. If you wish to adjust one specific area, use the selection tools to select the area to be affected, then choose the desired option from the Filters drop-down menu. You can also apply filters to vector shapes and text.

The downside to using filters is that they are destructive. When you apply a filter, the operation permanently alters the image and cannot be removed or edited later, except by choosing Edit > Undo. During the process of applying a filter, Fireworks converts the object (or the selection of pixels) to a bitmap image—permanently committing the change so that the original bitmap, vector and text properties are no longer editable.

Now let's examine the list of Live Filters available in the Property inspector. The list of Live Filters can be accessed while an object is selected (see Figure 8).

Click the Add Live Filters plus (+) sign to access the menu options (see Figure 9).

Live Filters are designed to operate on whole objects—vector objects, text, and whole bitmap images. Live Filters cannot be applied to pixel selections within a bitmap image the way you can apply regular filters to selections of an object.

Almost all Live Filters include the option to preview the results before committing the changes, which is another difference between Live Filters and applying filters.

Live Filters are editable and non-destructive to the original object. Use Live Filters when you want to try applying several different settings and then modify the results. You can apply multiple Live Filters at a time, and they will appear in the order they were applied in the Property inspector.

If you wish to temporarily disable a Live Filter, click on the checkmark to the left of the Live Effect to display an "X" icon. If you wish to remove a Live Effect, select the Live Effect from the list and click the minus (–) sign to delete it (see Figure 10).

You can also reorder the Live Filters by clicking and dragging the items listed to rearrange their stacking order.

Although Live Filters can only be applied to entire objects, you can use a work around with a bit of copying/pasting to replicate applying Live Filters to a specific section of a bitmap graphic.

First, use one of the selection tools to select the area of the bitmap that you wish to affect with a Live Effect. Then choose Edit > Copy to copy the selection to the clipboard. Choose Edit > Paste to place a copy of the selected pixels on its own layer or sublayer. Now that the selected area of pixels is its own object, you can apply Live Filters to the new object and retain editability.

Note: Avoid applying a large quantity of Live Filters in a single document, because doing so can decrease overall performance.

To learn more about the differences between filters and Live Filters, watch the video Discover the difference between traditional and Live Filters in Fireworks by Abigail Rudner.

Applying filters to bitmap images

While a bitmap (or a portion of the bitmap image) is selected, you can significantly change the way the pixels display by applying filters in Fireworks CS4. You can make adjustments to the brightness and contrast, hue and saturation, and perform color correction by setting the levels and curves. You can also use creative effects, such as adding blur, noise and sharpening to an object.

Additionally, you can group a set of objects by selecting them (press and hold the Shift key to select multiple objects with the Selection tool) and then choose Modify > Group. When you apply a filter to a group, the filter is applied to all objects in the group. If the objects are ungrouped, each object's filter settings revert to those applied to the object individually.

To apply a filter to an individual object within a group, select only that object with the Subselection tool.

Hue/Saturation

Choose Filter > Adjust Color > Hue/Saturation to access the Hue/Saturation dialog box. Move the sliders to set the Hue, Saturation and Lightness of the selected pixels. Check the preview check box to see the affect of the settings before committing to the changes. Once you are satisfied with the adjustments, click OK (see Figure 11).

If you wish to dramatically change the base hue of the object's pixels, check the Colorize check box. When this option is checked, you can move the Hue slider to select through the spectrum of colors to achieve a colorized effect.

Other color adjustments, such as Brightness / Contrast, Levels and Curves can all be set (permanently) by selecting Filters > Adjust Color and then selecting the desired filter from the list.

Read the section in Fireworks CS4 help about Adjust bitmap color and tone for more details.

Since filters can be applied to portions of a selected object, you can create some interesting depth-of-field focus effects by blurring the background of a bitmap image. After using the selection tools to define the area to be affected, choose Filters > Blur > Gaussian Blur. The Gaussian Blur dialog box appears (see Figure 12).

Use the slider or type in a numeric value to specify the level of Gaussian Blur to apply to the selected object. Check the Preview check box to see a live rendering of the changes on the canvas. Once you are satisfied with your changes, click OK (see Figure 13).

Sometimes a project requires you to use a slightly blurry photograph. To correct for the blurriness, you can apply sharpening to make the image look clearer. Choose Filters > Sharpen > Sharpen to access the Sharpen dialog box and adjust the settings. The process for applying a sharpen effect is very similar to applying a blur effect.

See Blurring and sharpening bitmaps in the Using Fireworks CS4 online documentation for more information.

Applying Live Filters to bitmap images

While a bitmap image, vector shape or text object is selected, click the plus (+) sign next to Filters in the Property inspector, and then choose the desired effect.

For example, if you click the plus (+) sign and then choose Adjust Color > Hue/Saturation, you'll be presented with the Live Filters Hue/Saturation dialog box, which looks identical to the filters Hue/Saturation dialog box. But remember, the primary difference is that any changes you make with Live Filters are editable and can be removed later if you change your mind (see Figure 14).

Keep in mind that you can stack multiple instances of any Live Filter. Applying multiple Live Filters can result in some very unique color transformations. For even more variations, try combining the layered Live Filters with blend modes.

See the Adobe Fireworks CS4 help section on Adjusting hue and saturation for more information.

To learn more about how you can edit bitmap images, see Applying Live Filters in Fireworks CS4 help.

Cropping the dimensions of an image

Select the Crop tool (or press "C" to access it). Click and drag over the area that you wish to remain once the crop is executed. If you need to adjust the area that is being cropped, drag any of the eight handles attached to the bounding box to redefine the region that will remain. You can also use the Arrow keys to reposition the crop region on the canvas, or hold Shift while pressing any of the Arrow keys to change the crop region's height and width.

When you are satisfied with the placement of the crop region, press Return (Windows) or Enter (Mac) to crop the image (see Figure 15).

If you wish to change the crop, select Edit > Undo (Ctrl+Z on Windows or Command+Z on Mac OS) to reverse the crop operation. Then, reselect the area to be cropped and repeat the crop procedure.

Note: When you crop an object, you are essentially redefining the canvas area, and all objects outside the crop area will be deleted. You can crop each page in the Pages panel of the document independently, without affecting the canvas of the master page. This strategy allows you to keep all of your assets in the same PNG file.

Where to go from here

To learn more about working with color palettes when editing bitmaps, watch the Using the Kuler panel with Fireworks CS4 demo by Jim Babbage and read Using the Image Editing panel in Fireworks by Ruth Kastenmayer.

To get more details about working with Fireworks and Dreamweaver, read the section Roundtripping between Fireworks and Dreamweaver in Working with images in Dreamweaver CS4 by Sheri German. Also be sure to check out Use Fireworks to modify Dreamweaver image placeholders in the Using Dreamweaver CS4 online documentation.

Finally, explore other areas of the Design Learning Guide for Fireworks CS4.