Sunny Pixels

Blend 3: Introduction to Importing Photoshop Files

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 3 projects and transform otherwise static artwork into visually compelling and interactive experiences.

In this post we’ll explore the flexibility of the Photoshop (.psd) file importing functionality and learn a range of useful tips and tricks to efficiently integrate visual assets to create Microsoft Silverlight and Windows Presentation Foundation (WPF)-based applications in Blend 3.

Importing Visual Assets

In 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, 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 in  Blend 3

Photoshop files can be imported into 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 above is a screenshot previewing an updated version of the UI.

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 image (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.

Notice that the compatibility image is created by Photoshop every time the file is saved and a snapshot is taken of the state of the file with ONLY visible layers included.

 You can import this compatibility image by checking the “Compatibility image” 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 toggled to be checked and unchecked which will determine which layers are imported as individual objects converted to either WPF or Silverlight 3 elements. 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 which identifies it as either an image, vector, or text object indicating what kind of object it will be mapped to on import. When a layer is selected 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 options:

•  
  •  
    • 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 Blend 3 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. Both layer 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. For example a solid fill with a vector mask will be imported as a vector object using the mask geometry and the fill. An image with a vector mask will be imported as an image object with a clipping mask using the vector mask geometry.

More info!

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. Merging is especially useful when a file contains Adobe Photoshop features like layer styles, adjustment layers and blend modes.  For more info about merging and details on supported Adobe Photoshop features check back for more posts about the Photoshop Import feature in Blend 3.

Adding Interactivity in Blend 3

To import the Photoshop layers you can use the default settings for all layer types or individually set options as described above. Now you can click “OK” and all of your layers will be imported to your currently active project.

Once the Photoshop file is imported you will be able to see the list of individual layers enabled in the import dialog display on the Blend 3 artboard. 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 #2: Object names in Expression Blend can only contain alphanumeric character [A-Z][a-z][0-9] and underscores.  When importing Photoshop files into 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.

Now that your visual assets are integrated in your Blend 3 project you can begin adding interactivity to all imported content! All imported objects are ready to be animated, data-bound and integrated into a fully functional interactive user experience :)

-Janete