Getting Started |
This tutorial gives you the ol' super basic "Read In Images-Comp them together-Render them out" sequence of events, so don't expect miracles here. The next section, the Intermediate tutorial, talks about animation of parameters, basic color correction, node manipulation, how to launder money, and other useful things to do. The last section, the Advanced, talks about how to track, pull keys, work with Z channels in exceedingly clever ways, and how to work with expressions and macros. Nothing that you would need to survive a post-nuclear holocaust, but still useful tricks all the same.
Not that you will, be we really highly beggingly pleadingly suggest you also poke around the Overview section. It has lots of information about color corrections, keying and spill suppression, masking, transforms, caching, premultiplication, bit depth, logarithmic color space, and so on. The masking section is even in a tutorial format, so there you go, a little tutorial bonus.
This tutorial will distinguish between where there is different behavior between Shake, Shake in the Tremor-style interface, and Tremor itself.
In this basic tutorial, you will composite four rendered images over a gradation. The elements are from our new favorite animation Vanilla Pudding, a project from Wild Brain in San Francisco. These guys are great, especially because they were kind enough to pass on footage to use 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. Anyway, backslapping aside, the version we will do is somewhat pale compared to the real shot Wild Brain did. Oops, that's more backslapping. We've trimmed it down in complexity for illustration purposes and so you don't have to download an inordinate amount of footage.
For those of you into narrative motivation, this shot apparently has Vanilla (the odd girl) getting pissed off because some other kids ripped the wings off of a butterfly, which our nature-lovin' gal didn't take kindly to. The shot before it has her pulling the gun out of her nethers. Here, she takes aim with aforementioned gun and fires. The missile, by the way, is a miniature hippotamus that drools.
Frame
1
|
Frame
28
|
Frame
56
|
![]() |
![]() |
![]() |
Launching
the Interface
Shake on IRIX, LINUX or on NT using a tcsh port (available on our website)
If you are running on IRIX or LINUX, just type:
shake
or
shake -gui 1
The second method will launch Shake using the Tremor-style interface. You should have a 1600+ pixel resolution to use this style.
Tremor
There should be a desktop icon. If there isn't, go find the software and drag the executable from the folder onto the desktop with the right mouse. This will make a shortcut to the software. Double-click it.
You can of course make a desktop icon for Shake in NT as well. You can have it launch in the Tremor-style by right-clicking on the icon, selecting Properties, then Shortcut, and modifying the Target textfield so it says something like
<mylongpath>\shake.exe -gui 1
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 |
![]() |
When using Shake in the Tremor-style, you will probably want to set your monitor to at least a 1600 pixel width. Tremor itself always comes with a 1920 monitor.
The Tremor style |
![]() |
The two interfaces run the same in terms of button behavior, but just have a slightly different layout:
1 Viewers. Shake can create as many floating viewers
as you want. Tremor-style has up to 4 docked viewers.
2 Node View. Both allow you to open the Node View in other panes,
however.
3 Functions. Functions are created here. Tremor-style allows you to
put up favorite functions
4. Parameters. The Tremor-style gives you plenty of space to tune your
parameters. Shake has each parameter listed out in a scrolling window.
Additionally, the Shake window can be resized. Tremor-style takes up the entire monitor.
As mentioned, the interface runs according to basically the same rules, so choose whichever method you want. Tremor is always run in Tremor-style.
Contextual Help
As you pass the cursor over buttons, it will give you a brief message as to its function, as well as the hot key for it. In Shake, this help window is in the right text window at the bottom of the interface. In the Tremor-style, this is in the Expression box just above the center Function Bar on the left side.
Help in Shake |
![]() |
Help in the Tremor-style |
![]() |
You can also use the right mouse to pop up contextual
menu functions. For example, hit the right mouse on the Viewer
Channel
button, and you get the menu. The letters are the hot keys for each choice.
Therefore, the right mouse can also be considered a contextual
help method:
Reading in Images
The basic way to read in images is with the Image - FileIn
node, found under the Image tab. Hitting that will load in an image
or image sequence. In Tremor, you could additionally use the capturing ability
to grab footage from a digibeta deck by using a Image - VTRIn,
or use the bundled Cakes browser-based asset management software. Cakes allows
you to preview and drag in scripts and footage using the embedded html Browser.
By the way, at the top of the software are Load and Save buttons:
- these are just for scripts.
For this exercise, we are going to be using the standard FileIn for reading images that have already been rendered from a 3D or a paint package.
The FileIn node in Shake | The FileIn node in Tremor-style |
![]() |
![]() |
Click on the FileIn button, and it will launch the standard Browser, looking something like this:
You can go and find the images in <ShakeDir>/doc/pix/vp. You can do this with one of several ways:
Browse down to find doc/pix/vp/bg, and then drag-select hill.sgi and mid.iff (we don't want cloud.sgi for this exercise) and then hit Next at the bottom of the Browser.
This will read in the images, represented by two nodes in the
Node View. Now hit Backspace (or the Up Directory button
)
and go down into the smoke directory - ignore the shadow directory
for now. In smoke, you will find a sequence of images ranging from 1
to 56. The @ sign indicates these are non-padded frames. If you wanted to see
the files listed out as individual files, turn off the sequence listing
toggle
at the bottom of the browser. However, we want the enter sequence, so we select
it as a sequence. Because we have more files to pick, instead of hitting Next,
just hit the Space Bar instead. It is the same thing as hitting
Next.
Now go up and find the vanilla directory, and read in that sequence. To finish off the loading, you can either double-click on the vanilla entry (which also has 56 frames), or select it and hit OK at the bottom of the browser:
If you double-clicked before reaching the vanilla images, simply click on the Image - FileIn node again to relaunch the browser to find more images.
Looking at Images, Parameters, and Channels
If you look at the Node View, you will see four nodes. Each of these is a function that we can look at and modify. It happens to be that all of these are FileIn functions that read in images.
To see what a node looks like, click on its left side:
To load the parameters into the Parameters tab, click on the right side:
In this Node View, the vanilla image is being looked at, as indicated by the little light on the left side. The 1A indicates it is in Viewer 1, buffer A. The tiny textfield on the right side indicates the vanilla parameters are also loaded:
We can use the help window to get information on the nodes. As you pass the cursor over a node (no need to click), it will indicate the resolution, bit depth, node name and type, and channels in that node. For example, we can see that the vanilla image is a FileIn node named vanilla, is 8-bit, has RGBA channels, and is 720x540 pixels:
We can look at the different channels in the Viewer by toggling
the View Channels button .
For example, if you toggle it over to the Alpha channel
,
you can see the alpha:
vanilla, RGB channels | vanilla, Alpha channel |
![]() |
![]() |
However, nobody actually uses that button. Remember when we hit the right mouse on the View Channels button, and it gave us the hotkeys? Use the hotkeys instead when the cursor is over the Viewer to quickly look at a channel.
Setting the Frame Range and Playing Sequences
There are two places to set the frame range in Shake and Tremor. The first and most important is in the Globals tab. This tab is a listing of all script settings, for example the frame range, proxy settings, default resolutions, and proxy settings. The normal Parameters tab is just a listing of parameters for any one specific node.
There are three ways to jump to the Globals tab:
One of the first parameters in the Globals tab is the timeRange parameter. This is the frame range saved into the script to be used when rendering, although you can override that in the command-line. A quick way to get a time range is to hit the Auto button. This will take the frame at which the first element appears up to the last frame that the last element appears. In our case, the longest clips are 56 frames, so hitting Auto will enter 1-56 for the frame range:
The timeRange is extremely flexible:
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. |
You can now launch a flipbook render of any node by clicking
on the flipbook button .
This will launch a render into a floating flipbook. If you are testing
a FileOut node, it will write images to disk. Otherwise, it will
render the sequence into memory allowing you to play it back. A couple
of play controls on the flipbook:
entry | calculates... |
. (Think of this as the > key) | Plays forwards |
, (Think of this as the < key) | Plays backwards |
R,G,B,A,C | Show the red, green, blue, alpha and color channels. |
Shift+left mouse drag | Scrub through the animation. |
Esc | Kill the window. |
Once the flipbook is gone, you've lost all links to it. You can have as many flipbooks as you want, memory allowing. You can stow them to be retrieved later, but they will take up memory.
The second way to indicate a frame range and get playback is with the Time Bar. This is simply the range that you want to concentrate on when you are working, and does not get saved into the script. Since we have set a timeRange of 1 to 56, we can quickly load that into the Time Bar by placing the cursor over it and hitting Home.
You can now hit the Play button on the Time Bar and it will play through the sequence. This is different from the flipbook in that it is probably not real time, but does place these images into the memory cache, optimizing further calculations in the interface.
The third way to play back footage is with Tremor hardware. Use an Image - VTROut and hit the play button on the Viewer itself.
This will take the Global timeRange and calculate your footage into the Tremor disk array. Once it is finished, it will play back at real time. The advantage of this is that it doesn't use memory like the other two methods and you can therefore play a clip as long as you want. For more information, jump to Tremor Reference.
Basic Compositing
Each of these elements has an alpha channel, which makes them ready (and easy) to composite. Select the smoke node by clicking on it in the Node View, and then click on the Layer - Layer node. Although there are several layering nodes (Atop, Over, Outside, etc), they are all combined into the Layer node as well. There is no difference between using the Over node and using Layer with the operation set to Over.
When you click on the Layer node, it will attach itself underneath the smoke node:
The Layer node has two inputs, called knots, on the top of the node. The first one is already taken by smoke. We can now attach the second knot by dragging it from the top of Layer1 to the knot underneath the vanilla node. We could also drag the other way, from the bottom of vanilla to the second knot on Layer1:
![]() |
![]() |
Information flows downwards in the Node View - the image information is passed out of the bottom of smoke and vanilla and fed into the top of Layer1 to do the composite:
smoke (frame 18) | vanilla | Layer1 |
![]() |
![]() |
![]() |
Over is the most frequently used operation. It assumes there is an alpha channel in the first image input. If you look at the parameters for Layer1, one of them is the operation parameter. You can select a different compositing mode with the pop-up menu, but for this composite we will stick with the Over operation.
We can look at the node compositing logic similar to language: "Input 1 is Over Input 2". Therefore, if we switch the inputs, the compositing order is reversed. To switch inputs, grab the bottom part of the line, which we call "noodles". It will turn red when you have it. Just drag it to the other input:
![]() |
![]() |
This switches the node logic:
smoke over vanilla | vanilla over smoke |
![]() |
![]() |
We want to have smoke back over vanilla, so switch them back.
|
Continue to add two more Layer nodes, hooking up the background elements:
This should give us something like this:
Windowing
Both Shake and Tremor have several windowing conventions:
Function | Hotkey | Notes |
Blow a window fullscreen | Space Bar | Hitting Space Bar again will zoom it back down to normal |
Panning a window | Middle mouse or Alt+left mouse | This works in all windows, including theBrowser and the Tremor Function Bar. |
Zooming a window | Ctrl+middle mouse or Ctrl+Alt+left mouse | This works in the Node View, the Viewer, the Time Bar, and the Curve Editor |
Zooming in on a Viewer | +/- by the Backspace key. | This will give you an integer based zoom so you have fewer round-off artifacts on your display. The zoom will follow where the cursor is. |
Reset a View | Home | This works on the Node View, the Viewer, the Time Bar, and the Time View. |
Resize a pane | If you grab a border between two panes, you can usually resize the windows. | |
Selecting a tab | Tab | This is in the Tremor-style only. Hold down the tab key and drag the cursor left and right and it will select the tab column it is over. |
Setting Resolution
Unlike most other compositors, Shake and Tremor are not only resolution independent, but also can dynamically change the resolution during the compositing process. This means you can simultaneously output a HD image and 601 video image. Isn't that something to write home about...
There are several ways to set the resolution in your composite:
We are going to use the first technique. If you look at the hill image, you will see that it is 370x250 pixels. However, when it is fed into Layer3, the output resolution is 720x540. Every Layer operation (meaning everything in the Layer tab, not just the Layer function itself...I knew this would be a problem.). If you double-click on Layer3, you will simultaneously look at it and load its parameters. One of the parameters is called clipMode. If this is on foreground, the resolution of the first image is used. If it says background, the second resolution is used. Therefore, if you toggle it to background, the entire comp gets cropped to 370x250.
We don't want that, so toggle it back to foreground, and we return to 720x540.
We want to make a sky element for the background by using a radial gradation which can be generated by an Image - RGrad node. Nodes that generate images, like Image - RGrad, Ramp, ColorWheel and RotoShape all have width and height parameters associated with them. For example, create a RGrad node and hook it into the tree with another Layer node:
Looking at its parameters, we see that width and height are set to 720x486. You can do several things here. The first, and most tempting, is to not worry about it at all. The Shake engine is designed to allow you to do this because of the Infinite Workspace. See Overview - Infinite Workspace for more information. However, what if you specifically want the RGrad at 720x540? The first thing you could do is to simply change the height parameter of the RGrad:
This is fine and dandy, but what about the next time we create something like this? To help us set the default width and height, we have a swell format pop-up under the Globals tab. You can select from presets (Cinemascope, Academy, different flavors of NTSC, PAL, HD), or open the sub-tree. Under the sub-tree, set defaultHeight to be 540.
This won't change the RGrad we already have, but next time you create a RGrad or reset the parameters for something like the RGrad, it will take this new height.
To reset the parameters for your RGrad, hit the right mouse over the parameters and select Reset All Values:
For more information on resolution, check Overview - Resolution.
Tuning Parameters
Now that we have this fine glowing ball in the middle of the background, we should modify it a bit. Nodes can have textfields for numerical entry, widgets to help you select color, or on-screen controls to help you. RGrad happens to have all three.
First, let's set the position of the circle using the on-screen controls. Just grab the center and move it around. If you grab the rings, you adjust the radius and drop-off:
![]() |
![]() |
Controls for the on-screen controls are on the Viewer bottom. A couple to help you:
Button | Function | Notes |
![]() |
Autokey | When this is on (green), you are entering a keyframe for your on-screen controls. We don't need it on in this exercise. |
![]() |
Delete Key | In case you turned Autokey on, we also have Delete key. Go to the frame you want to delete a key at and blow it away into oblivion. |
![]() |
OSC Color | Sets the color for the on-screen control. |
![]() |
OSC Display Toggle | On-screen controls are always displayed |
![]() |
OSC Display Toggle | On-screen controls are invisible when you move them. |
![]() |
OSC Display Toggle | On-screen controls are turned off. |
Notice as you modify them, the parameters are adjusting to return the numerical data. You can modify the textfields in several ways:
Tremor-style interface:
Action | Notes |
![]() |
Dragging in the textfield will modify the number. The green bar gives you an approximate position of the number in its expected range. |
![]() |
Ctrl+dragging in the textfield will give you more precision |
![]() |
Double-clicking allows you to type in a number. |
![]() |
Shift, Ctrl, or Alt left and right arrow. If you place the cursor over the textfield and hold down Shift, Ctrl or Alt and the tap the left or right arrows, you will raise or lower the number. Shift + arrow means 10x the normal increment, Ctrl is the normal increment, and Alt is .1x the normal increment. |
![]() |
You can also drag below the textfield in the mini slider. This allows you to quickly jump to the minimum and maximum values. |
Classic Shake interface:
Action | Notes |
![]() |
Dragging the slider will modify the value |
![]() |
Double-clicking allows you to type in a number. |
![]() |
Ctrl+dragging in the textfield will activate the virtual sliders, allowing you both more precision, and the ability to go beyond the slider limits. |
![]() |
Shift, Ctrl, or Alt left and right arrow. If you place the cursor over the textfield and hold down Shift, Ctrl or Alt and the tap the left and right arrows, you will raise or lower the number. Shift + arrow means 10x the normal increment, Ctrl is the normal increment, and Alt is .1x the normal increment. |
We'll do animation in the next tutorial.
Additionally, RGrad has two Color Picker buttons, one to control the center color, and one to control outside the center. What does one call that, anyway?
With the Color Pickers, you can edit the color in several ways:
The virtual color pickers work like this. Hold down a 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, (H)ue, (S)aturation, (V)alue, (L)uminance, (C)yan, (M)agenta, (T)emperature
With this mechanism, you can therefore effectively gang all three channels by holding the V key down and sliding left and right.
That's more fun than feeding peanut butter to a dog.
Anyway, you should hopefully end up with something like this. Your colors may vary due to smog conditions.
Transforming images
Those of you who were the type to sit in the front row of school and give apples to the teacher and probably 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, is tucked behind the mid element. There are several ways of fixing this, but we will use the Move3D to take care of it. Select the hill node in the Node View and click on Transform - Move3D. This will insert the node between hill and Layer3:
Click on the left side of Layer4 to make sure you are looking at that node. Notice you can of course look at any node and tweak the parameters of any other node. The on-screen controls for the Move3D appear around the frame of the image's resolution. Remember, hill and Move3D1are at 370x250:
The part that you are going to move will highlight slightly to indicate your cursor focus.
Anyway, with this stunning and merit-badge worthy skillset, pan the hill over to the right side of the image:
If you click on the left side of the Move3D1 node, you will notice that most of it is black, as the controls have panned most of the image out of frame:
Because of a little trick up our sleave called the Infinite Workspace, this isn't a problem, as there is never any clipping of the image if it goes out of frame - you can always retrieve it later on. This is confirmed by the fact that you see the entire hill image if you look at Layer4.
We like the Infinite Workspace. For more information on how much we like it, check out (again) Overview - The Infinite Workspace.
Fading an element
We will do one last step before we render out our animation, which is to fade the smoke a bit. Jump to a frame that has the smoke on it (i.e.,after frame 7). Now select the smoke element in the Node View because that's what we want to attach the effect to, and apply a Color - Fade node. Tweak the fade value down to maybe .5. Hey, check us out, we inserted a node. Great.
![]() |
![]() |
Rendering Out a Sequence to Disk or Tape
If you are still awake, we will finish by rendering out the image sequence.
First thing we will do is save the script. If you hit the Save button , you will save the script under the current name. Because we haven't yet saved the script, it will prompt us for a name. To Save As, use Ctrl+Shift+S. Under the Shake interface, you can also hit the File menu at the top of the screen. In the Tremor-style, use the Menus button on the right side of the Function Bar to access the File sub-menu.
To render files to disk in either Shake or Tremor, you want to do three things:
In Tremor, to send a sequence to tape, you want to do three things:
Rendering a sequence to Disk in the Tremor-style or Shake Interface
We set the timeRange to 1-56 earlier in the tutorial, so unless any of you deviants changed that, we should be fine. Go to your Globals tab to verify if you want.
Select Layer4, since that is what we want to render, and attach an Image
- FileOut node. This will launch the browser. You can create a directory
in the browser if you want with the Create Directory button ,
a rather straight-forward process. Once you have selected where you want them
to go, enter the name into the File name texfield at the bottom the name
of the browser. As a courtesy to other software packages, you usually want to
have three components in the name:
For example, I use comp.#.sgi as my file name. This will write the images as comp.0001.sgi, comp.0002.sgi, etc.
Once this is done, you should now have a FileOut in your node tree, with the file name as the node name:
If you now launch a flipbook by hitting the Flipbook button
,
it won't actually render a flipbook. Instead, it will render images to disk,
but also give you a 320x243 snapshot view of the current frame only. The snapshot
is always 320x243, regardless of input resolution.
If you had instead looked at Layer4 when you hit the Flipbook button, it wouldn't write the images to disk - it would just load up the 56 frame flipbook into RAM.
If you make changes to the comp and you want to re-render over your old output images, just click again on the left side of comp (the FileOut node) and hit the Flipbook button again.
Batch Rendering in a Shell
If you don't want to render in the interface, you can choose to save a script and render on the command-line. Hit the Save button at the top of the interface. Since there is not script name attached yet, it will prompt you to provide a name. For example, save your script as vanilla_test.shk. By the way, Ctrl+Shift+S is Save As...
You can now either stow or quit the interface and go to the command-line. Go to the directory where you saved your script and type in:
shake -exec vanilla_test.shk -v
The -v means "verbose", so it will tell you the status of where you are at. For more information on the command-line, check the Command-line docs.
Using the Tremor Render Queue
Tremor has a built-in render queue that will eventually make its way out to Shake as we expand its abilities. To use it, attach a FileOut, as above.
In the Globals tab, you will find the Render Manager. Your machines that you have specified will be entered in the list of machines, which can then be kept on the list or removed with the Enabled buttons.
Then, with the right mouse in the Node View, select either Render - Render All FileOut nodes or Render Selected FileOut Nodes. At the bottom of the pop-up window is a button for distributeRender - turn it on by rubbing it slowly. Oops, I mean, just click on it.
The Render Manager will then feed you information on the status of the render as your background machines render the sequence.
Rendering a Sequence to Tape in Tremor
If you want to render a sequence to tape in Tremor, you use a VTROut node instead of a FileOut node. On the Viewer will be the controls for the VTR. If you hit the Play button, it will take Global's timeRange and the Time Bar's increment value and start calculating those frames. So, for example, if you have a timeRange of 1-56 and an increment of 2 on your Time Bar, it will skip every other frame.
Once it has finished rendering, it will start playing back.
Among the parameters of VTROut are the timecode in and
out points. If you hit the Disk button
on the Viewer, it will toggle over to Tape mode
.
When in tape mode, you can play your tape using the VTR controls, or use the
timecode display as a virtual slider - just drag left and right in it to shuttle
your tape. When you have found a place you want to insert your footage, hit
the Mark In button
,
or just hit I. The duration will have been automatically calculated
from the timeRange when you created the node. Note that if you have
set a Time Bar increment, it will pad out the frames to maintain the
same duration. Once you have your inTimecode, the duration and
the outTimecode are automatically calculated. Now hit the Record
button
on the Viewer, and you will be recording onto the tape.