Microsoft



| |

Microsoft® Expression® Design

Reviewers Guide

July 2007

For more information, press only:

Haley Pearson,

Waggener Edstrom Worldwide

(425) 638-7000 haleyp@

Rapid Response Team

Waggener Edstrom Worldwide,

(503) 443-7070, rrt@

Microsoft Corp.

One Microsoft Way

Redmond, WA 98052-6399

© 2007 Microsoft Corp. All rights reserved.

The information contained in this document represents the current view of Microsoft Corp. on the issues discussed as of the date of publication. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented after the date of publication.

This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT.

Introduction 1

Introducing Expression Design 1

Expression Design Customer Profile 2

Expression Design Key Messages 3

Overview of Feature Areas 4

Expanded Workflow 4

Flexible Vector Drawing 4

Dynamic Live Effects 4

Innovative Design Environment 4

Hands-on Exercises 5

System Requirements 20

The following hardware and software are required for Expression Design: 20

Introduction

Welcome to the reviewers guide for Microsoft® Expression® Design. The purpose of this document is to assist your evaluation of the product.

The Microsoft Expression family of products is being introduced by Microsoft Corp. to address the needs of those in the professional design community who wish to design and create content based on the Microsoft technology stack.

Whether for the desktop or the Web, the Expression products will allow designers to fully engage with developers to finally bridge the gap in the designer-developer workflow. This will bring together the best minds in design and development to create applications and sites with a focus on great user experience.

It’s a subject that Microsoft is passionate about. Windows Vista® and the 2007 Microsoft Office system are examples of what can be achieved in this space. The combination of the Expression tools for designers with Visual Studio® 2005 for developers will see the birth of a new era in software and Web site development with user experience at its center.

Introducing Expression Design

Microsoft Expression Design is a professional design tool for creating graphics content that can be used within the authoring applications in Expression Studio: Expression Blend and Expression Web.

Expression Design specifically complements Expression Blend with its ability to save graphics in Extensible Application Markup Language (XAML) in a way that is easily incorporated into Expression Blend projects.

A fully featured professional design surface gives the user visual creativity and the assurance that the underlying code being created is clean and purposeful. Users can have confidence that what they see in the design surface is a direct reflection of the final output of the project.

Expression Design Customer Profile

Expression Design will be used by customers worldwide for a wide range of activities within the software design process. These customers will focus on areas of design that fall within these broad categories:

• Application user interface

• Web site design

Application User Interface

These users will enjoy the approach to design that Expression Design offers. The real-time design surface allows them to create vector graphics and layout with confidence and ease. Each stroke of the brush or change of a property made at design time survives with full fidelity into the final product, eliminating wasteful and costly iterations and implementations in the workflow.

Web Site Design

Expression Design can be used to create artwork in all the native Web formats for inclusion in Expression Web-created Web sites.

Expression Design Key Messages

Expand Your Portfolio

Expand your portfolio and collaborate with others who are defining the next generation of software applications. Expression Design is the perfect companion to Expression Blend, letting you quickly build sophisticated vector assets. Then, by way of XAML, you can seamlessly transfer your graphics to your Expression Blend projects.

Designed for Design

Unleash your creativity with innovative vector drawing tools and nondestructive effects that you can apply to either vector or imported bitmapped images. Apply both hard-edged and organic strokes while maintaining the flexibility of vector paths. Expression Design has been built from the ground up, for designers by designers.

Your Vision, Uncompromised

Don’t let your design degenerate when it’s handed off to someone else. Now you can be confident that the look and feel of elements such as a corporate identity or a user interface will be maintained all the way to the final product. Build your assets in Expression Design, export them as XAML and give them life with the interactive features of Expression Blend.

Overview of Feature Areas

Expanded Workflow

Bring your existing vector-based artwork from other popular graphics tools into Expression Design along with JPEG, PNG and GIF bitmapped files. Then export in a wide variety of formats, including XAML code that you can easily use when building next-generation software with Expression Blend. Or seamlessly copy and paste your images into Microsoft Office while preserving the transparency of the image.

Flexible Vector Drawing

Use the powerful vector drawing and editing tools in Expression Design to explore new artistic possibilities and create compelling graphic designs and illustrations. Integrate your vector artwork and bitmapped images in the same document to create hybrid compositions.

Dynamic Live Effects

Take advantage of Live Effects to apply high-quality effects and filters such as Bevel, Emboss and Gaussian Blur to any vector or bitmapped object. Then change the effect or the object with the confidence that Live Effects are always nondestructive and fully editable.

Innovative Design Environment

It’s time to leap into the 21st century with an illustration tool designed by designers for maximum efficiency and minimum fuss. With real-time object formatting, stroke and font galleries and an easy-to-use professional interface, you’ll find yourself building awesome graphics assets in no time.

Hands-on Exercises

A complete walk-through covering most if not all of the features mentioned in this guide has been condensed into a single tutorial. The tutorial will take you through the steps required to create one of the graphics assets contained in the Expression Blend project that forms part of the Expression Blend reviewers guide. That will then be exported into XAML and added to an Expression Blend project.

Create a new document in Expression Design.

• Launch Expression Design.

• Go to the File menu and choose New.

• Make the name for the new document “PhotoSlideIcon.”

• In the New Document dialog box, set a width of 300 pixels and a height of 200 pixels. (Make sure the measurement unit is set as pixels.)

• Set the resolution to 96 px/inch (pixels per inch).

[pic]

Tip: Expression Design offers customizable fields to help you target different graphics scenarios. In the case of the Windows® Presentation Foundation (WPF), the default resolution for all graphics is 96 dpi, so creating your graphics with this resolution from the beginning will save a lot of work later.

We now have a blank document in which we can start creating design elements. The following is the final result, depicting what your icon should look like at the end of the exercise:

[pic]

The steps to achieve this are as follows:

Draw a rectangle.

• Select the Rectangle tool, [pic] available in the Toolbox on the left side of the screen.

• Draw a rectangle in the center of your document, with a proportion similar to the following:

[pic]

Tip: To draw a rectangle, simply click on the area where you wish to place the top-left corner of the rectangle, then drag and release over the area where you wish to place the bottom-right corner of the rectangle. This is much like drawing a window when selecting objects in Windows Explorer.

Set specific dimensions for your rectangle using the dimension fields available in the Action bar on the bottom of the screen.

• Toggle off the anchor located between the Height and Width fields.

• Set the width to 245 pixels.

• Set the height to 160 pixels.

[pic]

Add some color to the rectangle.

• Go to the Appearance panel at the top-right edge of the screen and click on the Stroke tab.

• Click on the None selector to remove any stroke that was applied to the rectangle.

[pic]

• Click on the Fill tab.

[pic]

• Use the Color Picker to select a light gray color.

Tip: You can also type RGB values for a specific color. This gray color’s approximate values are R: 188, G: 188 and B: 188.

[pic]

• Now make a copy of the rectangle by pressing CTRL-C. Then press CTRL-V to paste the new rectangle directly on top of the first one.

Change the size of the second rectangle and add a gradient fill.

• Use the dimension value settings, available in the Action bar on the bottom of the screen, to set the second rectangle to a width of 190 pixels by a height of 140 pixels. We will also set a fill color for this new rectangle; in this case we’ll create a gradient fill.

• Go to the Appearance panel and make sure the Fill tab is selected.

• Click on the Gradient selector.

[pic]

• This will make the Gradient Editor appear.

• Click on the first color stop (at the left); then, using the Color Picker, choose a color close to R: 78, G: 78, B: 78.

[pic]

• Select the second color stop (at the right); then use the Color Picker to choose a black color or R: 0, G: 0, B: 0.

[pic]

• Gradients can be radial or linear. You want yours to be radial, so click on the Radial Gradient button.

[pic]

• The center of the gradient is located in the center of the rectangle by default. We want to move this to the top left of the rectangle. To do this, we will use the Gradient Transform tool.

• In the Toolbox (on the left side of the screen), locate the Fill Transform icon. Click on it and hold to reveal the other tools available. You will see an arrow with a gradientlike icon; this is the Gradient Transform tool. Select the tool.

[pic]

• Now, in your document, draw a line that goes somewhere close to the top-left corner of the rectangle to the bottom-right corner. This line will define the angle and direction of your gradient. To draw the line, simply click the first point of the line (top left) then drag, then release to define the endpoint.

[pic]

• After you’ve used the Fill Transform tool, your gradient will look like this:

[pic]

Let’s go back to our first rectangle, the bigger one with light gray color. We will make the corners of this rectangle rounded.

• Press V to use the Selection Tool, and click over the rectangle to select it.

• In the Properties panel is a section called Edit Rectangle, which contains a Corner Radius field. You could simply type in “10px,” but this is a good opportunity for you to experience the spinner control, which is very intuitive and easy to use. Rolling over the number (value) displayed next to Corner Radius will make this icon show up.

[pic]

• When you see the icon, click on that number and drag up or down. You can spin up or down the radius level and see it updated in your design surface. Spin up to 10 pixels.

Tip: If you do not see the icon shown above, it means you are editing the value using the ”type in” method, which is also useful for the precise adjustment of values. The method simply involves using your keyboard to enter a number. If you wish to go back to Spin mode, click on the Corner Radius label and roll over the number value again; the Spin icon then should show up.

Create some little square-shaped punches on the sides of the rectangle.

To create the appearance of punches or holes in the rectangle, we first need to create a column of squares.

• Select the Rectangle tool in the Toolbox (on the left side of the screen). [pic]

• Set the Corner Radius to 0 pixels (in the Appearance palette).

• Draw a square on the left, light-gray side of the rectangle. Press the SHIFT key, and then drag to draw the square. The SHIFT key will help you draw a square rather than a rectangle. This little square should be about 14 pixels by 14 pixels.

[pic]

• Fill this square with black color. Go to the Appearance panel and select a black hue. If the square has a stroke color, remove it clicking on the None selector.

[pic]

The next step is to make copies of this square.

• Go to the Edit menu (at the top of the screen), and in Options select Units and Grid.

• Look for the Arrangement section in the bottom-right of the dialog box.

• Set a Nudge Increment of 11 pixels and press OK.

• Select the little square, and press CTRL-C and then CTRL-F to make a copy of the square.

• Press the DOWN ARROW key two times; the new square will move exactly 22 pixels (two nudges of 11 pixels each) below.

• Repeat these steps so you end up having five little squares, all lined up in a column.

[pic]

• Select all the little squares.

• Click on the first square at the top, then press and hold the SHIFT key and click on the subsequent squares until they are all selected.

• Press CTRL-G to group the squares.

Now we need to make a copy of these squares and place them on the right side of the Photo Slide.

• With the group of squares selected, press CTRL-C and then CTRL-F. Use your arrow keys to move the new group to the right side. If you wish to move this group with more precision, press and hold the CTRL key while you move the object little by little. You can also move this object using your mouse.

[pic]

Subtract these small squares from the main rectangle to create real holes in the geometry.

• Select both groups containing the squares. Click on the first group, then press and hold the SHIFT key and click on the second group. While still holding the SHIFT key, click on the main rectangle (the light gray one).

• In the Object menu, go to Path Operation (at the bottom of the list) and select Back minus Front.

• Press CTRL-[ to move the rectangle to the back of all the other objects.

• The squares have now become actual holes in the rectangle.

[pic]

Finally, let’s create a shadow underneath our object.

• Select the light gray rectangle and make a copy of it by pressing CTRL-C and then CTRL-F.

• Using your arrow keys, move this new copy a little bit to the right and a bit down. To move the object little by little, hold the CTRL key while pressing your arrow keys.

• Press CTRL-[ to rearrange this rectangle and place it in the back.

[pic]

Finally, group all the objects into a single one.

• Press V (the Selection tool) or select it in the Toolbox, then draw a selection window around all the objects you’ve created so far.

• Press CTRL-G to group them together.

The final step to complete the icon is to create some copies of this Photo Slide and rotate them so they look more dynamic.

• Scale down the Photo Slide to about one-third of its size. Press and hold the SHIFT and ALT keys while dragging the top-left Transformation control to make the Photo Slide scale down evenly and to the center of the document.

[pic]

• Rotate the Photo Slide. Click and drag any of the rotation control points around the object.

. [pic]

• Make two more copies of the Photo Slide. Select the Photo Slide and press CTRL-C and then CTRL-F. Move the new copy under the original object using your keyboard a couple of times, and then press CTRL-[ to send the new copy to the back. You can also go to the Arrange menu > Order > Send to Back. Repeat these steps to create a third copy.

[pic]

• Select all three copies of the Photo Slide and group them together pressing CTRL-G.

Your icon is ready. The next step is to export it into XAML so you can share this design asset with other designers and developers, or to simply take it into Expression Blend to incorporate it into a bigger project.

• Go to the File menu and select Export. Go to your desktop and type in the name of the new XAML file you will create: PhotoSlide.xaml. Then click on Save.

• In the Export XAML dialog box, expand the Document format panel and select Canvas. Expression Design provides several ways for you to export XAML. In this case, we will select Canvas so we can preserve our Photo Slide as editable geometry once we take it into Expression Blend. Canvas is a great XAML export method if, for instance, we wish to animate the Photo Slides or make them change color or convert them into a button.

[pic]

On the left side of the dialog box you can see a preview of your design asset. The preview shows the way the asset will look when being rendered by WPF, so it’s useful to make adjustments or decisions early in the process. Click OK to export your asset.

Open an existing WPF project in Expression Blend.

• Launch Expression Blend.

• Go to File menu and select Open Project.

• Go inside the PhotoViewer_Final folder and select the photo3.csproj file, and then choose Open.

• Press the TAB key to hide the palettes and get a full-screen view of the user interface of this PhotoViewer application.

Import the Photo Slide icon you previously created in Expression Design.

• Press the TAB key to reveal the hidden palettes.

• In the Project panel, look for the Files list. Right-click the photo3 project element at the top of the list and select Add Existing Item.

[pic]

• Browse to your desktop and choose the PhotoSlides.xaml file you created in Expression Design. Click on Open. The PhotoSlides.xaml file will show up in the File list in Expression Blend.

• Double-click on this file to open it, and you will see the same icon you created in Expression Design now available here in Expression Blend.

• Select the Group that contains your icon using the Tree view. Click on it to select it. It will show a gray background, which indicates it is now selected.

[pic]

• Press CTRL-C and then navigate to your main window, clicking on the Window1.xaml document tab at the top of the screen.

[pic]

• Right-click the Grid inside the main window in the Tree view, and select Paste.

[pic]

• Press the TAB key to hide the palettes in Expression Blend, or scroll to the left of the workspace area using the horizontal scroll bars, and locate your Photo Slide icon.

• Move the icon using the mouse or keyboard, and position it according to this image:

[pic]

Test the application by pressing F5.

The vector-based icon you created in Expression Design is now part of a full WPF experience created in Expression Blend.

[pic]

It is hoped that these exercises have helped to introduce you to the many and varied design options within Expression Design. This reviewers guide touches on only some of the features, and you are encouraged to explore the program.

System Requirements

The following hardware and software are required for Expression Design:

• Windows XP Service Pack 2 or later or Windows Vista (all editions)

• PC with 1GHz or faster processor

• 512 MB of RAM or more

• 800 MB of available hard disk space

• Support for Microsoft DirectX® 9 graphics with the following:

– Windows Display Driver Model driver

– 128 MB of graphics memory (minimum)

– Pixel Shader 2.0 in hardware

– 32 bits per pixel

• DVD-ROM drive

• 1,024×768 or higher-resolution monitor

Actual requirements and product functionality may vary based on system configuration and operating system.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download