Getting Started |
This first tutorial follows the pre-Revolutionary (pick one) tradition of "read in imagescomp the images togetherrender the images out" to give you an idea of what Shake is about. The following Intermediate tutorial discusses parameter animation, basic color correction, node manipulation, how to launder money, and other things that beat puttering around the house. The Advanced tutorial section discusses how to track, pull keys, work with Z channels in exceedingly clever ways, and how to work with expressions and macros. Nothing that you need to survive a post-nuclear holocaust, but still useful tricks all the same.
Before you begin the tutorials, it is really highly beggingly pleadingly achingly suggested that you poke around the Overview section. The Overview section contains information about color corrections, keying and spill suppression, masking, transforms, caching, premultiplication, bit depth, logarithmic color space, the cure for cancer, and so on. The Masks section of the Overview is in a tutorial format, so there you go, a little tutorial bonus.
Use a 3-button mouse. Although you can press Ctrl and click the mouse button (of a 1-button mouse) to show context menus in the Shake interface, a 3-button mouse greatly enhances the Shake workflow. Shake also supports the middle roller wheel of a 3-button mouse. Delete vs Del key. The Shake documentation refers to the delete key on the Macintosh keyboard as the Backspace key. This is the key immediately below F12. The Del key (a small key in a group of six keys, such as Page down, Page Up, and Home) is referred to as the Delete key. If you are using a smaller Macintosh keyboard without the Del key, use Option+delete (again, the delete key below F12). Command Vs Ctrl. You can use Command or Ctrl interchangeably for hot keys. For example, use Ctrl+C or Command+C to copy an object. Launching Shake in the Terminal. Mac OS X wraps up binaries and its contents into one icon in the browser. Clicking on the Shake icon in Mac OS X launches Shake. However, you can right-click the Shake icon to obtain the Show Package Contents menu option. Select Show Package Contents in the context menu to continue to open sub-directories. In the command line, cd down inside of shake.app to shake.app/Contents/MacOS/ to find the actually binary to be launched in the Terminal. |
Note: This guide distinguishes between behavior found in Shake and Shake in the Tremor-style interface.
In this tutorial, composite four rendered images over a gradation. The elements are from a swell animation called Vanilla Pudding, a project from Wild Brain in San Francisco. These guys are great, not least because they were kind enough to pass on footage for this tutorial, but also because they like to mix 3D and 2D animation. So extend a laurel and hardy handshake to Karen Ansel and Nicolas Weigel. Backslapping aside, this version pales in comparison to the actual Wild Brain Vanilla Pudding shot (oops, more backslapping). The project has been trimmed down in complexity so you do not have to download an inordinate amount of footage.
For those of you into narrative motivation, Vanilla, our cubically cranial gal, does not take to kindly to some other kids that have torn the wings off a butterfly. In the shot prior to this scene, Vanilla pulls the gun out of her nethers. Here, she takes aim with aforementioned gun and fires. The missile, by the way, is a miniature hippopotamus that drools.
Frame
1
|
Frame
28
|
Frame
56
|
![]() |
![]() |
![]() |
On the Macintosh platform, double-click the Shake icon.
Note: You can also type the following in any shell:
shake
shake or shake -gui 1
The second command (shake GUI 1) launches Shake in the Tremor-style interface.
Note: The Tremor-style is not available for Mac OS X.
What is the difference between the two styles? The classic Shake is a little friendlier for doing expressions, Tremor-style is a little friendlier for doing basic work.
Shake style:
When using Shake in the Tremor-style, set your monitor to a minimum 1600-pixel width.
Tremor Style:
The two interfaces run the same in terms of button behavior, but have a slightly different layout:
In addition, the Shake window can be resized. Tremor-style fills the entire screen.
Since this may be as much as you ever read in the documentation, here is the most important part: As you pass the cursor over buttons,a brief message appears that states its function, as well as the relative hot key. In Shake, this help window is the right text window at the bottom of the interface. In the Tremor-style, it is in the Expression Box just above the center Function Bar on the left side.
Click the right mouse (right-click) button to
view contextual menu functions. For example, right-click the Viewer
Channel
button, and the menu appears. The letters are the hot keys for each choice.
Therefore, the right mouse button can also be considered as
contextual help.
One more tricky bit about some of the buttons: Some have different
behaviors between clicking and holding. For example, clicking
the Viewer Channel
button in the Viewer toggles between the RGB and the Alpha View
states. Holding the mouse on the Viewer Channel button gives
additional choices.
click | hold down |
![]() |
![]() |
|
Every image process in Shake is done by creating a node and linking it in the Node View. The nodes are found in the Node Tabs (Image, Color, Filter, etc.).
![]() |
![]() |
Do not confuse this node with the Load and Save
buttons at the top of the software
these are for loading and saving scripts.
Click FileIn to launch the browser.
The "Load image or sequence browser" window appears.
Browse to the <ShakeDir>/doc/pix/vp directory.
|
Press Next at the bottom of the Browser. The two images are read in, represented by two nodes in the Node View. The Next button allows you to continue to browse.
Press Backspace (or the Up Directory button
) and go down into the smoke directoryignore the shadow
directory for now.
The smoke directory contains a sequence of images ranging from 1
to 56. The @ sign indicates these are non-padded frames. To see the files
listed individually, turn off the Sequence Listing toggle
at the bottom of the browser. Since you need to load the sequence, activate
Sequence Listing
. Select the files as a sequence. Press the Space Bar (rather
than the Next button), as the Next button shortcut.
If you double-clicked before reaching the vanilla images, click on the Image - FileIn node to launch the browser.
Four nodes appear in the Node View. Each node is a function that
can be viewed or modified. In this exercise, all of these are FileIn
nodes that load images.
You might note the pretty thumbnails. As you can see from the mid, vanilla, and hill images in the above illustration, the thumbnails also indicate transparency if there is an accompanying alpha channel. The smoke element is blank because frame 1 is black.
Here's a swell trick to impress your date with next Saturday:
Drag the vanilla node over the mid node in the Node Treeit
does a mini-composite for you. Does this help you composite or change your tree
at all? Nope, but it's cool, innit?
To do an actual composite, you must connect the nodes. This happens
in a moment, so stop fidgeting and pulling the hair of the girl in front of
you.
|
This nicely brings you to the next subject, loading and viewing nodes.
To load a node into the Viewer, click on the left side of the node:
To load the parameters into the Parameters tab, click on the right side of the node.
You can view a different node than the one you are tuning.
In the above illustration, the vanilla image is the currently viewed node, as indicated by the little light on the left side. The 1A indicates it is in Viewer 1, buffer A. The tiny text field on the right side indicates the vanilla parameters are also loaded. OK, true, there is only the one node in the illustration. Just try to get past that.
Use the help window to get information on nodes. As you pass the cursor over a node (no need to click), the resolution, bit depth, node name and type, and channels are displayed. For example, you can see that the vanilla image is a FileIn node named vanilla, is 8-bit, has RGBA channels, and is 720x540 pixels:
Look at the different channels in the Viewer by toggling the View
Channels button
. For example, toggling it to the Alpha channel
to view the alpha.
![]() |
![]() |
However, nobody actually uses that button. Remember when you pressed the right mouse on the View Channels button, and it listed the hot keys? Use the hot keys instead when the cursor is over the Viewer to quickly look at a channel. All the cool kids in the back row are doing it.
There are two places to set the frame range in Shake.
The first and most important is in the Globals tab. The Globals tab lists all script settingsthe frame range, proxy settings, default resolutions, GUI settings, and quality settings. The normal Parameters tab is a listing of parameters for a specific node.
Click the Globals tab. (Gee, no kidding, that's novel.)
Double-click an empty area in the Node View.
In Tremor-style, hold down the Tab key and drag the mouse left and right along the bottom portion of the interface. As the cursor passes over the vertical space where the tab is, it pops up the tabs. This works for any of the three panes.
The first parameter in the Globals tab is the timeRange parameter. This frame range determines what frames are rendered. Although it is saved in the script, you can override it in the command line. Press the Auto button to examine the FileIns and determine the range automatically.
The timeRange parameter is extremely flexible and can be manually edited:
entry | calculates |
1-56 | Frames 1 to 56 |
20-30 | 11 images from frames 20 to 30 |
1-56x3 | Frames 1, 4, 7, etc. |
1,10,20-30x2 | Frames 1, 10, 20, 22, 24, 26, 28, and 30 |
Click the flipbook button
to launch a flipbook render of any node. This launches a render into a
floating window. (If you are testing a FileOut node, the actual
FileOut is not executed. To render, use the Render commandeither
right mouse in the Node View, or use the Render menu).
Otherwise, the sequence is rendered into memory and you can play it back.
A few play controls for the flipbook:
entry | calculates |
. (Think of this as the > key) | Play forward |
, (Think of this as the < key) | Play backward |
R, G, B, A, C | Show the red, green, blue, alpha, and color channels |
Shift+left mouse drag | Scrub through the animation |
Esc | Close the window |
For more flipbook controls, see Interface - Flipbook.
Once the flipbook is gone, you lose all links to it, so you cannot save the images or use the images again. You can have as many flipbooks as memory allows. You can stow the flipbooks and retrieve them later, but they take up memory.
The second way to indicate a frame range and get playback is with the Time Bar. This displays the range that you want to concentrate on, and does not get saved into the script.
Click the smoke node in the Node View to select it.
Click the Layer - Layer node. The different layer nodes (such as Atop, Over, Outside, etc.) are combined into the Layer node. There is no difference between a Layer node with the operation set to Over and an Over node.
The Layer node has two inputs, called knots, on the top of the node. The smoke node is attached to the first knot.
![]() |
![]() |
Information flows downward in the Node Viewthe image
information is passed from the smoke and vanilla nodes, and
fed into the Layer1 node to perform the composite:
smoke | vanilla | Layer1 |
![]() |
![]() |
![]() |
The operation parameter is listed in the Layer1
parameters. Over is the most frequently used operation, and assumes
an alpha channel exists in the first image input. You can select a different
compositing mode with the pull-down menu, but for this composite, stick
with Over.
The node compositing logic is similar to language: "Input 1 is Over Input 2." Therefore, the inputs are switched, the compositing order is reversed.
![]() |
![]() |
The node logic is switchedsmoke is over vanilla, and vanilla is over smoke:
![]() |
![]() |
This is bad.
|
The result composite appears.
Shake has several windowing conventions:
Function | Hot key | Notes |
Expand a window full screen | Space Bar | Press the Space Bar again to zoom back to normal. |
Pan a window | Middle mouse or Alt+left mouse | Works in all windows, including the Browser and the Tremor Function Bar. |
Zoom a window | Ctrl+middle mouse or Ctrl+Alt+left mouse | Works in the Node View, the Viewer, the Time Bar, and the Curve Editor. |
Zoom in on a Viewer | +/- (by the Backspace key) | Gives you an integer-based zoom so you have fewer round-off artifacts on your display. The zoom follows the cursor. |
Reset a View | Home | Works on the Node View, the Viewer, the Time Bar, and the Time View. |
Resize a pane | Grab a border between two panes to resize. | |
Select a tab | Tab | In Tremor-style only. Hold down the tab key and drag the cursor left and right and the tab column it is over is selected. |
Shake is not only resolution independent, but can also dynamically change resolution during the compositing process. For example, you can simultaneously output a HD image and 601 video image. Won't that impress the family on your next holiday visit?
Composite elements over an image of the desired resolution.
Use Transform - Resize, Zoom or Fit to scale your images.
Use Transform - Crop, Window, or Viewport to crop into or out of your window. These do not resize the image, but instead reset the framing of the image.
In this example, use the first technique and composite elements over an image of the desired resolution.
Click the left side of the hill image to load the image into the Viewer. The hill image is 370x250 pixels.
Connect the hill node into Layer3.
The resolution changes to 720x540.
Double-click the Layer3 node in the Node View to simultaneously view the node and load its parameters.
Create a sky element for the background with a radial gradation that is generated by an Image - RGrad node. Nodes that generate images, such as Image - RGrad, Ramp, ColorWheel, and RotoShape have associated width and height parameters.
Create an Image - RGrad node.
Using the following illustration as a guide, attach the RGrad node to the node tree with a fourth Layer node.
Notice that the RGrad1 width and height are set to 720x486, and Layer3 has a height of 540 pixels. To match the height of RGrad1 to the height of Layer3, you have several options:
Option 1: Do nothing. A tempting and acceptable solution is to not worry about it at all. The Shake engine is designed to allow you to do this because of the Infinite Workspace. The Infinite Workspace ensures that elements are never clipped due to framing. See Overview - Infinite Workspace for more information.
Option 2: Edit the RGrad Parameters. Click in the height text field
to manually edit the height parameter of the RGrad.
This is fine and dandy, but what about the next time you create an Image node? You don't necessarily want to manually change a node each time it is created. Therefore, Shake has a default width and height, found under the swell format pop-up menu in the Globals tab. You can select from presets (Cinemascope, Academy, different flavors of NTSC, PAL, HD), or open the sub-tree to set your own.
Changing defaultHeight does not change the height of the current RGrad, but next time you create an RGrad, it automatically takes the defaultHeight.
Next, reset the parameters for the RGrad, and update defaultHeight.
For more information on resolution, check Overview - Resolution.
This section discusses the different ways to tune the parameters of a node. Nodes can have text fields for numerical entry, widgets to help you select color, or onscreen controls for interactive placement. RGrad has all three parameters. The fine glowing ball in the background does not really convey a feeling of the sky on a nice, warm, non-compositing work day, so modify RGrad1 in the the following steps.
![]() |
![]() |
Controls for the onscreen controls are on the Viewer bottom. A few helpful buttons:
![]() |
Autokey | When enabled (green), a keyframe is created for parameters linked to onscreen controls. You do not need it in this exercise. |
![]() |
Delete Key | In case you enabled Autokey, there is also Delete Key. Go to the frame that has the keyframe you want to delete, and blow it away into oblivion. |
![]() |
OSC Color | Sets the color for the onscreen controls. |
![]() |
OSC Display Toggle | Onscreen controls are always displayed. |
![]() |
OSC Display Toggle | Onscreen controls are invisible when moved. |
![]() |
OSC Display Toggle | Onscreen controls are turned off. Hold down the onscreen control visibility button to access this option. |
Notice as you modify the parameters, the parameters adjust to return the numerical data.
You can modify the text fields in several ways.
Classic Shake interface:
![]() |
Drag the slider to modify the value. |
![]() |
Click once to select the text field. Double-click for a type insertion point. |
![]() |
Ctrl-drag in the text field to activate the virtual sliders. This gives you more precision and the ability to go beyond the slider limits. |
![]() |
Shift, Ctrl, or Alt+left and right arrow. Place the cursor over the text field and hold down Shift, Ctrl or Alt and tap the left and right arrow keys. This raises or lowers the number. Shift+arrow is 10x the normal increment, Ctrl is the normal increment, and Alt is .1x the normal increment. |
|
Tremor-style interface:
![]() |
Drag in the text field to modify the number. The green bar displays an approximate position of the number in its expected range. |
![]() |
Ctrl+drag in the text field for more precision. |
![]() |
Double-click to type in a number. |
![]() |
Shift, Ctrl, or Alt+left and right arrow. Place the cursor over the text field and hold down Shift, Ctrl or Alt and the tap the left or right arrow keys to raise or lower the number. Shift+arrow is 10 x the normal increment, Ctrl is the normal increment, and Alt is .1x of the normal increment. |
![]() |
Drag below the text field to access the mini-slider. This allows you to quickly jump to the minimum and maximum values. |
Animation of parameters is explained in the next tutorial.
RGrad has two Color Picker buttonsone button to control the
center color of the RGrad, and one button to control outside the
center of the RGrad. (What does one call that, anyway? Perhaps The-Outside-The-Center-Part.)
With the Color Pickers, you can edit color in several ways:
Enter your color value numerically into the three text fields.
Ensure the Color Picker button is active (it has a yellow ring around it), and select the color with the Color Wheel.
Ensure the Color Picker button is active, and drag in the Viewer to select the color.
Use the Virtual Color Pickers.
To use the virtual color pickers, hold down the key on the keyboard that corresponds to the channel you want to modify and drag the cursor left and right anywhere on that row. You can select:
(R)ed, (G)reen, (B)lue, (O)ffset, (H)ue, (S)aturation, (V)alue, (L)uminance, (C)yan, (M)agenta, (T)emperature
With this mechanism, you can effectively gang all three channels by holding the O (offset) key down and sliding left and right. (That's more fun than feeding peanut butter to a dog.)
With these powerful world-conquering skills, your result is similar
to the following illustration.
Those of you who were the type to sit in the front row of school and give apples to the teacher (and no doubt incur a great deal of nasty comments from the back of the class, and also probably got beat up a lot) may have noticed that the hill element, being a smaller image resolution than mid, is tucked behind the mid element. As always, there are several ways to correct this problem. One way is to use the Move3D to transform it.
Select the hill node in the Node View.
The Move3D is inserted between hill and Layer3:
The onscreen controls for the Move3D appear around the frame of
the image's resolution. Remember, hill and Move3D1 are at
370x250 resolution. The controls match that resolution.
To pan the element, grab the horizontal or vertical crossbars. Do not grab the centerit is the center of rotation control.
To scale uniformly, grab a corner and drag.
To scale in one direction only, grab an edge.
The smaller circle is the center-of-rotation/scale. You don't need to move it in this exercise.
When the cursor is over a section of the controls, the controls are slightly highlighted.
![]() |
Since the controls have panned most of the image out of frame, most of
the frame is black:
Due to Shake's tricky Infinite Workspace there is never any clipping of an image if it goes out of frameyou can always retrieve it later. You can view Layer4 to confirm the entire hill image is still there.
The Infinite Workspace is your best friend. For more information on how good a friend it is, check out Overview - The Infinite Workspace.
The final step in this exercise (before rendering the animation) is to fade the smoke.
Jump to a frame that contains the smoke (after frame 7).
Select the smoke element in the Node View.
Apply a Color - Fade node and set the fade value to
.5.
![]() |
![]() |
As demonstrated in this tutorial, everything in Shake is done with a node.
If you are still awake, render the image sequence after you save this soul-shattering vision of humanity's existence.
Click the Save button
to save the script under the current name. Because you have not yet saved
the script, Shake prompts you for a name.
Next time you press Save, the name you supplied is taken.
To Save As, use Ctrl+Shift+S or select Save As from the File menu.
In the Tremor-style, use the Menus button on the right side of the Function Bar to access the File sub-menu.
Ensure that the Globals timeRange is set to 1-56.
The "Save image or sequence" browser is launched.
To create a new directory, click the Create Directory button
(a rather straightforward process).
Navigate to the directory you want, and enter the image name into the File name text field at the bottom of the browser. As a courtesy to other software packages, include the following naming conventions:
The name of the file. (No surprises here.)
If you are not using the Quicktime format, supply the frame numbering symboleither @ or #. A single @ is an unpadded number, that is, 1, 2, 3, 4, etc. A single # is 4-place padding, that is, 0001, 0002, 0003, etc. Either symbol used multiple times means that many places of padding, that is, @@@@@ is 00001, 00002, 00003, etc.
If you are using the Quicktime format, omit the frame numbering symbol and enter .mov at the end of the file. The format options appear in the FileOut parameters.
Example:
Enter comp.#.sgi as your file name. The images are written as
comp.0001.sgi, comp.0002.sgi, and so on.
A FileOut node is added to the node tree and uses the given file
name.
The Render Parameters appear.
In the Render Parameters, you can enter a new time range, proxy scale, quality level, motion blur and number of CPUs to use for the render. The first line asks you if you want to render all FileOut nodes, or just the active ones. You can also select the FileOut node after you have opened the window.
You can choose to render on the command line. Click the Save button at the top of the interface to save the script. If you haven't saved yet, it prompts you for a script name, otherwise it writes over what you had before. (Ctrl+Shift+S is Save As.)
Save your script as vanilla_test.shk.
Stow or quit Shake.
Open the Terminal and navigate to the directory where your script is saved.
Type:
shake -exec vanilla_test.shk -v
The -v means "verbose," so it tells you the render status. For more information on the command line, see the Command line docs.
To override the time range, use the -t option:
shake -exec vanilla_test.shk -v -t 10-20
or
shake -exec vanilla_test.shk -v -t 1-56x2
The above command renders every other frame.
If you ever see the comment, "Congratulations, you just completed your first lesson of product X" in a tutorial, run screaming out of the building immediately. Steal donuts on your way out and have a tasty snack.