Working With Expression Design 3
Another option for creating assets for your Silverlight projects, is to use Expression Design. Expression Design is a product that ships with Expression Studio. Expression Design is a vector and raster graphic design tool that can create XAML code (behind the scenes) for the designer which can be cut and pasted, or exported to be used in Expression Blend.
The Expression Design Workspace
If you are an Illustrator or Photoshop user, the interface, and tools are similar, so it is not difficult to create the assets that you need. There are definitely some benefits to creating assets in Expression Design, such as support for effects, like bevels and drop shadows; you will discover more benefits as you progress through the next lesson.
Creating the Paddle in Expression Design
In this section, you will create the paddle that will be used in the Expression Blend project. The paddle will be created using the Rectangle shape tool, and a gradient and a bevel will be applied.
This lesson not only offers the opportunity to build a Silverlight asset in Expression Design, but also the opportunity to learn more about grouping and naming your objects, and how it relates to the import in Expression Blend.
Launch Expression Design 3.
Choose File > New. When the New Document dialog box appears, leave it at the defaults and press OK. Create a new Design document.
Select the Rectangle tool from the Tools panel, then click and drag anywhere on the artboard, creating a rectangle of any size.
Click on Stroke in the Properties panel and look for the Width slider in the Appearance pane of the Properties panel. If the value is not 1, click and drag the value to slider until it is set to 1 pixel. The Properties panel offers options to change the fill and stroke of any selected object. Tip: You can also double-click to activate the textbox, and type the value of 1 into the textbox.
A. Fill. B. Stroke. C. None. D. Last selected color.
E. Gradient color. F. Image fill. G. Type of stroke. H. Stroke width.
You can make adjustments to the size of an object in Expression Design at any time by using the textfields located in the lower left of the Expression Design workspace.
With Stroke still selected, click on a gray (any gray) color in the color pane.
To adjust the width and height of this rectangle shape independently, click the chain icon that is positioned between the W and H textboxes.
Make sure the Link height and width slider is un-linked and enter 117 in the W textbox and 21 in the H textbox, then press the Tab key. Adjusting the size of the rectangle.
Look for the Edit Rectangle pane in the Properties panel, If the value for the corner radius is not at zero, double-click on the value (in the Corner Radius textfield) and type 0 (zero.)
In the Appearance pane in the Properties panel, click Fill, then click the Gradient Color box. A default black and white gradient (or last used gradient) fills the rectangle, which will be referred to as the paddle from this point forward.
Fill the paddle with a gradient.
You can use the Gradient Transform tool to set the angle and direction of a gradient. In this next step, you experiment with using the Gradient Transform tool, before you apply the linear gradient used in this paddle.
Select the Gradient Transform tool from the Tools panel, then click and drag from the center (in any direction and length) across the paddle. Notice that if you click and drag on an angle, the gradient follows that angle. Also notice that when you click and drag a short distance, you have a more abrupt gradient, as compared to when you click and drag a longer distance. Tip: You can click and drag to points outside the shape.
Now, with the Gradient Transform tool still selected, click the bottom of the paddle, then hold down the Shift key and drag up to the top of the paddle. By holding down the Shift key while dragging, you force the gradient to go on a 90 degree angle.
Click and drag while holding down the Shift key.
Choose File > Save or press Ctrl+S to save the file at this point. Keep it open for the next part of this lesson.
SELFPHP
SELFPHP OHG, info@selfphp.de, Impressum, Kontakt