This post is part of a string of posts found here: Learn Blend in a Month.

Blend supports gradients on onjects, strokes and text. To add a gradient to an object, first select the object you want to add it to, then go to the ‘Properties‘ tab. Under the ‘Brushes‘ section, select whether you want to effect the Fill (1) or the stroke (2) property, then choose the gradient icon (3). See image below for references.

1. Select fill
2. Select stroke
3. Fill type: Gradient
4. Fill type: None
5. Fill type: Solid
6. Color palette
7. Gradient stops
8. Select linear gradient
9. Select radial gradient
10. Reverse gradient stops
11. Select gradient stop
12. Position selected gradient stop

The default number of colors in a gradient is two. To add more gradient stops click anywhere along the color bar (7). To remove a gradient stop, click and drag the gradient stop off the color bar.

You can choose between ‘Linear‘ (8) and ‘Radial‘ (9) gradients by pressing the relevant icon in the bottom right of the ‘Brushes‘ options.

You can reverse all the colors by pressing the ‘Reverse‘ (10) icon to the right of the radial (9) button.

You can fine tune the positions of each gradient stop by using the ‘Gradient stop selector‘ (11) and the ‘Position bar‘ (12).

Change the angle, start position and end point of a gradient

Select the ‘Gradient Tool‘ on the main tool bar.

Now click on the item you want to edit and you should get an arrow tool appear like below.

The arrow tool shows the start and end point of the gradient and all the gradient stop colors and positions. The tool can be dragged and positioned to tweak your gradient. To rotate the gradient, move the mouse just past either end of the arrow until you get the rotate icon, then click and drag to rotate.

You can also use the ‘Gradient Transform‘ tool to fine tune your gradients look. Hold the mouse down on the ‘Gradient Tool‘ in the main tool bar and then select the ‘Gradient Transform‘ icon to switch modes.

Now select the object you want to effect and you will get a visual representation of the gradients boundaries to transform.

This post is part of a string of posts found here: Learn Blend in a Month.

Although Expression Blend is not as powerful as Expression Design, Adobe Photoshop or Adobe Illustrator, it does have a range of basic drawing tools…

Drawing tools

There are two basic options for drawing, Pen or Pencil.

Pen

The ‘Pen‘ tool is a point and click path creating tool. To create a curved point, click and drag the mouse until the desired angle is right.

The ‘Pen‘ tool can also be used to add and remove points to an existing path.

To add a curve to an existing path, hold down the ‘Alt‘ key and then click and drag a part of the path. To change a curved path back to a straight path, hold down the ‘Alt‘ key and click on the Point that has the curved path.

To move a path between two points, hold down the ‘Ctrl‘ key and drag any line between two points in the path.

Pencil

The ‘Pencil‘ tool is a click and drag drawing tool, after the user lets go of the mouse the line gets automatically converted into a path.

Shape tools

There are three types of drawing tools, ‘Rectangle’, ‘Elipse’ and ‘Line’.

Rectangle

The ‘Rectangle‘ tool draws rectangles and squares as you would expect.

To keep the height and width equal (to create a square), hold down the ‘Shift‘ key while drawing.

To keep the rectangle centred upon the mouse, hold down the ‘Alt‘ key while drawing.

To add curved edges to your rectangle, go to the ‘Properties‘ tab and uncollapse the ‘Appearance‘ options. Change the values of ‘RadiusX‘ and ‘RadiusY‘ to add rounded corners to your rectangle. Alternatively, if you select a rectangle, you can use the handles highlighted on the top left to drag and create curved corners (holding the shift key unlocks the X and Y).

Ellipse

The ‘Ellipse‘ tool draws ellipses and circles as you would expect.

To keep the height and width equal (to create a circle), hold down the ‘Shift‘ key while drawing.

To keep the ellipse centred upon the mouse, hold down the ‘Alt‘ key while drawing.

Line

The ‘Line‘ tool draws straight lines as you would expect.

To keep the line you are drawing locked to fixed angles, hold down the ‘Shift‘ key while drawing.

To keep the line centred upon the mouse, hold down the ‘Alt‘ key while drawing.

Color tools

To change colour settings and access the color palette, first select the item you want to change, then go to the ‘Properties’ tab and open up the ‘Brushes’ and ‘Appearance’ areas.

Here you can change the Fill, Stroke and Opacity settings. The screen shot above shows an Opacity Mask set using a gradient going from 0% to 100%.

This post is part of a string of posts found here: Learn Blend in a Month.

There are a number of ways to import artwork and graphics into Expression Blend 3. The 3 main options are through:

• Expression Design
• Adobe Photoshop
• Adobe Illustrator

All 3 routes allow vector shapes, element names and Text to be brought through safely. When importing text, remember the end result will still be limited to Silverlight’s Text limitations which include ‘line spacing’ or ‘leading’. Unfortunately there is no native way to export graphics back out from Expression Blend short of using methods like ‘Screen Shot’.

Expression Design

This is the safest route in my opinion. If you use Expression Design to create your artwork then you can be sure that what you have drawn will be what you get when brought through to Expression Blend.

How to import:

• Copy and paste from Expression Design to Expression Blend
• Export specific items in Expression Design and export as a XAML file. Then right click on your project in the ‘Projects’ tab in Expression Blend, click ‘Add existing item…’ and find the exported XAML file.

The key benefits are:

• Ability to copy and paste graphics from Expression Design to Expression Blend
• Shadow effects and Blur effects both come across into Expression Blend

Adobe Photoshop

A lot of people might not have the time to spend learning yet another application or may just feel they want to harness the power of a tool like Adobe Photoshop. With the launch of Expression Blend 3, there is now an option to import PSD files.

How to import:

• Save your Photoshop file as a PSD. Inside Expression Blend click on ‘File > Import Adobe Photoshop File…’ and select your PSD file. Now you will have the ability to turn off / on layers to import before clicking the ‘OK’ button.
• Save your Photoshop graphics as either JPGs or PNGs. Inside Blend, right click on your project in the ‘Projects’ tab, click ‘Add existing item…’ and find the exported JPG or PNG file. This method will not bring through any editable elements.

The key benefits are:

• Adobe Photoshop is very powerful at creating imagery, but be careful, only the ‘Drop Shadow’ effect under ‘layer effects’ will actually come through as an editable element.

Adobe Illustrator

A lot of people are already skilled in using Adobe Illustrator and may not want to learn yet another Vector based design package. With the launch of Expression Blend 3, there is now an option to import Adobe Illustrator files.

How to import:

• Save your Adobe Illustrator file as an AI file. Inside Expression Blend click on ‘File > Import Adobe Illustrator File…’ and select your AI file.
• Download Mike Swansons AI>XAML plug-in for Adobe Illustrator and follow his instructions.

The key benefits are:

• Adobe Illustrator is a very powerful vector drawing tool, but be careful when using effects like blur and shadows as they won’t come through as native effects in Expression Blend.