Adobe Creative Cloud Design Tools All-in-One For Dummies (2013)

Book VIII

Fireworks CC

Chapter 5: Getting Images In and Out of Fireworks

In This Chapter

Importing images

Editing images

Optimizing and exporting images

In most cases, you’ll use Fireworks to optimize images for a website, onscreen presentation, or mobile app. In this chapter, you find out how to work with images from various sources, discover the importance of optimizing, and learn how to export your images.

Getting Images into Fireworks

Besides making your own graphics and illustrations, you can use four main methods to import images into Fireworks:

Open: Fireworks isn’t picky. As long as you open images (vector or raster) by choosing File⇒Open, you can open pretty much anything in Fireworks.

When you open a native Adobe Illustrator or Photoshop file, expect to see a dialog box, like what you see in Figure 5-1. This particular dialog box appears when you open a vector image from Adobe Illustrator. As you can see, you have to make some decisions as to what size the file should be, which artboards should be imported, and how you want to handle layers and groups.

Figure 5-1: Importing a native Illustrator file into Fireworks.

When importing a Photoshop file, your choices are relatively similar, as shown in Figure 5-2. The integration between Fireworks and Photoshop is excellent; you can keep layers intact and continue your editing process in Fireworks.

Figure 5-2: Importing a native Photoshop file into Fireworks.

Import: By choosing File⇒Import, you can place an image directly in an existing image. The imported image is placed as a sublayer in the selected layer, as shown in Figure 5-3. Note that to complete your import, you need to click on the image area.

Figure 5-3: Choose the Import menu item to add an additional image as a layer in Fireworks.

Drag and drop: You can drag and drop an image from other applications, such as Adobe Illustrator and Adobe Photoshop, right into the Fireworks workspace.

To drag and drop between Adobe applications on the Windows platform, you must drag your selection down to the application’s tab on the taskbar and wait for the application to come forward. Then you can drag into the work area.

Browse: Just as you can in the rest of the Creative Cloud applications, you can take advantage of Adobe Bridge to preview, search, and organize images before opening them in Fireworks. Because images typically open in Photoshop by default, you should right-click the image (in Bridge) and choose Open with Adobe Fireworks CC from the contextual menu.

To open a file in Bridge, you must click the Browse in Bridge button on the Application bar in Fireworks, as shown in Figure 5-4.

Figure 5-4: Click this button to open Adobe Bridge.

Editing Images

After you have an image open in Fireworks, you can start editing it. The editing features in Fireworks are similar to those in Photoshop but aren’t as extensive. You can do many basic tasks in Fireworks — crop, paint, and even curve adjustments — but we suggest that you perform most of your in-depth retouching in Photoshop.

The following sections explain five basic image-editing tasks that you typically perform when creating web graphics. We also discuss the Image Editing panel, which lets you choose among multiple editing tools.

Scaling

Making images the right size is important. If an image is too large, you waste valuable download time; if it’s too small, the image looks pixelated and blurry. The following sections cover three scaling methods.

Proportional scaling

To scale an image in Fireworks proportionally (keeping the same width and height ratio), follow these steps:

1. Select the layers you want to scale.

If you have multiple layers, you can hold down the Ctrl (Windows) or (Mac) key and click the layers in the Layers panel to add them to the selection.

2. Select the Scale tool in the Select section of the Tools panel.

Anchor points surround your selection.

3. To make an image smaller, click and drag a corner anchor point toward the center; to make an image larger, click a corner anchor point and drag outward.

Typically, you don’t scale a bitmap image to a dramatically larger size, because it may become pixelized. A fundamental rule to follow is to not make raster images more than 20 percent larger. This rule, of course, doesn’t apply to vector objects, as they’re scalable.

Nonproportional scaling

If you don’t want to scale proportionally, follow these steps:

1. Select the layers you want to scale.

2. Select the Pointer tool in the Select section of the Tools panel.

3. To resize an image, click and drag a corner anchor point without using the Shift key.

Numeric scaling

If you need to constrain scaling to an exact amount, you’re better off using the Image Editing panel. Follow these steps to perform numeric scaling:

1. Select the layers you want to scale.

2. Choose Window⇒Others⇒Image Editing.

The Image Editing panel appears.

3. Click Transform Commands and select Numeric Transform from the drop-down list, as shown in Figure 5-5.

The Numeric Transform dialog box appears.

Figure 5-5: You can scale numerically by using the Image Editing panel.

4. In the Width and Height text boxes, type the percentage by which you want to scale and click OK.

Cropping

Unwanted image data is a bad thing for web graphics because it takes up valuable space and also the user’s time when downloading. Follow these steps to eliminate unwanted image areas:

1. Select the Crop tool from the Select area of the Tools panel or from the Image Editing panel.

Refer to the preceding section, Numeric scaling, to see how to open the Image Editing panel.

2. Click and drag to select the area you want to keep when the crop is complete.

3. Press the Enter or Return key.

The image is cropped to the selected area.

If you’re working with a wireframe of a larger web page design, you may want to export only a small portion — for example, to export just the navigational tools, not the rest of the page. To crop only when exporting, follow these steps:

1. Click and hold the Crop tool to select the Export Area tool.

2. Click and drag to select the area you want to keep when the image is exported.

3. Double-click in the middle of the cropped area.

The Image Preview window appears, as shown in Figure 5-6, offering you the opportunity to set export settings for this section of your image.

Figure 5-6: Double-click in the area you created using the Export Area tool to open the Image Preview window.

4. Choose your export settings.

You can select a Format GIF, JPEG, PNG, WBMP, or TIFF setting from the Format drop-down list in the upper-right area of the Image Preview dialog box or use the Options, File, and Animation tabs on the left to set up custom export options.

5. Click Export.

The selected area is exported to a location you choose, and you return to your image, which is still intact.

Painting

Fireworks has many of the same painting capabilities as Photoshop, but the methods in which you use them can be quite different.

For example, when you select the Brush tool from the Bitmap section of the Tools panel you make decisions about the size of the brush, paint color, and blending mode from the Properties panel (see Figure 5-7) rather than from the Options panel, as in Photoshop.

Figure 5-7: Change your Brush tool settings.

Cloning

The Rubber Stamp tool works much like the Clone Stamp tool in Photoshop. Follow these steps to clone (copy) pixels in Fireworks:

1. Select the Rubber Stamp tool in the Bitmap section of the Tools panel.

2. Hold down the Alt (Windows) or Option (Mac) key and click the part of the image you want to clone.

In Figure 5-8, the crosshair on the boy’s left shoulder indicates the pixels that you’re cloning.

Figure 5-8: Select pixels for cloning and start painting.

3. Position the mouse pointer over the area where you want the cloned pixels to appear and start painting.

The cloned pixels appear in the image area. (See the left side of Figure 5-8.)

As you paint, follow the marker for the source; it moves simultaneously with the mouse pointer. You can use the Properties panel to change brush attributes.

Filtering

Filters offer you many opportunities to edit your images. You can choose to blur an image or adjust its colors by using the Curves or Hue Adjustment layer. To access your filters, you can choose them from the Filters menu or choose Window⇒Others⇒Image Editing.

If you want to apply additional filters that you can change later or even delete, click the Add Filters button in the Properties panel, shown in Figure 5-9, and select Photoshop Live Effects from the drop-down list. The Photoshop Live Effects dialog box appears, as shown in Figure 5-9.

Figure 5-9: Click the Add live filters plus sign and select Photo-shop Live Effects to create non-destructive filter changes.

In the following example, you use the Hue/Saturation filter to add a color tint to an image. Follow these steps:

1. Open an image and select it with the Pointer tool.

2. Click the Add Filter button in the Properties panel.

3. Choose Adjust Color and then Hue/Saturation.

The Hue/Saturation dialog box appears. (See Figure 5-10.)

Figure 5-10: Applying a color tint with the Hue/Saturation filter.

4. Select the Colorize check box to apply a color tint.

5. Adjust the Hue slider until you find a color you want and click OK.

If you want to edit or delete a filter, follow these steps:

1. In the Filters list in the Properties panel, double-click the listed filter to edit it.

The Hue/Saturation Filter dialog box opens, where you can make changes to the filter.

2. Delete a filter by selecting it from the filter list and clicking the minus icon (-) located on top of the filter list.