Chapter 7

Creating Design Assets

After completing this chapter, you will be able to:

  • Use Microsoft Expression Design and its tools and panels.
  • Create graphic assets in Expression Design.
  • Export Expression Design assets as Extensible Application Markup Language (XAML) to integrate into Microsoft Expression Blend.
  • Import objects from Adobe Photoshop and Adobe Illustrator.
Designers can create functional and well-thought-out user interfaces for their applications within Expression Blend. But sometimes they want to create something more than a typical interface. Designers have become accustomed to using powerful and rich graphics tools to draw awesome vector assets with full curve control, or enhance existing graphics with a wide array of preset fills, strokes, and gradients. With Expression Blend, you can integrate assets created in other tools, such as Expression Design, Adobe Illustrator, and Adobe Photoshop. The easiest way to integrate graphic assets is from Expression Design. The Expression Design + Expression Blend combination provides simple integration paths because both applications are in the Microsoft Expression Studio family. But you aren’t limited to that combination. There are powerful importers to integrate assets from Adobe products as well. In this chapter, you’ll learn how to integrate assets from all three of those graphics applications.

Using Expression Design

Expression Design 4 is a perfect companion to Expression Blend 4. It’s an easy-to-use graphic design tool for creating and exporting sophisticated vector assets built for Windows Presentation Foundation (WPF)/Microsoft Silverlight applications. Within Expression Design you work with flexible vector manipulation tools, path operators, and shape transformation capabilities to create these assets.

Expression Design 4

Exporting to XAML from Expression Design

You can export your art objects from Expression Design to Expression Blend not only in a bitmapped file format, but also as XAML files suitable for immediate use in Silverlight or WPF projects. This enables you to copy and paste objects from the exported document into another document in your projects. You can also directly copy selected objects from Expression Design to Expression Blend via the Clipboard.

You can export illustrations as:

  • XAML Silverlight 4 / WPF canvases
  • XAML Silverlight 3 canvases
  • XAML WPF Resource Dictionaries
  • .png, .jpg, ;gif, .tiff, .bmp, and WDP (HD Photo) files
  • PSD and PDF files

Exporting from Expression Design

Importing Design Assets from Adobe Applications

Both Expression Design and Expression Blend allow you to import Adobe Photoshop (.psd) and PDF-compatible Adobe Illustrator (.ai) files into your documents. You don’t need to have the Adobe products installed on your local computer to perform these operations. In these exercises, you will learn about the processes.

Importing a Photoshop File to Expression Design

You can easily make this a point to YOUR company OR hide it all together.