Many graphic designers are comfortable with using Adobe Photoshop or Illustrator. When designing an interface, you might find yourself duplicating efforts if creating your designs first in Adobe Photoshop and then again in Expression Blend. But with the introduction of Expression Blend 3 comes the ability to import Photoshop files directly into your project, allowing you to create designs in a product you are familiar with and not have to start from scratch when applying it to your Silverlight or WPF application. Expression Design has always had the ability to import Illustrator files. By allowing you to now import both Illustrator and Photoshop files directly into your blend project, Microsoft has supplied the tools to fast track your designs from concept to working application.
To import a file, it’s as easy as starting a project. Select File > Import Adobe Photoshop file and navigate to your file. You are presented with information about the file and asked how you would like Blend 3 to format the file in your project.
Generally Blend takes your groups from Photoshop and creates a canvas to contain these objects. It gives you the ability to include or remove objects from the file, add a compatibility layer (a snap shop image of the original file for your reference), merge certain layers, and some options for each layer (example: Text can be shown as text, a path, or a bitmap).
The compatibility layer is a great way to reference the original image for colour and detail. Use the colour picker with the compatibility layer to set all your objects to their correct state again.
Note: Each layer has an image that shows what’s on the layer plus a small icon next to it to show whether it’s a Text object, a path, or an image.
The Photoshop import does not include some of the blending effects and gradients from the file, so on the initial import your image may look a little less detailed than what you have created in Photoshop.
Hovering over the import icon (
) on some layers in the import tool displays some information about parts of the design Blend was unable to import (such as composite blending and other layer effects).
So even though you are not getting exactly what you have created in Photoshop, you can reuse the paths and layouts you created in Photoshop with only some simple changes.
Tip: Take the time to name your layers when designing in Photoshop because these will be imported as well.
Note: Don’t forget to embed other fonts you used in your Photoshop design. Select a textbox with the font, go to the Text section of the properties panel, and click the embed check box.
About the Author
Alex Knight
Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs a Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:AGKDesign.twitter | xamling.net
