October 5th, 2009

Importing artwork from other tools into Blend

There are a number of ways to import artwork and graphics into Expression Blend 3. The 3 main options are through:

Expression Design

Adobe Photoshop

Adobe Illustrator

All 3 routes allow vector shapes, element names and Text to be brought through safely. When importing text, remember the end result will still be limited to Silverlight’s Text limitations which include ‘line spacing’ or ‘leading’. Unfortunately there is no native way to export graphics back out from Expression Blend short of using methods like ‘Screen Shot’.

Expression Design

This is the safest route in my opinion. If you use Expression Design to create your artwork then you can be sure that what you have drawn will be what you get when brought through to Expression Blend.

How to import:

Copy and paste from Expression Design to Expression Blend

Export specific items in Expression Design and export as a XAML file. Then right click on your project in the ‘Projects’ tab in Expression Blend, click ‘Add existing item…’ and find the exported XAML file.

The key benefits are:

Ability to copy and paste graphics from Expression Design to Expression Blend

Shadow effects and Blur effects both come across into Expression Blend

Adobe Photoshop

A lot of people might not have the time to spend learning yet another application or may just feel they want to harness the power of a tool like Adobe Photoshop. With the launch of Expression Blend 3, there is now an option to import PSD files.

How to import:

Save your Photoshop file as a PSD. Inside Expression Blend click on ‘File > Import Adobe Photoshop File…’ and select your PSD file. Now you will have the ability to turn off / on layers to import before clicking the ‘OK’ button.

Save your Photoshop graphics as either JPGs or PNGs. Inside Blend, right click on your project in the ‘Projects’ tab, click ‘Add existing item…’ and find the exported JPG or PNG file. This method will not bring through any editable elements.

The key benefits are:

Adobe Photoshop is very powerful at creating imagery, but be careful, only the ‘Drop Shadow’ effect under ‘layer effects’ will actually come through as an editable element.

Adobe Illustrator

A lot of people are already skilled in using Adobe Illustrator and may not want to learn yet another Vector based design package. With the launch of Expression Blend 3, there is now an option to import Adobe Illustrator files.