Creating an Aqua / Gel-look Sphere using Microsoft® Expression Design® (Beta 2)
This tutorial describes how to create a sphere that has the 3D 'Gel' look used in Microsoft Vista® and the Apple Macintosh® Aqua interface using Expression Design. The same effect can be applied to almost any shape.
.design file
xaml file
Here's how to do it:
Create a Flat Circle
1. Select File / New. Set the document width to 450, height to 600 and resolution to 96 px/inch.
2. Right click on the rectangle icon in the tools panel strip in the left margin (5th icon from the top).
3. Holding the shift key down to constrain the ellipse to a circle, position the mouse in the upper corner of the ‘page’ in the document area, left click and drag to the right edge and downwards until a circle the width of the document is created.
4. Select a fill color
|
in the Appearance properties panel, there is a color selector box with 2 ‘tabs’ – the left tab is for the fill property, the right tab is for the stroke property. Just to the right of the stroke tab is a group of 4 squares (labelled 'type' in the screenshot below). When the fill tab is active, each square specifies a different fill type (none, solid color, gradient or pattern). When the stroke tab is active, each square specifies a different stroke type.
Click on the left tab to select the fill property. Then click on the blue color in the color favorites. This should fill the selected object (in this case, the circle you just drew) with the color blue.
Click on the right tab to select the stroke property. We don’t want a stroke drawn along the selected path, so click on the option with the red diagonal bar going through it to disable the stroke. |
5. Name the layer
|
In the Layers panel on the right side of the page, double click on the word ‘Layer 1’ to edit it. Type in the text ‘Blue Circle’. Lock this layer by clicking on the lock symbol |
Create a glossy 3D reflection on top
6. In the Layers panel, there are 2 icons in the bottom right corner. Click on the page icon to create a new layer. It will be created above the Blue Circle Layer. Double click the name of this layer (“Layer 2”) and change its name to “Glossy effect”.
7. Note that when you locked the Blue Circle layer, the blue circle was de-selected. Another way you can do this is to click somewhere else on the diagram. Now that the blue circle is deselected, create a white to clear gradient to use as a fill for the glossy layer.
|
Click on the left tab of the Appearance color palette to select the fill properties.
Click on the gradient fill type box (left bottom square of the 4 'Type' squares just to the right of the strokes tab) This opens up the gradient creation panel area.
Click on the black square at the left of the gradient area. Then click on the upper left region of the color selection region to pick a white color. Make this transparent by setting the value in the Stop Alpha box 0 (double click and enter 0).
Note that this is gradient is now displayed in the fill type box where the black to white gradient was and in the fill tab, displaying the currently selected fill.Make sure that it is a linear gradient by clicking on the gradient style box just to the right of the gradient strip (tool tip = Linear Gradient)
The Expression Design help file topic 'Adding and removing custom color swatches' provides info on how you can save the gradients you create to your own custom 'swatch'. You can also simply drag the gradient box in the fill type and drop it onto a color you won't be using in the color favorites to replace that color with the gradient you've just created. This provides fast access to this for future use.
|
8. In the View menu, uncheck both the 'snap to guides' and 'snap to grid' settings to allow you to position things without interference from Expression Design.
9. Create a gradient filled ellipse slightly narrower than your blue circle
|
Select the ellipse tool in the left hand tool panel, left clicking with your mouse just to the right and below the upper left corner of the page region and dragging to just below and to the left of the midpoint of your blue circle. |
10. Change the direction of the gradient from horizontal to vertical
|
Right click on the icon between the T and the scissors in the left hand tool panel.
Select the gradient transform tool from the pop-up context menu that is displayed.
Click just above the bottom of the ellipse and drag the mouse to the top of the ellipse to get the gradient clear on the bottom and white on the top |
11. Align the centers of the ellipse and the blue circle
|
Unlock the blue circle layer by clicking on the lock icon for that layer
Select both layers ( Ctrl-A )
Align horizontal centers (Arrange / Align / Horizontal Centers)It should look something like this:
Lock the glossy layer and blue circle layer.
Add an Inner Light
12. Create a new layer and name it Inner light
|
Drag the bar for this new layer so that it is underneath the glossy layer and above the blue circle layer |
13. Create a new gradient that goes from aqua on the left to clear on the right
|
14. Create a rectangle the width of the blue circle and that is 1/2 the height of the blue circle. Position this so that its top starts at the 'equator' of the blue circle and its bottom is at the bottom of the blue circle.
15. Add a'glow' effect.
|
The Effects panel is often partly obscured – scroll down the appearance panel until you can see the small icons under the effects panel
Click the fx icon and select Effects / Outer glow from the list of effects.
Scroll down the properties page until you can see all of the color selection region for the outer glow effect. Change the color to aqua, the Noise to 0, the Size to 10 and the Opacity to 1. |
With all other layers visibility turned off, it should look something like this:
16. Clip the rectangle so that it is masked by a circle.
|
Unlock the blue circle layer
Click on the blue circle to select it and duplicate it (Edit/Duplicate)
Cut this circle (ctrl-X) and re-lock all layers except for the Inner Glow layer
Click on the Inner Glow layer bar to select that layer and paste the duplicated blue circle into the layer (Edit/Paste in Front).
Select the selection tool arrow from the tool palette in the left margin and move the duplicate (transparent) circle it so that it aligns with the original blue circle.
Set the opacity of the duplicate blue circle to 0%
Select both the rectangle and the duplicate circle
Use the circle as a clipping mask for the rectangle (Object / Clipping path / Make with top path)
|
Adding Depth
17. Create a new layer and name it Dark Blue Edges. Position it in the layer list as shown below:
18. Duplicate the blue circle in the Blue Circle layer again (unlock layer, select, Edit / Duplicate, cut (ctrl-X), lock layer, select Dark Blue Edges Layer, Edit / Paste in front, drag circle into alignment with Blue circle.)
19. Create a gradient that goes from blue with 0% alpha to navy blue with 100% alpha.
|
Adjust the center point of the gradient so that it is 2/3 of the way to the navy position as shown.
Make this a radial gradient. |
20. Choose the gradient tool and drag from a bit below the center of the circle to the outside edge of the circle, so that the center is clear and the outside edge is dark. You will probably want to play around with this to get the depth of the sphere looking 'just right' (Check out the design file to see exactly how it was done in this example.)
Drop shadow
21. Almost done! Create a drop shadow layer and position it at the bottom of the list of layers.
22. Create a circle the same size as the sphere.
23. Create a radial gradient that goes from grey (100% alpha) to white (0% alpha)
| Adjust the centerpoint of the gradient to the 2/3 position |
24. Use the gradient tool to center the gradient in the circle
25. Select the selection tool (arrow) and decrease the height of the circle so that it becomes an ellipse. Note how the gradient is distorted too.
26. Apply a drop shadow effect to this ellipse (Effects panel fx Effects / Drop Shadow)
| Set its softness to 7, offset to 0 opacity to 0.6, light angle to 315 and color to black. |
Save your design!
27. File / Save as...
28. Export it to xaml (File / Export, change file type to xaml, save)
| To adjust the scale of the drawing in the xaml preview window, use your mouse scroll wheel to zoom in or out. |
29. Export it to jpeg (File / Export, change file type to jpeg, set size parameters, save)
|
Copyright© Brian Cruickshank 2007
All graphics, photographs, drawings, animation and music on this site are copyrighted to Brian Cruickshank except as noted here and are downloadable for personal non-commercial use only.
|
|
