Fitting Fireworks into the Design Workflow

Adobe Fireworks CS4

HOW-TOs 100 Essential Techniques

Jim Babbage

00_FW_fm.indd 1

9/16/08 11:57:53 AM

94

#

197

Integrating Fireworks with Photoshop

Various techniques in this book have discussed Photoshop integration (Techniques #16 and #23 specifically), but for those of you who need to move between Fireworks and Photoshop, here are some things to ­consider. When moving from Fireworks to Photoshop:

Using Photoshop Filters and Plug-ins

• Do not open Fireworks PNG files in Photoshop. Photoshop will flat-

Third-party plug-ins and filters for Photoshop 5.5 and ­earlier versions are supported in Fireworks.

• Use layers and sublayers to structure your design. When saved as a

1. Choose Edit > Preferences (Windows) or Fireworks > Preferences (Mac OS).

ten all aspects of the file. If you need to go to Photoshop, save your file as a Photoshop PSD file. PSD, Fireworks will convert this hierarchy into layer groups, maintaining visibility, lock status, and layer names. Objects within a layer or sublayer will be converted to layers.

• Use Photoshop Live Effects rather than Fireworks Live Filters. This guarantees support for the effects within Photoshop as Layer Styles.

• Multiple pages are not supported in Photoshop. If you have a multipage document, you’ll need to select each page and export it as a separate PSD file.

• Image

slice dimensions and names are maintained in the ­ hotoshop file. But optimization settings are not maintained in the P Photoshop file.

As noted in Techniques #16 and #23, Fireworks has some pretty robust controls when opening or importing a Photoshop document. That said, here are some other points to consider when moving from Photoshop to Fireworks:

• Fireworks does not support Smart Objects. They will import as flattened graphical objects.

• Fireworks does not support adjustment layers. Adjustment layers will be discarded unless you choose Flatten Photoshop Layers to Single Image. This will retain the effect, but the file will be flattened so those effects will not be editable.

• Fireworks retains image slices and slice names created in Photoshop. Optimize settings are not retained.

2. Click the Plug-Ins category and select Photoshop Plug-Ins. 3. The Select a Folder ­( Windows) or Choose a Folder (Mac OS) dialog opens. 4. Navigate to the folder where the Photoshop or other filters and plug-ins are installed and click Select (Windows) or Choose (Mac OS). 5. Click OK to close the ­Preferences dialog. 6. Restart Fireworks. Native Photoshop 5.5 ­filters are also supported on ­Windows. However, you may need to edit the ­Disabled plugins.txt file found in the configuration folder within the Fireworks CS4 application folder. If you do so, be sure to make a copy of the .txt file.

#94:  Integrating Fireworks with Photoshop

13_FW_193_204.indd 197

9/16/08 12:55:25 PM

200

Edit a Single Image from Dreamweaver You can right-click/Controlclick on any inline image while in Dreamweaver, select Edit with, and then select Fireworks. If Fireworks can’t locate the PNG source file, the Find Source dialog will appear asking whether you want to edit the actual image file or the source PNG file. If you choose Use a PNG file, Fireworks prompts you to locate the PNG file. If you choose Use This File, you will edit the flattened image right from the HTML page. In either case, the same workflow applies: Make your edits and click Done. If Fireworks can find the PNG file, you will just be asked whether you want to use the source file or the selected image.

97

#

Round-trip Editing Between Dreamweaver and Fireworks

Dreamweaver and Fireworks have always been tightly integrated. In fact, Fireworks may have even been responsible for coining the phrase “roundtrip editing.” This process refers to the ability to edit the images in a Fireworks generated HTML table right from Dreamweaver (Figure 97a). The beauty of this editing cycle is that as soon as you are done editing in Fireworks, the Web page and content are automatically saved and updated in Dreamweaver. If you think about the HTML prototypes discussed in Chapter 12, “Designing Interfaces,” you can see where this feature might be quite useful after a client has reviewed an online mock-up. To take advantage of round-trip editing, click anywhere inside the HTML table within Dreamweaver. Then in the Tag Selector, click on the main table tag. The Property Inspector will update to show you the path to the source PNG file, and beside it an Edit button will appear with the Fireworks icon inside it.

Figure 97a  Fireworks and Dreamweaver integration make it easy to edit a Fireworks design right from Dreamweaver.

Click the Edit button and Dreamweaver will launch Fireworks and open the source PNG file for you. If Fireworks can’t find the PNG file, it will prompt you to browse for the file. When the file opens, you’ll see near the upper-left corner a button labeled Done and the status message, “Editing from Dreamweaver” (Figure 97b).

Figure 97b  Clicking Done resaves the PNG file, updates the HTML, and brings you back to Dreamweaver.

Make your changes to the file in Fireworks. You can edit images and even move them around, but try not go crazy repositioning elements because it can greatly affect the HTML table. Then, rather than saving the PNG, click the Done button. Fireworks saves the PNG, and Dreamweaver appears with the updated HTML and graphics in place. C HAPTER t h i r t e e n

13_FW_193_204.indd 200

Fitting Fireworks into the Design Workflow

9/16/08 12:55:25 PM

98

#

201

Copy and Paste to Dreamweaver

You can copy and paste selected objects or a bitmap selection right into Dreamweaver. Make your selection and choose Edit > Copy. Move to Dreamweaver, open the destination Web page, and select Edit > Paste. The Image Preview dialog (Figure 98) appears so you can choose a file format and optimization settings, as well as size the image and crop it. When you have made all your choices, click OK to add the image file to the Web page.

Editing Graphics in Dreamweaver Changing the properties of an image within a Web page editing program is not ­usually recommended, but if you have Fireworks and Dreamweaver installed, you can take advantage of some basic bitmap editing without leaving Dreamweaver. Simply choose an image in the Web page, The ­Properties inspector will give you ­several ­bitmap tools to use. You can ­optimize, scale, crop, lighten, darken, sharpen, or blur an image in the Dreamweaver ­workspace.

Figure 98  Pasting selected objects from Fireworks to Dreamweaver launches the Image Preview dialog, so you can convert the selected objects to a single, flattened, Web-ready graphic format.

These changes are made directly to the selected image file, and will permanently alter the image.

Note You can only make a bitmap selection if your objects are all bitmaps. If objects you want to copy include text or vectors, you must select them using the Pointer tool or select them in the Layers panel.

#98:  Copy and Paste to Dreamweaver

13_FW_193_204.indd 201

9/16/08 12:55:26 PM