Wednesday, 20 February 2013

How do you import an Adobe Illustrator (ai) file into Expression Blend?

This another in a brand new series of videos that I am producing for my new YouTube channel HowDoYouDoStuff.

A channel dedicated to short videos on how to do stuff.

In this video, I am going to show you how simple it is to import an Adobe Illustrator (ai) file into Expression Blend.
You can read the transcript below.

HTML5 player



In this video, I am going to show you how simple it is to import an Adobe Illustrator (ai) file into Expression Blend.

It's pretty common to have designers supply you with assets such as logos that they created in Adobe Illustrator. For you to use these assets in your WPF, Silverlight, Windows Phone or Windows Store apps, then you need to import them into your project.

Now I have a WPF project open here but the process will be the same no matter what kind of project you are working with. Just as long as the UI is represented in XAML.

The import couldn't be easier.

You just click on the File menu and select Import Adobe Illustrator File.

In the dialog, locate and select an (ai) file.

When you click the Open button, Expression Blend will import the contents of the (ai) file and convert them into XAML.

If I expand the nodes in the Objects and Timeline window, you can see all of the elements.

The top two elements are canvases that contain the remaining elements.

The remaining elements are Paths and if I click each one in turn, you will see each of the bike images selected at some point.

Let me click on the XAML button to reveal the mark-up.

All of this XAML was generated when I imported the (ai) file.

One of the key factors with UI represented with XAML is that of 2D vector graphics.

These elements will scale very well which is important when you are creating UI for a wide number of devices and screen sizes.

Now although the entire contents of the (ai) file have been imported, perhaps I only require the three bike silhouettes.

So I'll select those three elements in the Objects and Timeline Window and cut them to the Clipboard.

As for the rest of it, I'll simply delete it.

I can now paste back the three elements into my LayoutRoot grid control.

How simple is that?

Now then. I want to show you something that we can do with an asset produced in XAML and I only need one bike to do it.

I'll delete these two bikes here.

Now look at this remaining bike in the XAML view.

It is a XAML Path element.

Consequently, the shape produced is produced in 2D vector graphics and so scales well.

Let me contrast that with an identical image file.

I'll add an existing (jpg) image to the project and then drag it onto the design surface.

Now look. The images look the same but in fact, the one that I have just added is an image file output using an Image control, whilst the original bike is actually a Path element.

Now I have already mentioned that our Path will scale well but as it is a FrameworkElement, we can actually apply colour to it.

It has a Fill property. And I can set that property to any colour I like. Perhaps even at runtime.

We could use a variety of brushes such as a RadialGradiantBrush  and set various GradientStops to assorted colours. We could even apply VideoBrushes. Something you couldn't do with a (jpg) file displayed in an Image control.

So here's the workflow. Your designer creates the graphical assets in Adobe Illustrator and hands you the (ai) file. You take this file and import it into your project. Once you have pruned any unwanted elements, you are free to use the remaining assets any way you wish.

There you have it.

In this video, I have shown you how easy it is to import an Adobe Illustrator (ai) file into Expression Blend.

I'll produce some more videos dealing with XAML resources just as soon as I have uploaded this one.

Flash player

See you soon

Phil Stirpé
"I don't do average!"


1 comment:

  1. It's really amazing post. I have never seen such wonderful attractive logo design ubiquitous & omnipresent. logo design expert