The Old Offset Radial Fill Trick

Tony Zilles

One of the examples used by Chris Roth in his article on 'Designing Outside the Box' shows a series of shape with a spherical appearance. A great example illustrating the subject of that article, but how is it done? This article shows you step-by-step.

The spherical rendition is created by applying a radial gradient fill to a circle. While not an optically correct rendering of a sphere, it certainly gets the message across. It also adds a dimension of depth to an otherwise flat color scheme in a presentation.

The tricky aspect of this fill is that we can customize the shape to give the center point a control handle. This allows it to be moved, changing the pattern of the radial fill without affecting the rest of the shape. These changes give the appearance of changing the position of the light source with respect to the shape.

The effect is interesting with a single shape and especially powerful with multiple shapes. The implied direction of lights rays add a powerful yet unseen dynamic element to illustrations. Dynamic elements are useful tools for controlling the reader's eye and guiding it back to the focal point.

Apart from the subliminal effects of drawing elements and composition, controlling radial fills in this way also looks nice and will attract the eye of more readers than plain flat color, or distributed shapes all filled with the same pattern orientation.

This document will show you:

• How to create a shape that looks spherical
• How to create a control handle for the radial fill pattern

These 'spheres' appear to be lit by a central light source. Just a sneaky little trick.

Creating a 'Sphere'

• Select the 'circle' tool from the standard toolbar.
• Click somewhere on the page and holding the Shft key down, drag away to create a circle. Holding down the Shft key keeps the x and y aspect the same so you draw a circle not an ellipse.
• Select the down arrow next to the Fill icon on the Shape toolbar and select More Fill Patterns... from the drop-down menu. Scan the next menu for the radial gradient fill pattern (#40).
• The dialog prompts you for Foreground and Background colors as a gradient fill needs two colors to work. The Foreground color will be the highlight area. For materials that are neither high gloss or full matte, the Foreground color will be just a bit lighter than the true color of the object in diffuse light. In this example we will suppose a blue sphere and select cyan (#7). The Background will be the color of the object as seen in shade under typical ambient lighting. This might be about 60-75% down the lighting scale. In this case we will choose blue (#4) mainly because it is very convenient and shows up well in your browser.
• Select the Line Color (or Line Weight or Line Pattern) drop-down icon from the Shape toolbar and select No Line from the menu.
• Now you have a pseudo sphere.

Controlling the Fill Pattern Orientation
Select the shape, right mouse click and select Show ShapeSheet.

• In the ShapeSheet, right mouse click and select Add Section... Check Controls and click OK.
• Do the same again to create another Geometry section (which will be named Geometry 2 by default).
• In the Controls section enter =Width/2 in the X Dynamics cell and =Height/2 in the Y Dynamics cell.
• Enter ="Reposition light source" in the Tip cell. This gives your users a hint as to the purpose of the control handle.
• In the Geometry2 section, enter =Width*0.5 in X1 and =Height*.0.5 in Y1. Enter Controls.X1 in X2 and Controls.Y1 in Y2
• In the Protection section enter =1 in the LockCalcWH cell. This allows the control to be moved anywhere outside and without changing the alignment box.
• The control is now active.

The ShapeSheet with its Controls section and additional Geometry section. Also note the LockCalcWH cell in Protection.

Why Does it Work?
Making it work is one thing. Understanding why it works is quite another. We asked Chris Roth "why" and received this very clear response...

The fill pattern centres itself between the extents of ALL of the shape's geometry points. By adding an extra line to the shape and turning it's visibility off, it secretly makes the extents of the geometry bigger - thus throwing the gradient off center.

I told you this was a sneaky trick.

Just to save you some further hair loss when you start looking for the Geometry2.NoShow cell on the ShapeSheet, this actually the cell at Geometry2.A1. Yes, the A cell is NoShow and referred to as such internally by Visio. In cell references you must use the Geometryx.NoShow. The same principle applies to the Geometry B cell which is the NoFill toggle. Who thought that up?

Testing it out
When you select the shape a control handle will appear. Distance away from the shape equates to axial rotation of the light source around the shape up and down and side-to-side movement equates to the altitude and direction of the light source.

Download the sample drawing and have a play. You'll get the feel for it very quickly.

Tony Zilles

Download the sample file (radfill.zip - 5.04kb)

See Designing Outside the Box for more information on this topic

Check Word Balloon Example - a variation on the same theme.