Importing files into Fireworks
Import Photoshop files into Fireworks. Retain font attributes, keep layers intact. Fine-tune tradeoffs between editability and consistent appearance.
This content requires Flash
Requirements
To complete the tasks demonstrated in this tutorial, you need the following software and files:
Adobe Fireworks Professional CS4
Adobe Photoshop CS4
Sample files
lrvid4089_xp.zip (ZIP, 3MB)
Prerequisite knowledge
Basic knowledge of vectors, layers, and the interfaces for Photoshop and Fireworks
Importing files into Fireworks
You can import Adobe® Photoshop® files into Adobe Fireworks® CS4, while retaining the integrity of the original image, the number of layers, and other features now available in both programs. In this tutorial, you will learn how to import Photoshop files into Fireworks using some of the new features in Fireworks CS4.
Importing Photoshop files into Fireworks
Fireworks CS4 has streamlined the process of importing files from Photoshop. For example, Fireworks CS4 now supports layer comps and allows you to preview an image during the import process. To import a Photoshop file into Fireworks CS4:
- Choose File > Open. Select a Photoshop file containing both text and images. The Photoshop File Open Options dialog box opens.
Figure 1: The Photoshop File Open Options dialog box
Note: The Photoshop File Open Options dialog box provides a number of new options for opening a Photoshop document in Fireworks. For example, Fireworks CS4 allows you to import layer comps from Photoshop. You can also choose to display a preview of the layer comp by selecting the Show Preview checkbox. Finally, you can now opt to include guides with your imported documents.
- Once you have established the parameters for importing your Photoshop document, click OK.
Note: Once the document is open in Fireworks, you will notice a green cast over the images. The green areas define the slices in your document; slices created in Photoshop are imported as slices in Fireworks. You will also notice vertical lines, called guides, overlaying the document. If you move your cursor over the guides, it turns into a double-headed arrow that allows you to move the guides just as you can in Photoshop.
Figure 2: A Photoshop document in Fireworks
- Deselect the slices and hotspots by clicking the Hide Slices And Hotspots button in the Fireworks toolbox. The green cast disappears.
Figure 3: Deselecting slices and hotspots
- Choose the arrow-shaped Selection tool from the top of the Fireworks toolbox. You can use the Selection tool to navigate around the document. As you move your cursor from the toolbox to the document, the arrow-shaped cursor turns into a hand icon.
- Select a text field within your document. Notice the new Adobe type engine imported the complete text from your Photoshop document, and it is fully editable.
- Look at the Property inspector docked at the bottom of the Fireworks window. Notice all of the advanced options you have for modifying the appearance of the text.
Figure 4: Options for modifying text
- Click the bounding box surrounding the text field.
- Notice that the Property inspector identifies the box as a path.
Figure 5: Inspecting a text field in the Property inspector
Note: The designation of text fields as paths represents a significant change from previous versions of Fireworks. Prior to Fireworks CS4, Fireworks rasterized vectors as bitmaps when importing them from Photoshop. In Fireworks CS4, paths created in Photoshop are maintained in Fireworks. This continuity allows you to repeatedly import and export PSD files between the two programs while maintaining the integrity of vector shapes.
- Go to the Layers panel in Fireworks CS4. The layer hierarchy has been maintained as it was created in Photoshop. You can open and close layer groups in Fireworks just like you can in Photoshop.
Figure 6: The Layers panel
Where to go from here
- Fireworks CS4 Help and Support
- Learn Fireworks CS4
- Introducing Photoshop CS4, by Deke McClelland
- Introducing Fireworks CS4, by Jim Babbage
- Understanding styles and symbols, by Jim Babbage
- Lynda.com
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License
About the authors
Jim Babbage's two passions—teaching and photography—led him to a career in commercial photography. With the release of Photoshop 2.5, Jim became involved in the world of digital imaging, and he soon began designing for the web in addition to taking photographs. Jim is a regular contributor to Community MX, where he has written articles and tutorials on Fireworks, Dreamweaver, Photoshop, and general web and photography topics. He teaches imaging, web design, and photography at Centennial College, and web design at Humber College. He is a partner at Newmedia Services, and has been a guest speaker at TODCon and a presenter at Adobe MAX.
