Wednesday, 20 February 2013

How do you convert an Adobe Illustrator file into a XAML resource dictionary with Expression Design?

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 convert an Adobe Illustrator (ai) file into a XAML resource dictionary with Expression Design.


You can read the transcript below.


HTML5 player




Transcript


 


In this video, I am going to show you how simple it is to convert an Adobe Illustrator (ai) file into a XAML resource dictionary with Expression Design.

In projects for apps such as WPF, Silverlight, Windows Phone and Windows Store, resources such as brushes and styles can be stored in resource dictionaries which are XAML files that perform a similar purpose to CSS files in web applications.

Quite often, assets are created by designers using Adobe Illustrator. These assets are of more use to us as 2D vector graphics defined in XAML rather than (ai) files.

In order to create a XAML resource dictionary from an Adobe Illustrator (ai) file, you need Expression Design. Expression Design is part of Expression Studio which contains, Expression Design and Expression Blend. It also contains Expression Encoder which is  powerful video encoding software, particularly useful to Silverlight developers and then there is Expression Web which is a simple web authoring tool.

So here is the process.

In Expression Design, you need to create a new document.

The dimensions are not important as it is simply a requirement to be able to import an Adobe Illustrator (ai) file. So I'll just click OK here.

Once I have a document, I can select Import Adobe Illustrator File from the File menu.

As Expression Design imports the (ai) file, I am warned that any text elements are converted to paths.

Expression Design has identified all of the graphical elements in the (ai) file.

Now, all I want is the bike on the left so I will select it. I could of course have selected all three bikes. The rest of it is of no interest to me.

Before I export the selected asset, I will click on the File menu and select Crop Marks and then From Bounding Box. This allows me to specify a border around the selected shape.

I don't need any border so I'll just click OK.

As you can see, Expression Design has placed a box around the selected bike.

Something else to notice here is that part of the second bike appears within this space.

Don't worry about that, Expression Design will know that this is part of another element and not to include it.

Now that my required asset is selected, I can select Export from the File menu.

A preview window has appeared showing the graphic to be exported. As you can see, the wheel of the second bike is not included.

Now, Expression Design assumes that I want to export this as a (png) file which of course, I don't.

I want to export it as a Resource Dictionary.

You will notice that the list says WPF Resource Dictionary. Well, in this context there is very little difference between the syntax for a Resource Dictionary in WPF and other XAML using applications such as Silverlight, Windows Phone or Windows Store.

Just because Expression Design doesn't mention them, doesn't rule them out.

So I'll go ahead and click the Export All button and it has been exported.

Now I could export each bike in turn but I would probably want all three of them in the same Resource Dictionary. That's fine but I would space them out before doing so, so that no overlapping occurred in the resulting UI. i.e. the second bike wheel appearing in the first bike's image.

Let me go and look for my exported Resource Dictionary.

If I open my Demo folder, you will see that a XAML file has been created.

Let me open it up in Notepad.

You can see in the XAML that it contains a ResourceDictionary element. And that in turn contains the exported bike which is represented here as a DrawingBrush.

 

There you have it.

In this video, I have shown you how easy it is to convert an Adobe Illustrator (ai) file into a XAML resource dictionary with Expression Design.

I'll produce some more videos showing how to add a XAML resource dictionary to your project in Expression Blend and Visual Studio, just as soon as I have uploaded this one.
 

Flash player






See you soon

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



25 comments:

  1. Great blog! I really love how it is easy on my eyes and the information are well written. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your feed which really should do the trick! Have a nice day! We provide you online help and support.Call us at Our toll free +44-800-098-8579 Adobe customer care Number UK.

    ReplyDelete
  2. It is great to completing editing or multi-media related work with Adobe applications, yet these applications show some tech issues too and to resolve that, you should talk to the technical experts at Adobe Support Number UK & Adobe Contact Number UK

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Getting tech complication in using Adobe in your system, so you need the correct assistance from our experts of Adobe Support Number UK & Adobe Contact Number UK to resolve that quickly.

    ReplyDelete
  5. You can take help from our team of tech experts to resolve your Adobe issues by dialing Adobe Contact Number UK, Adobe Helpline Number UK.

    ReplyDelete
  6. This can include voice, play or record music, view videos, play video games--etc. Other examples of application software include permitting access to the internet and printing documents. Getintopc

    ReplyDelete
  7. This blog is so rational. Left its readers stun.
    docshifter

    ReplyDelete
  8. if you have any problem related to the apple airport router then they can contact us.
    apple airport router customer service

    ReplyDelete
  9. many people are facing problen in their us browser they people can contact us we are here to provide the complete solution about the asusu router support.
    uc browser customer support

    ReplyDelete
  10. you have shared the good post obn your site thanks for sharing.
    cisco router customer support

    ReplyDelete

  11. Wow Very Nice Information Thanks For Sharing It.
    Getintopc

    ReplyDelete
  12. Nice Information Thanks For Sharing It.Really Thanks
    Getintopc

    ReplyDelete
  13. if you have any problem related to the apple airport router then they can contact us.
    filehippo

    ReplyDelete
  14. if anyone of having any problem related to the router you can contact us.
    d link router customer support

    ReplyDelete
  15. There are millions of people that navigate the internet on a daily basis, precariously venturing around for downloadable software. However, before you engage in downloading any means of software from a site you need to ensure that the site is safe
    getintopc

    ReplyDelete
  16. Get Here if you want download pc games free you are right now check here oceanofgames

    ReplyDelete
  17. I am really impress with you for the selecting of new and unique topic and also well written article on it. Thanks for sharing with us.
    filehippo
    file hippo
    File hippo
    Download Free PC Software
    File hippo

    ReplyDelete
  18. if you have any problem in AOL then you can contact we are here to povide the support related to AOL.
    AOL customer support

    ReplyDelete
  19. if you have any problem in AOL then you can contact we are here to povide the support related to AOL.
    AOL customer support

    ReplyDelete
  20. Action Pc games are loved by tons of its players all over the world. Knowing the basics regarding Action games can make your experience even more fun and exciting. Ocean of Games

    ReplyDelete
  21. Nice Blog Post.Thanks For Sharing It.

    ReplyDelete
  22. I appreciate several from the Information which has been composed, and especially the remarks posted I will visit once more.  Getintopc

    ReplyDelete