Export (0) Print
Expand All

Import an Adobe Photoshop file

Expression Studio 4.0

By importing your Adobe Photoshop files into your Microsoft Expression Blend project, you can transform your static artwork into a visually compelling and interactive experience.

Understanding the layer options available in the Import Adobe Photoshop File dialog box will help you to integrate Photoshop files into your Expression Blend projects more quickly and efficiently.

For more information about layer options and supported features, see the sections entitled "Compatibility image," "Layer options and tools," and "Photoshop feature support."

To import a Photoshop file

  1. On the File menu, click Import Adobe Photoshop File.

  2. In the Import Adobe Photoshop File dialog box, browse to the file that you want to import, and then click Open.

    In the Import Adobe Photoshop File dialog box, a preview of the PSD file is displayed on the left. On the right is a list of the individual layers in the file along with important information about each layer, as well as a compatibility image.

    Import Adobe Photoshop File dialog box
  3. In the Import Adobe Photoshop File dialog box, do the following:

    • Select the layers that you want to import. Alternatively, you can select Compatibility image to import a single merged image.

      For more information about the compatibility image, see the section entitled "Compatibility image."

    • If an Information icon Information Icon appears next to a layer, review the information by hovering the pointer over the Information icon Information Icon, and then do one of the following:

      • If you want to import the layer as editable content, do not merge or flatten the layers. The Editable content option under Import layer as is selected by default.

        important noteImportant

        If you import a layer as editable content, there may be visual differences between how the layer is displayed in Photoshop and how it is displayed in Expression Blend. For more information, see "Editable content" in the section entitled "Information icons."

        NoteNote

        Due to limited support for some features in Windows Phone, some layer selections default to Flattened bitmap when you import a PSD file into a Windows Phone project.

      • If you want to preserve the appearance of the layer, merge or flatten the layers.

        Merge the layers by selecting the layers that you want to merge, right-clicking, and then selecting Group for Merging.

        Flatten the layers by selecting Flattened bitmap under Import layers as.

        important noteImportant

        The merged or flattened layers will import as a single rasterized image. Merged or flattened layers are not editable in Expression Blend. For more information, see "Flattened bitmaps" and "Merge layers" in the section entitled "Information icons."

    • View a preview of the image on the left panel to make sure that it appears the way that you want it to.

  4. Click OK.

A new Canvas object with the same name as your imported file is added to your document. In the Objects and Timeline panel, under the Canvas object (named Photoshop_Layout in this example) are all of the layers imported as objects. If a folder has not been specified, a new folder (named Photoshop_Layout_Images in this example) is created in the root folder in the Projects panel to contain all the associated PNG files.

Import Adobe Photoshop File Projects panel

Compatibility image

The compatibility image is a snapshot of all of the visible layers in the original PSD file. The compatibility image is created whenever a PSD file is saved in Photoshop with the Maximize compatibility option selected. A flattened image file, which includes all of the visible layers, is automatically generated, saved, and referenced in the saved PSD file.

You can select the Compatibility image to quickly and easily import your PSD file as a single merged image. This option is particularly useful if you do not need editable layers, and can work with a single flattened bitmap on which to base your work in Expression Blend.

To preview the compatibility layer, hover the pointer over the compatibility layer thumbnail in the right panel.

To import the compatibility image

  • In the Import Adobe Photoshop File dialog box, select the Compatibility image check box. Click OK.

NoteNote

When you import the compatibility layer, none of the other layers are imported.

Layer options and tools

Expression Blend preserves layer names, importing the layers as individual objects and layout containers to make them easy to work with. When importing Photoshop files, you can view layers, rename layers, and select which layers to import.

Layer selection

You can choose the layers that you want to import by selecting or clearing the check box that appears to the left of each layer.

If you want to import all of the layers, select the Check all layers to import check box at the top of the panel.

To deselect all of the layers, clear the Check all layers to import check box.

You can import one or more individual layers by selecting or clearing the check box for each layer in the right panel.

The preview in the left panel is updated when you change your layer selection.

Layer names

Photoshop layer names are preserved, and are displayed to the right of the thumbnail for each layer. You can change a layer name by right-clicking the layer and then clicking Rename, or by double-clicking the layer name and then typing directly in the layer name field.

Thumbnails

You can display a larger version of the Photoshop layer by hovering the pointer over a layer thumbnail in the right panel.

Import Adobe Photoshop File Thumbnail Preview

Layer structure and groups

The layer structure and groups that you created in Photoshop are preserved. Groups are easily identified by the Expand Hh134795.6375953d-074c-421a-bbb3-6f5055b67b64(en-us,Expression.40).png and Collapse Collapse arrows. To view the layer structure, click Expand. To collapse the group, click Collapse.

Layer types

Each layer includes a Type icon that identifies the layer as one of the following: image, vector, or text. The layer type is displayed when you Hover the pointer over the Type icon.

Import Adobe Photoshop File Image Layer

Text and vector objects can be imported as either editable content or as flattened bitmaps. You can change the import options for text and vector objects by clicking the layer, and then clicking either Editable content or Flattened bitmap under Import layer as.

For more information about importing objects as editable content, see "Editable content" in the section entitled "Information icon."

For more information about importing objects as flattened bitmaps, see "Flattened bitmaps" in the section entitled "Information icon."

NoteNote

The import options appear below the compatibility image when a layer with content that can be imported as either editable content or a flattened bitmap is selected.

Image layers can also be imported as either editable content or as flattened bitmaps.

For example, an image layer may have an opacity mask, a vector mask, and a drop shadow layer style. When this layer is imported as editable content into Expression Blend, the following content is added to the project:

  • The image file in PNG format

  • The opacity mask in PNG format

  • A Clip property for the vector mask

  • A DropShadowEffect for the Drop Shadow layer style

If the image layer is imported as a flattened bitmap, a single image rasterized image is created from the layers and the resulting PNG is imported into Expression Blend.

Information icon

If the Information icon Information Icon appears, hover the pointer over the icon to display more information. The tooltip offers additional information about features that are used in the PSD file, but are not supported in Expression Blend.

Import Adobe Photoshop File InformationTooltip
NoteNote

If a group contains a layer that contains a feature that is not supported in Expression Blend, the Information icon will appear in the container layer of that group. For more information, expand the group list to view the individual layers that display Information icons.

Editable content

If you import a layer as editable content, there may be visual differences between how the layer is displayed in Photoshop and how it is displayed in Expression Blend. You can modify the appearance of the content in Expression Blend by modifying the object properties.

The following table describes Photoshop elements that are editable in Expression Blend. Use the Description column to locate the properties for the object in order to modify them in Expression Blend.

Photoshop element

Expression Blend element (XAML)

Description

Text layer

TextBlock

A Photoshop Text Layer is imported as a TextBlock Hh134795.343296b4-5c7d-4145-84cc-91b08ba67a1b(en-us,Expression.40).png with the original Photoshop Text properties mapped to Expression Blend Text properties. Text properties are located in the Text category of the Properties panel.

NoteNote
For more information about working with TextBlock objects in WPF and Silverlight projects, see Add an object to the text flow.

Shape layer

Path

A Photoshop shape layer is imported as a Path with the original vector mask properties mapped to Expression Blend Data properties. Data properties are located in the Data field of the Appearance category in the Properties panel.

Solid color fill

Path

A Photoshop solid color fill is imported as a Path with the original Fill property mapped to Expression Blend Color and OpacityMask properties applied to a Solid color brush Hh134795.3a66ec96-47bb-47fc-8876-6b9456feec3a(en-us,Expression.40).png. Solid color brush properties are located in the Brush category of the Properties panel.

Linear gradient fill

Path

A Photoshop linear gradient fill is imported as a Path with the original Fill property mapped to Expression Blend Linear gradient brush Hh134795.bd5eefed-9628-4363-be5d-29bfb5962175(en-us,Expression.40).png properties applied to a Gradient brush Hh134795.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(en-us,Expression.40).png. Linear gradient brush properties are located in the Brush category of the Properties panel.

Radial gradient fill

Path

A Photoshop radial gradient fill is imported as a Path with the original Fill property mapped to Expression Blend Radial gradient brush Hh134795.4279aa9a-15c2-4435-9937-6848afc38618(en-us,Expression.40).png properties applied to a Gradient brush Hh134795.91fb0c61-7b3b-4ae7-8a59-760e625e3bd7(en-us,Expression.40).png. Radial gradient brush properties are located in the Brush category of the Properties panel.

Pattern fill or unsupported gradient fill (diamond, angle, reflected)

Path

A Photoshop pattern fill or unsupported gradient fill is imported as a Path with the original Fill property mapped to Expression Blend Fill properties applied to an ImageBrush. ImageBrush properties are located in the Brush category of the Properties panel.

Group

Canvas

A Photoshop group is imported as a Canvas Hh134795.95e40288-f7a6-4ddc-9d6a-68d0aa46d621(en-us,Expression.40).png with individual layers imported as children of the Canvas.

Image layer

Image

A Photoshop layer is imported as an Image object. In addition, a PNG file is added to the project. The PNG file is the source for the Image object. Each layer is imported as an Image object with a corresponding PNG file.

Drop shadow layer style

DropShadowEffect

When you import a Drop Shadow Layer style, a DropShadowEffect is applied to the imported object. You can edit the drop shadow effect by selecting the applied DropShadowEffect in the Objects and Timeline panel and editing the properties directly in the Properties panel.

NoteNote
DropShadowEffect is not supported in Windows Phone projects.

Layer mask

OpacityMask applied to an ImageBrush

A Photoshop layer mask is imported as an OpacityMask applied to an ImageBrush. OpacityMask properties are located in the Brush category in the Properties panel. In addition, a PNG file is added to the project. The PNG file is the source for the ImageBrush.

NoteNote
Layer masks are supported, but not recommended, in Windows Phone projects.

Vector mask on image or text layer

Clip property of an Image or TextBlock

A Photoshop vector mask on an image or text layer is imported as a Clip property applied to an Image or TextBlock. Clip properties are located in the Miscellaneous category in the Properties panel.

NoteNote
The Clip property has limited support in Windows Phone projects.

To import a layer as editable content

  • If you want to import the layer as editable content, do not merge or flatten the layers. The Editable content option under Import layer as is selected by default.

    NoteNote

    Due to limited support for some features in Windows Phone, some layer selections default to Flattened bitmap on import when you are working in a Windows Phone project.

Flattened bitmaps

Importing a layer as a flattened bitmap creates a rasterized image (in PNG format) of that layer. Flattening the bitmap rasterizes all of the layer styles associated with that layer. The PNG file is used as the source for the Image object.

To import a layer as a flattened bitmap

  • Select the layer that you want to import as a flattened bitmap, and then select Flattened bitmap under Import layer as at the bottom of the Import Adobe Photoshop File dialog box.

Merge layers

Importing two or more merged layers creates a single rasterized image in PNG format. The PNG file is used as the source for the Image object.

To merge layers

  • Select the recommended layers by holding down the CTRL key and clicking the recommended layers. Right-click the selection, and then click Group for Merging.

NoteNote

You can undo the merge by selecting the merged layers and then clicking Ungroup layers.

Layer styles

If a layer style has been applied to a layer, the Layer effect icon Effects icon appears next to the layer. A layer style can be imported either by selecting the Flattened bitmap import option or by merging the layer with other layers.

For more information about flattening or merging layers, see the section entitled "Information icon."

Import Adobe Photoshop File Layer Effects
tip noteTip

Hover the pointer over the Information icon Information Icon to display guidance about how to import layer styles.

Masks

Layer and vector masks are displayed as a separate thumbnail in the associated layer. Both layer and vector masks are imported when the associated layer is selected.

Layer masks are imported as opacity masks, and are located in the Brushes category in the Properties panel.

Vector masks are either imported as paths or applied as clipping paths to the imported object. 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.

Import Adobe Photoshop File Vector Mask

For more information about importing layer and vector masks, see "Editable content" in the section entitled "Information icon."

If a clipping mask has been applied to a layer, the Clipping mask icon appears next to the layer. A clipping mask can be imported by selecting all of the clipping mask layers and the layer they are pointing to and merging them.

Import Adobe Photoshop File Clipping Mask

For more information about merging layers, see the section entitled "Information icon."

Hover the pointer over the Information icon Information Icon to display guidance about how to import clipping masks.

Photoshop feature support in Expression Blend

The following Photoshop features are supported in Expression Blend. Where noted, features can be edited in Expression Blend.

Text styles

Photoshop text styles map to Text properties applied to a TextBox in Expression Blend.

The following text styles are imported from Photoshop and are editable in Expression Blend:

  • FontFamily

  • FontSize

  • Foreground

  • Underline

  • Subscript (WPF only)

  • Superscript (WPF only)

  • StrikeThrough (WPF only)

  • FauxBold

  • FauxItalic

  • Text

  • AllCaps

  • Left Align Text

  • Center Text

  • Right Align Text

  • AuthoHyphenate (WPF only)

  • RenderTransform (scaling only)

For more information about editable content in Expression Blend, see "Editable content" in the section entitled "Information icons."

Blend modes

To maintain the look and feel of blend modes, merge the related layers. When the related layers are merged, the blending is applied to the rasterized image that is imported for that group.

For more information about merging layers, see "Merge layers" in the section entitled "Information icon" earlier in this article.

Adjustment layers

The following adjustment layers are imported from Photoshop:

  • Brightness/Contrast

  • Black & White

  • Channel Mixer

  • Color Balance

  • Curves

  • Exposure

  • Invert

  • Levels

  • Posterize

  • Photo Filter

  • Threshold

  • Gradient Map

  • Hue/Saturation

  • Selective Color

  • Vibrance

To maintain the look and feel of supported adjustment layers, merge the related layers. When related layers are merged, the adjustment layer is applied to the rasterized image that is imported for that group.

tip noteTip

You can display a larger version of the original image with the adjustment layer applied by hovering the pointer over the thumbnail. You can preview the image as it will import into Expression Blend by selecting or deselecting layers with the associated adjustment layers applied and then viewing the image in the Import Adobe Photoshop File dialog box.

For more information about merging layers, see "Merge layers" in the section entitled "Information icon" earlier in this article.

Layer styles

Importing and editing the Drop Shadow layer style is supported in Expression Blend.

When you import a Drop Shadow Layer style, a DropShadowEffect is applied to the imported object. You can edit the drop shadow effect by selecting the applied DropShadowEffect in the Objects and Timeline panel and editing the properties directly in the Properties panel.

NoteNote

When a Drop Shadow layer style is imported as editable content, the rendering may not match the visual display in Photoshop. When a Drop Shadow layer style is flattened or merged, the rendering matches the display in Photoshop, but is no longer editable.

For more information about the Drop Shadow layer style in Expression Blend, see "Editable content" in the section entitled "Information icon" earlier in this document.

To maintain the look and feel of layer styles that are supported, but not editable, merge the related layers. When related layers are merged, the layer styles are applied to the rasterized image that is imported for that group.

The following layer styles are supported, but not editable, in Expression Blend:

  • Inner Shadow

  • Outer Glow

  • Inner Glow

  • Bevel and Emboss

  • Satin

  • Color Overlay

  • Gradient Overlay

For more information about merging layers, see "Merge layers" in the section entitled "Information icon" earlier in this article.

The following layer styles are not supported:

  • Patter Overlay

  • Stroke

Gradients

Expression Blend supports the importing and editing of linear and radial gradients. All other gradient types are rasterized on import, and are not editable in Expression Blend. Color stops are imported as gradient brushes to the Fill property of the resulting object in Expression Blend, and opacity stops are imported as gradient brushes to the OpacityMask property.

NoteNote

When a linear or radial gradient is imported as editable content, the rendering may not match the visual display in Photoshop. When a linear or radial gradient is flattened or merged, the rendering matches the display in Photoshop, but is no longer editable.

Patterns

A Pattern is imported as Path with the original Fill property mapped to Expression Blend Fill properties applied to an ImageBrush.

For more information about Patterns, see "Editable content" in the section entitled "Information icons."

See also

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft