Expression Blend 3: Integration with Adobe Creative Suite

Author: Janete Perez, Expression Blend Program Manager
Blog: http://blogs.msdn.com/janete/

Expression Newsletter, subscribe now to get yours.

One of the main goals of Expression Blend 3 is to improve the overall workflow for visual designers. To achieve this we added support to import files created in Adobe’s Photoshop and Illustrator applications. Our goal is to allow designers to be able to incorporate previously created assets into Expression Blend projects and transform otherwise static artwork into visually compelling and interactive experiences.

In this article we’ll explore the flexibility of the Photoshop (.psd) and Illustrator (.ai) file importing functionality and learn a range of useful tips and tricks to efficiently create Microsoft Silverlight and Windows Presentation Foundation (WPF)-based applications.

Adobe Photoshop Import

In Expression Blend 3 the import feature for .psd files has a wide range of functionality that supports many Photoshop features and provides flexibility for the user at the time of import. Let’s use the following file as an example and open it in Photoshop to explore its contents:

The Photoshop file displays a basic comp for a snowboarding website that is composed of an image and a few text controls, as well as solid fills with vector masks applied. The individual layers have been named, grouped, and are either hidden or visible.

Import Dialog

Adobe Photoshop files can be imported into Expression Blend 3 by selecting the “Import Adobe Photoshop File...” entry in the File menu. You can then select a .psd file and launch the following dialog:

The dialog provides you with a list of the individual layers in the file as well as a real-time preview of the content. You will notice the following information is persisted:

• Thumbnails (including larger thumbnails on hover)
• Layer Names
• Layer Structure & Groups
• Layer Types (images, text, and fills)
• Layer Masks (both pixel and vector)
• Visibility toggle represented by a checkbox
• Compatibility layer (displays a snapshot of all visible layers in the original .psd file)

Tip #1: Whenever a .psd file is saved with the “Maximize compatibility” option checked, a flattened image will automatically be generated by Photoshop that will include all visible layers. This image is saved and referenced in the .psd file. You can import this image by checking the “Compatibility layer” in the import dialog:

Layer Options

As you hover over the thumbnails you will get a larger view of the layer content. Layers can be checked and unchecked, which will determine which of them are imported as individual objects converted to either WPF or Silverlight controls. The preview section is updated as layers are toggled on/off to reflect the items that will be imported.

Each layer also has a type icon that identifies it as either an image, vector, or text object, indicating what kind of object it will be mapped to on import. When you select a layer, you will also be able to change the import options. Below is an example of a layer that will be imported as vector artwork and the related properties:

• Text: These layers can be imported as “Editable Text” or a “Flattened bitmap.”
• Vector: These layers can be imported as “Editable Paths” or a “Flattened bitmap.”
• Image: These layers do not have any options; they can only be imported as PNGs.

All imported images and flattened layers converted to bitmaps are automatically added to the Expression Blend project in a folder labeled <.psd file name>_images.

Masks are also imported when the associated layer is checked. The dialog displays masks as a separate thumbnail next to the layer thumbnail. Currently only vector masks are enabled in the dialog but both pixel and vector masks are imported and mapped to editable Silverlight/WPF types.

• Layer Masks: These types of masks are imported along with the associated layer. Layer masks are mapped as the Opacity Mask property of imported objects.
• Vector Masks: These types of masks are mapped as either paths with their associated fills or as clipping paths applied to the imported objects.

Multiple layers can also be merged so that they are imported as a single image. This action can also be reverted by ungrouping a merged set of layers.

Supported Adobe Photoshop Features

Expression Blend supports a variety of Photoshop features on import and converted to the equivalent WPF or Silverlight types. The dialog displays info-tips on each layer to identify the properties that are not supported, and helpful instructions on how to resolve the problem when possible. The following is a list of supported features that can be successfully imported and in some cases edited in Expression Blend 3:

Note: The following objects and properties are supported in the Expression Blend 3 Preview for Silverlight 3. You will notice that features like adjustment layers, layer styles, smart objects, and dynamic guidelines are unsupported in the current release of Microsoft Expression Blend 3 Preview. Any updates that will be included in the final release of Blend 3 are also noted below:

• Text:
  The text styles that are supported and editable in the Expression Blend 3 Preview include: FontFamily, FontSize, Foreground, Underline, StrikeThrough (WPF only), FauxBold, FauxItalic, FontBaseLine (WPF only), Text, AllCaps, Justification, AutoHyphenate (WPF only), RenderTransform (currently only scaling, rotation not included).
  Note: The final release of Expression Blend 3 will not support importing and editing of other text styles.
  
  
• Blend Modes:
  The current release of Expression 3 Preview supports importing a subset of Photoshop blend modes.
  To maintain the look and feel of blend modes you must merge and flatten related layers in the Photoshop Import dialog, otherwise they will be ignored. When related layers are merged, the Expression Blend 3 Preview supports rasterizing and importing the following blend modes: Normal, Color Burn, Color Dodge, Darken, Difference, Exclusion, Hard Light, Lighten, Linear Burn, Linear Dodge, Linear Light, Multiply, Overlay, Pin Light, Screen and Soft Light.
  Note: The final release of Expression Blend 3 will support all blend modes.
  
  
• Adjustment Layers:
  The current release of Expression Blend 3 Preview does not support importing adjustment layers.
  Note: The final release of Expression Blend 3 will support importing most adjustment layers. To maintain the look and feel of adjustment layers you will need to merge and flatten related layers in the Photoshop Import dialog, otherwise they will be ignored. When related layers are merged, the final release of Expression Blend 3 Preview will support rasterizing and importing the following adjustment layers: Brightness / Contrast, Black & White, Channel Mixer, Color Balance, Curves, Exposure, Invert, Levels, Posterize, Photo Filter and Threshold.
  The final release of Expression Blend 3 will not support importing the following adjustment layers: Gradient Map, Hue / Saturation, Selective Color, Vibrance.
  
  
• Layer Styles:
  The current release of Expression Blend 3 Preview does not support importing layer styles.
  Note: The final release of Expression Blend 3 will only support importing and editing the drop shadow layer style.
  
  
• Gradients:
  The Expression Blend 3 Preview only supports importing and editing linear and radial gradients. All other gradients are rasterized.
  Note: The final release of Expression Blend 3 will maintain the same functionality for gradients as the Preview.

Tip #2: To apply the associated Blend Modes in a .psd file, you will need to merge the related layers to be imported as an image. For example, the file below contains a layer with the “Linear Light” Blend Mode applied. The info-tip lets the user know that the layer needs to be merged with the image below in order for the blend mode to take effect.

After clicking the Merge layers button and importing the .psd file, the results below are imported and displayed on the Expression Blend 3 artboard. Notice that there is a “Merge_1” image that was imported combining the “slopes” layer and the “Image1” layer from the original file. The “Merge_1” image correctly displays the composite of the two layers with the “Linear Light” Blend Mode applied.

Adding Interactivity in Expression Blend 3

Once the Adobe Photoshop file is imported in Expression Blend 3, you will be able to see the list of individual layers enabled in the import dialog. These Photoshop layers are converted into equivalent Silverlight and WPF objects and displayed on the Objects and Timeline panel with their associated names and grouping. All imported objects are previewed on the artboard, and users can modify and set properties on these items with all of the existing toolset as well as the new Blend 3 features.

Tip #3: Object names in Expression Blend can only contain alphanumeric characters: [A-Z][a-z][0-9] and underscores. When importing Adobe Photoshop files into Expression Blend 3 Preview, you will notice that all other characters (including spaces) will be replaced with an underscore: “_”. Also, a unique numeric identifier will be appended to duplicate layer names.

Adobe Illustrator Import

In Expression Blend 3 Preview, the Adobe Illustrator .ai file import feature has the equivalent functionality to the Illustrator import feature in Microsoft Expression Design 2. Let’s use the following file as an example and open it in Illustrator to explore its contents:

The Illustrator file displays a complex illustration that is composed of an image and a text control, as well as a variety of vectors.

Tip #4: In order to be able to import .ai files into Expression Blend 3, you must ensure that the “Create PDF Compatible file” checkbox is checked when the file is saved, otherwise the file will not import.

Once saved with the “Create a PDF Compatible file” setting enabled you can import the .ai file into Expression Blend 3 by selecting the “Import Adobe Illustrator File...” entry in the File menu. You can then select an .ai file and be able to achieve the following results:

In Expression Blend 3 you will be able to see the list of individual layers displayed on the artboard. These Illustrator layers are converted into equivalent Silverlight and WPF objects and displayed on the Objects and Timeline panel. Many features from Illustrator files are imported and others are not supported. You’ll notice some of the following behavior:

• Layer Names: These are only persisted for the top-level groups in the file and not the subgroups.
• Layer Structure and Groups: Only the top groups are preserved and the remaining subgroups are not persisted.
• Layer Types: Images are imported as PNG’s and automatically added to a <.ai file name>_images folder in the project. Text and vector artwork are all converted to editable paths on import.
• Visibility toggle and lock states: These properties are imported for the imported objects.
• Gradients: Midpoint stops and the majority of gradient stops are imported and editable.

Similar to the Photoshop import results, you can add interactivity to all imported content. All imported objects are ready to be animated, data-bound and integrated into a fully functional interactive user experience.