Using the Fill tools for vector layers, you take the drawings you created with the Draw tools, and you tell Moho which areas should be filled with color, where outlines should be placed, and what fill and line styles to use.
The drawings created with Draw tools are only guides. As far as Moho is concerned, they're invisible and they won't show up in the final rendered output. That's where Fill tools come in. Draw tools define the shape of objects, while Fill tools define the appearance of those objects. Of course, you're always free to switch back and forth between any of Moho's editing tools at any time.
To define a region to be filled, you must first select all the points along its boundary. That's what defines a fill region - the set of points along its outer edge. We'll take a look at some examples later. You can also create outlines using these tools. Outlines are less restrictive than fills - an outline is not a set of points along an outer boundary. Instead, an outline can be any set of points you choose. The curve segments between these selected points will form the outline.
Fills and outlines are stacked on top of each other in the order you create them. This determines which fill or outline will be visible when two or more overlap. There are tools that allow you to change the stacking order of fills and outlines, but you'll learn that you can save yourself a lot of time by planning ahead and creating fills in the proper order to begin with.
If any of the following tools are active: Select Shape or Create Shape, and a shape is selected, you can quickly set the shape's color by picking it from another shape in the current layer. Just hold down the <alt> key and click on the shape you want to copy the color from. The color (and style) will instantly be applied to the currently selected shape.
You can also "push" a shape's color and style onto other shapes. If you hold down <alt> + <ctrl> and click on a second shape, the selected shape's color will be "pushed" onto the shape you click on. This is an easy way to propagate one shape's color and style onto several other shapes in the same layer.
The following Fill tools are available.
This tool is used to select an existing shape - either a fill or an outline. Just click on the desired shape and it will be selected. At that point, you can press the <delete> or <backspace> keys to delete the shape, adjust its properties in the Style Window, or change its stacking order using the fill modifiers described below.
After clicking on a shape to select it, you then have the option to select shapes lower in the stacking order. Just hold down the <ctrl> key and press the down arrow key to select the next shape lower down at the point you clicked the mouse. Hold <ctrl> and press the up arrow key to select the next shape higher in the stacking order at that same point.
The Create Shape tool is used to select a region to be filled with color, or a set of edges to be drawn as an outline. It operates exactly like the Select Points tool described in the Draw Tools chapter. Using the Create Shape tool, select all the points that form the outer border of the shape you wish to create. If you select a set of edges that completes an enclosed shape, a highlighted checkerboard will show you the extent of the region you are creating. Otherwise, you will just see a highlighted outline on the selected edges.
When you have the desired region selected, press the spacebar to actually create a shape from the selected edges. The Style Window can now be used to choose the shape's color, line width, style, etc. This is a very important step - until you press the spacebar, you are only preparing the selection. A shape is only created when the spacebar is pressed.
The picture below shows a selection in progress using the Create Shape tool. Note that the figure on the left is not filled with a checkerboard because its border points are not all selected. The checkerboard area indicates the region that would be filled if the user hit the spacebar at this particular moment. The left figure would only receive a partial outline and no fill, since then entire border has not been selected.
Selecting the curves to make up a shape.
The next figure shows the result of pressing the spacebar to actually create the two shapes that were being prepared in the figure above.
The two resulting shapes.
After creating a shape, if you decide that you only want a fill, and not an outline, you can un-check the "Enable outline" box in the Style window. Similarly, un-check the "Enable fill" box in the Style window to make your shape have only an outline, and no fill color.
The Line Width tool is used to adjust the width of a line as it passes through a particular point. Using this tool, you can create lines that taper at the ends, get thinner in the middle, or change width several times along their length. To use it, just click on the point you want to adjust, and drag the mouse left and right to adjust line thickness. (Be sure you first either set up an outline through the point, or a fill shape with a non-zero line width - otherwise this tool won't do you much good.) You can adjust more than one point at a time by selecting multiple points with the Select Points tool from the Draw tool group.
Using this tool, click on a fill or outline to delete it from the project. Remember, in Moho, the shape of an object is separate from its appearance. If you use this tool to delete a fill, the underlying points and curves will remain. If you want to delete those as well, go back to the Draw tools to work with the points and curves.
Sometimes, you will have the need to create a fill shape with only a partial outline. The Hide Edge tool makes it easy to accomplish this. After creating the fill shape and setting the desired line width, simply click on the edge(s) that you want to hide - those edges will simply disappear from the outline, without affecting the fill. Below is a before and after example:
The Hide Edge tool in action.
The following buttons operate on the currently selected fill or outline shape. Just click on one of them to modify a shape.
Click this button to lower a shape in the stacking order. This will move it behind the next lower shape. The stacking order only applies to shapes within the same layer - all shapes in a layer will appear above any lower layers and behind any higher ones, regardless of stacking order. Note that if there is no shape overlapping the selected one, you may not see any change when this button is clicked, even though the shape gets moved lower.
Click this button to raise a shape in the stacking order.
Note: the up and down arrow keys are handy keyboard shortcuts for the Raise and Lower Shape tools. Just press these keys to raise and lower the selected shape. If you hold the <shift> key down when using the arrow keys, the selected shape will be moved to the very top or bottom of the layer's stacking order.
When creating fills, Moho tries to be clever and ignore selected parts that can't possibly be part of the outline of a fill, such as points on dead-end curves. However, there are times when Moho needs a little help from you. As an example, take the shape below:
A complex shape - two curves welded together.
To fill this shape with color, your first thought might be to select the entire group of points. Unfortunately, Moho recognizes this as a shape that can't be filled, and will only allow you to create an outline:
A shape that can't be filled.
The reason for this is that a fill is defined by the points along its boundary. In this case, it's not obvious to Moho which boundary you intended. Many times, Moho can figure it out and provide you with the fill you were after, but in a case like this, you have to be more specific about what points define the boundary of the shape. The definition of a fill hasn't changed - but sometimes your intentions aren't as obvious to Moho as they are to you. The following selection contains only the boundary points of the desired fill region - the points along the interior curve are not selected:
A selection that can be filled.
Here are two other examples of possible fills based on the same set of curves:
Alternate shape 1.
Alternate shape 2.
Remember, when a fill shape doesn't look right (or can't be filled at all), make sure that you've only selected the points along the fill's boundary, and nothing else.
Remember how a fill is defined: a fill is defined by the set of points along its boundary. With that in mind, let's talk about fills with holes. To create a fill shape with one or more holes inside it, just select the points along the edge of the hole as well as the points on the outer boundary. The picture below shows a selection made with the Create Shape tool. If only the four points of the rectangle had been selected, then the fill shape would have been a solid rectangle. However, by selecting the interior curves as well, we can create a shape with holes in it - it's simply a matter of defining more boundaries for the fill.
A compound fill.
The next picture shows a small variation on the one above. In this case, there's a smaller circle inside the first one. The rule is the same - we've just added more boundary curves to this fill.
Another compound fill.
There's no limit to the kinds of shapes you can create this way. By adding more boundary curves, you can create more and more complex fills - feel free to experiment.
Sometimes you may want to create an object with parts that overlap in complex ways. Consider the image below:
Two interlocking rings.
After the discussion about stacking order, is the red ring in front of or behind the blue one? Well, the answer isn't so simple. There is no way two objects could be arranged this way with simple stacking. (If Moho were a 3D program, things would be very different.) The red ring is in fact two objects - one behind the blue ring, and one in front of it. The next image shows the same object, but colored differently so that the two parts of the red ring stand out.
The coloring shows three different shapes.
It takes a little more work to set up an object when you have to split it into two (or more) parts, but sometimes it's the only way to achieve a certain effect. The picture below shows the project in a Moho window, so that you can see the arrangement of points and curves. Note how the ring on the right has some extra curves set up so that it can be split into two fills.
Point and curve arrangement.
This technique is also useful in animation, for when you want an object to bend backwards and overlap itself. Normally, this would cause the fill that defined the object to get seriously distorted, or even to break holes in itself. However, by building the object out of two or more parts and stacking them properly, you can achieve this type of effect with no problem.