Expression Design makes creating a sphere quite easy. Below is a blue sphere with a shadow that was quite simple to make and that you can make by following this short post.

What you will learn

• Using the ellipse tool
• Gradient and basic manipulation and movement of the gradient
• One possible way to create a shadow

Step 1 – Create a new Expression Design document

1. Open Expression Design and click File | New.
2. Name the file BlueSphere.design (or whatever name you would like).
   Note: I used a custom width and height of 250 x 125, and left the resolution at 96.
3. Click OK.

Step 2 – Create the sphere

1. Select the Ellipse tool from the ToolBox (which is on the left by default but you can move it wherever you want).
   Note: If you cannot find it, try pressing “L” as that is the shortcut key.
2. Draw a circle on the screen while holding down the shift key(the shift key is what tells Expression Design that you are looking for a perfect circle and not an ellipse).
   Note: The width and height of my circle was 83.25 x 83.25.
3. With the circle selected, go to the properties tab.
4. Under Appearance, click the Fill tab.
   Note: Hold your cursor over the tab and it will tell you which tab is the Fill tab and which is the Stroke tab.
5. Change the color to blue for now. We will apply gradient in the next step.
6. Click the Stroke tab.
7. Under the Stroke tab and all the way under the color picker, look for a drop down menu. (By default this menu has an image of a black line but can have many options.)
8. Change it to No Stroke.
9. Change the Stroke Width to 0 px.

Step 3 – Create the gradient effect

The gradient effect is what makes a circle on a screen look like a sphere.  It is what makes the circle appear to fade from white to dark blue.

1. Make sure the circle is selected and go to the Properties tab.
2. Under Appearance, click the Fill tab.
3. Select the Gradient option.
   Note: It is the bottom left of the four boxes just left of the color boxes. Once you click this, you will have a gradient bar.
4. To the right of the gradient bar, there are two gradient options: Linear Gradient, Radial Gradient. Choose Radial Gradient.
5. On the gradient bar, you should see two markers (squares with a triangle on top).  Click the left marker and set the color to white.
6. Click the right marker and set the color to blue.
   Note: I used color #153FC4.
7. Just below the Linear Gradient, Radial Gradient option, there is a drop down that allows you to “Move, scale, rotate or skew the fill of the object”. Click it.
8. Change X and Y to 12 px.
   Note: This moves the center of the gradient up and to the right, leaving a part of the sphere on the bottom left without a gradient.
9. Change Width and Height to 135%.
   Note: This makes the gradient area larger fixing that the part on the bottom left that was left without the gradient when we moved the gradient up and to the left.

Step 5 – Create the shadow

In case you don’t want a shadow, this is a separate step you can choose to do if you want.

1. Select the Ellipse tool from the ToolBox.
   Note: Remeber, try pressing “L” as it is the shortcut key.
2. Draw an ellipse on the screen that is a little more than twice as wide as it is tall.
   Note: I created one that is 40×90.  You can see the size on the bottom of the Expression Design screen.
3. Change the Fill to black.
4. Under Effects, click the “fx” drop down button and choose Effects | Gaussian Blur.
5. Set the Radius to .5.
6. Set the Opacity to 70%.
7. Now turn the shadow -2.7 degrees.  You can either grab a corner of the selection when the shadow is selected or you can enter this into the the Rotation Angle option at the bottom of the Expression Design window.
8. Right-click the shadow and choose Arrange | Send to back.
9. Place the shadow under the sphere where it looks most natural.

Click the Sphere to download a zip file containing: BlueSphere.design, a BlueSphere.png and a BlueSphere.xaml.