In order to provide a good example of using the polygon and square tool, here is how to make a square look 3D.  Be aware that is a 2D image made to look like 3D.

What you will learn

• Using the rectangle tool
• Using the polygon tool
• Make edges by simply using slight color variations
• Transparency
• Front vs back placement of element

Step 1 – Create a new Expression Design document

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

Step 2 – Create the first square

This first square will be the face of the cube.

1. Click the Rectangle on the ToolBox.
   Note: If you cannot find it, try pressing “M” as that is the shortcut key.
2. Draw a rectangle on the screen while holding down the shift key(the shift key is what tells Expression Design that you are looking for a perfect square and not a rectangle).
   Note: The X and Y placement of the square are: 131.5, 160. The width and height of my square are both 200.2 px. The Rotation Angle and Skew Angle are both 0.
3. With the square 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. 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.
6. To the right of the gradient bar, there are two gradient options: Linear Gradient, Radial Gradient.
   Choose Linear Gradient.
7. On the gradient bar, you should see two markers (squares with a triangle on top).
   Click the left marker and set the color to a nice blue.
   I used #5A78D8.
8. Click the right marker and set the color to a blue that is darker than the first one you selected.
   Note: I used color #153FC4.
9. Click the Stroke tab.
10. 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.)
11. Change it to No Stroke.
12. Change the Stroke Width to 0 px.
13. For Transparency, there is an Opacity setting. In case you didn’t know, Opacity is the antonym of Transparent, so setting the Opacity to 90% would be the same as setting a Transparency of 10%.
    Set the Opacity to 90%.

Step 3 – Create the right side of the cube using the Polygon tool

1. Click the Polygon on the ToolBox.
   Note: If you cannot find it, try pressing “J” as that is the shortcut key.
2. Draw a polygon on the screen just to the right of the square.
   The size doesn’t really as it will get its size as we move the corners into place.
   Note: The width and height of my square are both 200.2 px.
3. With the polygon selected, go to the properties tab.
4. Changes the points from 4 (there are only 3 points by default).
5. Click Direct Selection on the ToolBox.
   Note: If you cannot find it, try pressing “A” as that is the shortcut key.
6. Click the bottom left corner of the Polygon and drag it to exactly the bottom right corner of the first square.
   Note: Zooming in can really help you get the corners to line up.
7. Click the top left corner of the Polygon and drag it to exactly the top right corner of the first square.
8. Make sure the left side line of the polygon is perfectly straight up and down to match the square.
9. Click the top right corner of the polygon and drag somewhere up and to the right at an angle that seems to be a good perspective angle.
10. Click the top right corner of the polygon and drag somewhere up and to the right at an angle that seems to be a good perspective angle, probably a little bit sharper an angle than the top angle.
11. Make sure the right side line of the polygon is perfectly straight up and down to match the square
12. Remove the Stroke.  You should already know how to do this now.
13. Set the Fill to a single color that is a slight variation of the blue we used for the face of the square.
    Note: I used #002DB8.
14. Set the Opacity to 90%.

Step 4 – Create the top side of the cube using the polygon tool

Note: These steps are a little more general as you have already performed these above.

1. Click the Polygon on the ToolBox.
2. Draw a polygon on the screen just to the top of the square face.
3. Changes the points from 4 (there are only 3 points by default but since you already chose 4 it maybe is chosen for you now).
4. Click Direct Selection on the ToolBox.
5. Move the four corners of the polygon into place.  Three of the corners are already positioned for you. Only the top left corner is not.  Make sure to give it a little more angle to make the perspective look right.
6. Remove the Stroke.
7. Set the Fill on top to gradient and use a lighter blue.
   Note: I used#92A7EB for the left gradient stop and #7B97EB for the right gradient stop.
8. Set the Opacity to 90%.

Step 5 – Create a the back of the cube

Ok, well only give a few steps this time. You should be able to do this without perfect step by step instructions, now.

1. Copy and paste the square face (that way you get the Stroke and Fill and Opacity settings already configured).
2. Notice that three of the corners are placed for you so you can simply resize the new a square and connect it to the three corners.
3. You may find that this doesn’t look quite right because this square is in front of the other items you have already created.  Right-click on it and choose Arrange | Send to back.

Step 6 – Create the left side of the cube using the polygon tool

Ok, you now have created two polygon sides. You now need to create a third.  No hand-holding this time.  Just create it very similar to how you created the previous two.  It would be nice if you could just copy the right polygon and have it fit perfectly but it doesn’t fit.  Do you know why? That is right, due to perspective the angle is different so the left side is a little bigger than the right side.  However, you can still use copy and paste, you just have to place the corners.

You don’t need to create a bottom for the cube because it just appears to be already created due to transparency.

You are finished!

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

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.