A small lesson - how to draw the cloud button by using Expression Design.

1. On the File menu, click New.

2. Click OK in the New Document dialog box.

3. Select the Ellipse tool from the Toolbox panel and drag it to the center of your document.

4. If they’re not already unlinked, unlink the width and height sliders on the Action Bar for the ellipse. Set the width to 50, the height to 50, the horizontal position of the pivot point (X) to 300, and the vertical position of the pivot point (Y) to 200.

By default Expression Design draws your ellipse with the last-used background and stroke parameters.

 

5. Set the Fill color to #0096FF and the Stroke color to None in the Appearance category of the Properties panel.

6. From the Edit menu, select Copy, or press CTRL+C. Also from the Edit menu, select Paste In Front, or press CTRL+F.

Expression Design creates a second ellipse in front of the first.

 

7. Set this second ellipse’s width to 60, height to 60, the horizontal position of the pivot point (X) to 330 and the vertical position of the pivot point (Y) to 190.

8. Press CTRL+C and then CTRL+F to create a third ellipse. Set the horizontal position of the pivot point (X) to 360 and the vertical position of pivot point (Y) to 200 for this third ellipse.

 

9. Press CTRL+C and then press CTRL+F once more. Set the width of this fourth ellipse to 50, the height to 50, X to 350 and Y to 215.

10. Press CTRL+C and then press CTRL+F to create a fifth ellipse. Set its X position to 320, its Y position to 220.

After this operation you should have five ellipses arranged in a cloudlike shape.

 

11. Select all the objects by pressing Ctrl+A, or click All on the Select menu. Choose the Unite option from the Path operations of the Action Bar panel. The selected objects become one united object.

 

12. Click the Fill tab of the Appearance category in the Properties panel.

13. Click the Gradient swatch in the Fill Type section. At the bottom of the Color Picker, click the black gradient stop to select the gradient bar and set its Hex value to #00B6FF.

14. Click the white gradient stop to select the gradient bar and set its Hex value to #B6EAFF.

The colors of your cloud object become more natural and less toy-like.

 

Next you will transform the gradient filling of the cloud.

15. In the Toolbox, select the Gradient Transform tool. Position the pointer near the top part of the cloud object, which will be the gradient's starting point. Drag it to the bottom part of the object and release the mouse button. This will be the gradient's ending point.

The cloud will fill with a vertical gradient.

TIP Hold down the SHIFT key when you drag so the angle is constrained to a vertical angle.

 

16. Press CTRL+C and then press CTRL+F with the cloud object selected to copy it.

17. Select Scale as Percentage from the Transform Options menu to display the width and height parameters as a percentage of the object.

The Transform Options menu provides options on how information is displayed on the actions you take.

 

18. Set the width and height to 90% so your second cloud object becomes a little bit smaller.

 

19. Change the gradient filling for this object so it ranges from #FFFFFF (white) to #FFFFFF (white).

20. With the right gradient stop still selected, adjust the transparency at this point of the gradient to 5% by using the Stop Alpha slider.

This gradient stop point becomes almost completely transparent.

21. Select the Ellipse tool in the Toolbox and drag it to the center of your document.

22. Unselect Scale as Percentage from the Transform Options menu.

 
23. Set the width to 150, the height to 130 for the newly created ellipse, and then set its X to 355 and Y to 265.

24. Hold down the SHIFT key and click the smaller cloud object to select it. You now have two objects selected.

 
 
25. Choose the Back Minus Front option from the Path operations of the Action Bar panel.

The shape of the front object is cut out of the back-most object.

 

26. In the Toolbox, select the Gradient Transform tool. Position the pointer near the top part of the offcut cloud object, drag it vertically to the bottom part of the object and release the mouse button.

The fill looks like glass now.

27. Select the back cloud object. Press CTRL+C and then press CTRL+F.

 

28. Select Scale as Percentage from the Transform Options menu and set the width to 80%, height to 10% and the Y position to 270.

The form of this object looks like a shadow under the cloud, but you’ll want to set a better color for the shadow.

 
29. Change the gradient filling for this object to solid and set its Hex value to #2B5574 and Opacity to 30%.

 

30. Click All on the Select menu to select all objects.

31. On the Arrange menu, click Group, or press CTRL+G to group the selected objects.

32. Double-click the name of this group in the Layers panel. Type the new name cloud and then press Enter.

 

 

33. On the File menu, click Save. Type the file name Cloud in the dialog and then click the Save button.

You have finished your cloud button. You can export your art objects to Expression Blend by using the Export dialog from Expression Design.