Home / Design Center / Tutorials

Importing Photoshop files into Fireworks

Tom Green

This video shows you how to import files from Photoshop, including maintaining layer hierarchy, XMP data, layer styles, and blending modes.

Requirements

To follow along with this article, you will need the following software and files:

• Fireworks CS3
• Photoshop CS3
• Sample file (ZIP, 1.5 MB)

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Exporting Photoshop files to Fireworks

1. In Photoshop, choose File > Open. Select fw_homepage.psd and click Open. This PSD file is a sample homepage for the Aquo website, which contains a number of layers and sublayers.
2. Choose File > File Info to display the page metadata. In the Keywords text box, type Aquo, Home Page. Click OK to save the changes.
3. Choose Window > Layers to open the Layers palette. Select the Logo layer in the palette.
4. Choose Layer > Layer Style > Drop Shadow.
5. In the Layer Style dialog box, click the color box to the right of the Blend Mode pop-up menu. Select a light gray hue and click OK.

6. Click OK again in the Layer Style dialog box. The drop shadow is now applied to the Aquo logo (see Figure 1).

   

   Figure 1: The Aquo logo in Photoshop has a drop shadow applied to it.

7. Select the Icons layer in the Layers palette. At the top left of the palette, click the blending mode pop-up menu and choose Pin Light.
8. Choose File > Save As. In the Save As pop-up menu, navigate to the Exercises folder. Select the PSImport folder. Click Save.

9. To replace the existing file, click Replace at the alert that you will replace the existing file. Click OK to maximize file compatibility.

Importing Photoshop files into Fireworks

1. In Fireworks, view the import options by choosing Fireworks > Preferences (Mac) or Edit>Preferences (Windows) and click the Import tab (see Figure 2).

   The Layers options let you Convert Layers to Fireworks Objects (the default), Share Layer Between Frames (which is useful if you move objects around) or Convert to Frames. Text options include Editable (the default) or Maintain Appearance, which flattens imported text into an image file. The Use Flat Composite Image options flattens the entire Photoshop image.

2. Click Cancel to close the Preferences dialog box.

   

   Figure 2: Fireworks Import preferences control how Photoshop layers and text are imported.

3. In Fireworks, choose File > Open. Navigate to the PSImport folder. Select the fw_homepage.psd file, and click Open.
4. Choose the Layers panel. If it is not open by default, choose Window > Layers to open it.
5. Notice that all the layers in the Photoshop document have been imported intact. You can move layers within Fireworks, just as you would in Photoshop.
6. Click the Logo layer to display the layer properties. Click the Info ("i") button next to Photoshop Live Effects to open the Photoshop Live Effects dialog box. The drop shadow has been imported intact and the effect is still editable.

7. Deselect the Drop Shadow option to remove the effect, and then click OK. The drop shadow is removed from the Aquo logo (see Figure 3).

   

   Figure 3: In Fireworks, remove the drop shadow on the Aquo logo applied in Photoshop.

8. In the Layers panel, click the Icons layer. Notice that Pin Light is selected as the blending mode. Click the Blend Mode pop-up menu and choose

   <st1:City w:st="on">
   <st1:place w:st="on">Normal</st1:place>
   </st1:City>

   to revert to the image's normal state.

9. Choose File > File Info. As you can see, the metadata (including the keywords), has been kept with the file in Fireworks (see Figure 4). Click OK.

   

   Figure 4: The File Info dialog box in Fireworks shows Photoshop metadata was preserved.

   More cool features about Fireworks CS3: You can also move layers within Fireworks, just as you would in Photoshop. Plus, any guidelines applied in Photoshop now translate to Fireworks.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.