Import an Adobe Photoshop file

By importing your Adobe Photoshop files into your Blend for Visual Studio 2012project, 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 Blendprojects 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, point to Import and 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.

   

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  appears next to a layer, review the information by hovering the pointer over the 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

       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 Blend. For more information, see "Editable content" in the section entitled "Information icons."

       Note

       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

       The merged or flattened layers will import as a single rasterized image. Merged or flattened layers are not editable in 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.

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

Note

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

Layer options and tools

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.

Layer structure and groups

The layer structure and groups that you created in Photoshop are preserved. Groups are easily identified by the Expand  and 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.

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."

Note

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 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 Blend.

Information icon

If the 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 Blend.

Note

If a group contains a layer that contains a feature that is not supported in 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 Blend. You can modify the appearance of the content in Blendby modifying the object properties.

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

Photoshop element	Blend element (XAML)	Description
Text layer	TextBlock	A Photoshop Text Layer is imported as a TextBlock  with the original Photoshop Text properties mapped to BlendText properties. Text properties are located in the Text category of the Properties panel. Note For more information about working with TextBlock objects in WPF and Silverlight projects, see Add an object to the text flow in Blend.
Shape layer	Path	A Photoshop shape layer is imported as a Path with the original vector mask properties mapped to 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 BlendColor and OpacityMask properties applied to a Solid color brush . 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 BlendLinear gradient brush  properties applied to a Gradient brush . 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 Blend Radial gradient brush  properties applied to a Gradient brush . 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 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  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. Note 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. Note 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. Note 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.

  Note

  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.

Note

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  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."

Tip

Hover the pointer over the 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.

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.

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

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

Photoshop feature support in Blend

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

Text styles

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

The following text styles are imported from Photoshop and are editable in 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 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

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

Note

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 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 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

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

Note

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 Blend Fill properties applied to an ImageBrush.

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

See Also

Concepts

Inserting images and art

Import an Adobe Photoshop file

Other Resources

Drawing objects