Adobe Fireworks CS5 : Improving Your Workflow - Thinking ahead: future-proofing your projects (part 2) - Using Fireworks files with Photoshop

Using Fireworks files with Photoshop

With each product cycle, Fireworks and Photoshop come closer to having a fully integrated working relationship. If you need to move your Fireworks designs to Photoshop, you’ll get the best results by understanding Photoshop Live Effects, best practices for saving your file for Photoshop, and Photoshop export options.

Many elements can be preserved for editing in Photoshop. Text, hierarchical layers, layer groups, vector shapes filled with Photoshop Live Effects, solid color, many gradients, and masked objects are maintained and supported when you save a file in PSD format from within Fireworks.

Photoshop Live Effects

You will add a border around the images in the wallpaper page using a Photoshop Live Effect.

1.	Switch to the Pointer tool, hold down Shift, and click each of the thumbnails.
2.	Click the Add Live Filter (+) button in the Filters section of the Properties panel, and choose Photoshop Live Effects.
3.	Choose the Stroke category.
4.	Set the size of the stroke to 1, the position to Inside, and leave the opacity at 100. Enhanced integration in CS5 Fireworks and Photoshop CS5 have tighter integration in many ways: Importing from Photoshop to Fireworks You can force flattening of Photoshop adjustment layers when importing PSDs, which you can enable/disable in the Preferences. Hue, saturation, and color blend modes and the Hue/Saturation filter in Fireworks now use the same algorithms as Photoshop to improve color fidelity and appearance Importing editable gradients from Photoshop now match better: Linear to Linear (close to perfect match) Radial to Radial (close to perfect match) Reflected to Bars (close to perfect match) Diamond to Rectangular (approximate match) Angle to Conical (approximate match) Saving/Exporting Fireworks files as PSD files Exporting editable gradients from Fireworks to Photoshop are likewise more accurate: Linear to Linear (close to perfect match) Radial to Radial (close to perfect match) Bars to Reflected (close to perfect match) Rectangular to Diamond (approximate match) Conical to Angle (approximate match) Ellipse to Radial (approximate match) Ripples to Radial (approximate match) StarBurst to ShapeBurst (loosely matched) Contour, Satin, Waves to Linear (loosely matched)
5.	In the Fill area, change the stroke color to Black by clicking the black color swatch.
6.	Click OK. All the thumbnails now have a black border. We’ve hidden the guides and slice guides in this figure so you can better see the borders. If you want to hide them yourself, choose View > Guides, and then deselect Show Guides. To hide the Slice Guides, choose View > Slice Guides. Don’t forget to set them to be shown again afterward if you do this.

Saving your file for Photoshop

If your designs and comps must go from Fireworks to Photoshop for further editing, and you want to retain as much editability as possible, make sure you save a copy of your file in the Photoshop PSD format.

1.	Choose File > Save As.
2.	Browse to the Lesson12 folder.
3.	Choose Photoshop PSD from the Save As Type (or Save As) menu. The menu name will change to Save Copy As when Photoshop PSD is chosen.
4.	Click the Options button.
5.	To maintain as much editability as possible, choose Maintain Editability Over Appearance.
6.	Click OK to accept the settings, and then click Save to save the new file. If you open the file in Photoshop, you will see that the file is very similar to the original Fireworks design, with two exceptions: the brightness of the header and the texture in the background are missing.

Customizing Photoshop Export options

While maintaining editability makes the file as flexible as possible when opened in Photoshop, you may also lose certain effects or features. In the current file, the vector shapes used as containers will remain as vectors, and because the fills are linear gradients, even those will export properly. Other gradients such as contour, satin, or waves will be loosely matched. The header, which uses a Levels Live Filter to help with its appearance, will lose the Live Filter, and as a result, the header will look different in Photoshop.

If the appearance is more important than the object’s editability, you can customize the Photoshop export options.

Common blending modes supported by Photoshop and Fireworks

Blending modes can be applied to objects or layers. When you apply a blending mode, the object’s color and opacity are blended with the object beneath it in the Layers panel. Fireworks has 46 different blending modes. Photoshop and Fireworks share many common blending modes (23 in total). If a blending mode in this list is applied to an object or layer, the mode will be supported and remain editable in either application.

Normal

Dissolve

Darken

Multiply

Color Burn

Linear Burn

Lighten

Screen

Color Dodge

Linear Dodge

Overlay

Soft Light

Hard Light

Vivid Light

Linear Light

Pin Light

Hard Mix

Difference

Exclusion

Hue

Saturation

Color

Luminosity