Venture into Gaming Using Expression Blend: Module 1

Organizing and Importing Assets into Expression Blend

Working with assets from other applications, then importing them into Expression Blend makes it easy to create professional and polished user interfaces. In this module, you find out how to import assets already created in applications such as Adobe Illustrator, Photoshop, and Expression Design.


Vector vs. Raster
Before jumping into this module, note that Expression Blend supports both Vector and Raster graphics.


     
                Vector Graphic.                        Raster Graphic.


Even though both Adobe Illustrator and Adobe Photoshop can support both raster and vector graphics, there are definitely some differences that you need to note.

Vector objects are geometry-based shapes and lines with editable lengths, widths, locations, and colors. They are resolution-independent. This means the quality of the image is dependent upon your output resolution, rather than a predefined resolution. Vector objects can be scaled in size without degrading the quality of the image.

Raster images, such as one created in an application like Photoshop, has a pre-defined resolution. A raster image is made up of pixels, which are not mathematically redefined as you scale the image. This, of course, can lead to degradation of your file if enlarged or scaled beyond a safe range of 50% smaller to 110% larger.


Importing From Photoshop
In the first part of this module, you will import a layered native Photoshop file into Expression Blend.

1. In Expression Blend 3, choose File > New Project > New Silverlight 3 Application + Website.
2. Before pressing OK, make sure that you type sl0101_work into the Name text box, then use the Browse button to navigate to the gaming_guide_assets folder that you copied onto your harddrive. Open the gaming_guide_assets folder, then select the module01_assets folder. Press Select Folder. The initial Expression Blend artboard appears.

Understanding the Default Canvas Size
When you created this new project, the canvas defaulted to the size of 640 pixels by 480 pixels. For this project, the size needs to be slightly larger, in order to hold our imported images.

1. Locate the Objects and Timeline and click the second [UserControl].
   
   
   Change the UserControl to be larger.
2. Click the Properties tab to make the attributes of the UserControl visible.
3. In the Layout Pane (in the Property’s panel), click and drag the numerical value in the Width textfield to 800 pixels.
4. Click and drag the value in the Height textfield to be 600 pixels.
   Tip: You can type in your values by double-clicking on the value in the textbox, then typing the new value.