Introduction
This tutorial follows on the previous one, and teaches you how to add colors and
styles to the objects that were drawn in the last tutorial. You can either continue
with the project you created in Tutorial 2, or you can open a file provided for you
named Tutorial2. This file can be found in the Tutorials subfolder within the main
Moho folder.
In Moho, visible objects are made up of fills and outlines. All the drawings you made
in the previous tutorial are invisible as far as Moho is concerned. You can see the
curves you drew while running Moho, but if you were to output the project to an image
or movie file, all you would see is empty space. The purpose of the fill editing mode
is to define what shapes should be filled or outlined, and with what colors and styles.
Creating Fills
In the main Moho window, click the Fill tab near the upeer left corner to switch Moho
into Fill mode.
In the Layer palette, click the Hills layer to make it active for editing.
Now click the Fill tool
, and pick the Edit->Select All command. The background hills should highlight
to indicate that they've been chosen to be filled, as shown below:
However, they haven't actually been filled yet. The highlighting shows you what's
ready to be filled - when it looks right and you're ready to fill the shape,
activate the fill by pressing the spacebar on your keyboard.
After creating the fill, the Style palette will display the settings for the fill:
its color, its line width and color, and the styles used to display it. For this fill,
click the fill color box and set the color to brown, set the edge width slider to 1,
and choose 'Gradient' from the Fill pop-up menu.
Click the details button to the right of the pop-up menu to customize the gradient.
Set the starting color to brown and the ending color to green as shown below:
You can see the result of this fill by selecting File->Render. A window will
appear, displaying the final output of the project so far. Close the window when
you're done.
More Complex Fills
Now we'll do a more complex fill shape. Click the "Clouds" layer in the layer palette
to activate the cloud layer. Choose Edit->Select None (or press the enter key)
to make sure nothing is selected. Now pick the Fill tool
. In the main window, click and drag a rectangle around all the points in the left
cloud. If you miss some points, you can either try again, or choose
Edit->Select Connected to select the rest of the cloud.
When you let go of the mouse, the entire left cloud should be selected, and should
look like this:
Now the highlighting looks correct, so press the spacebar to activate this fill.
The default fill color is white, which works for a cloud, so there's no need to
modify the fill parameters, but we do want to create an outline around this cloud.
To do this, switch to the Outline tool
. Using the outline tool, drag a rectangle around the entire left cloud again.
The highlighted outline should look like this:
Press the spacebar to activate the outline. In the Style palette, select 'Sketchy'
from the Line pop-up menu. Now would be a good time to select the File->Render
command to see what your final result looks like.
Follow the same instructions on the second cloud, using the Fill and Outline tools
to define its shape. When you have the second cloud done,
try rendering the project again too see what it looks like in full detail.
Moving On
Finally, to finish up, select the Tree layer from the Layer palette. Use the same
techniques for the clouds to fill in the treetop. The tree is a bit more complex than
the clouds - if you used the Fill tool to drag a rectangle around the treetop, you'd
probably also select the upper part of the trunk - this would make the highlighted fill
shape look incorrect. But there's an easier way to select the treetop. Using the Fill
tool, just click on the edge of the treetop as shown below, and the whole object will
be selected.
When you have the treetop selected, hit the spacebar. In the Style palette, pick a
nice leafy green as the fill color. Next, create an outline for the treetop using
the Outline tool. Set the "Edge width" of the treetop's outline to be 4, nice and thick
- you'll see why next.
Choose File->Render to see how the treetop looks. Notice how the ends of line
segments look kind of squared off and blocky. We'll fix that using Moho's variable
line width feature. Press Enter to de-select all points. Now, using the Line Thickness
tool
, click on each of the points at the end of a line segment. Choose File->Render
again, and notice how the endpoints are now nicely tapered. This feature isn't limited
to endpoints - experiment with using it on other points along a curve. Also, try dragging
the Line Thickness tool back and forth to make lines thinner or thicker.
The last shape is the tree trunk. Create a fill for that shape, again using the Fill
tool and clicking on the outline of the trunk to select it. Give the trunk a
brown color. Finally, create an outline for the trunk.
Render the project. You probably noticed that the trunk seems to be on the outside of
the tree. If we thought ahead a bit when we filled in the shapes, we probably would
have created the trunk before the treetop, so that the treetop was on top. However,
this is a tutorial and you're supposed to learn something here, so we'll learn
how to fix it. Pick the Select Shape tool
from the toolbar. Click on the tree trunk to select it (it should highlight with
a checkerboard). Click the Lower button
in the toolbar (or press the down arrow on your keyboard) a few times until the trunk
moves behind the treetop. Next, click the outline of the trunk to select it. Again,
click the Lower button until the trunk's outline disappears behind the treetop, but
not behind the trunk itself.
OK, now everything should be fixed. Render the project to make sure everything's
correct. For more information about Moho's fill mode, and detailed descriptions of
all the fill tools, the
Creating Fills
chapter is a complete reference. The
next tutorial
will move into the Bone editing mode,
and you'll learn how to set up some animation controls to make things move.