Halloween is Even Closer - Basic Animation with Slimy Type

We'll create a series of layers to use as the frames in the animation. In each frame (layer), the slime will flow down the wall a little bit more. We'll use the Liquify command to actually drag the letters down the wall. Open the file <SlimeText.psd> that you saved near the end of the last session. We'll use that as our starting point. Delete all layers except for the wall and the slime text, and name the two remaining layers appropriately.

Drag the layer with your slimy words to the New Layer button in the Layers palette. That creates a duplicate. Leave the original layer as it was and hide it by clicking the eyeball in the Layers palette. Use the Liquify command on the copy. Just as we did in the previous session, drag the letters down the wall to simulate the effect of gravity on the goo. In Liquify, use a hard-edged brush that's a little wider than the strokes of the letters and drag downward at the base of the letters and other spots where the slime should flow.

Don't drip the slime too much at this point, you're just getting started. The slime should start dripping just a bit from the bottoms of letters and ends of strokes, and perhaps bulging but not dripping elsewhere. The drips should be thicker rather than thinner. (This is NOT based on research with real slime!)

Now drag the drippy copy to the New Layer button to make a copy of it. With this second copy active and the first copy hidden, return to Liquify and make the slime continue its gravity-induced travels down the wall. Extend the trails that you began in the first copy, and perhaps start a few more. When you're happy with that layer, make a copy of it and continue the process. Always work from a copy of your most recent layer so that the slime flows smoothly. After several Liquify/copies, your Layers palette should look like this:

Continue with this process, eventually having the letters collapsing upon themselves and running off the bottom of the wall. You can increase your brush size to make it faster and easier.

When the wall is empty, after 12 or so layers have been created, save your work. Now click the Jump button at the bottom of the Photoshop Toolbox to open the file in ImageReady. (If you have a system that's, shall we say, "memory-challenged," save the file, quit Photoshop, open ImageReady, and open the file in ImageReady.)

In ImageReady, we'll work with the Animation palette and the Layers palette. Each "frame" of the animation is created by showing and hiding layers. You want the layer that contains your background to be visible in all frames, so leave it visible throughout. For Frame One, the only other layer that should be visible is the first text layer.

Click the New Frame button (technically, it's the Duplicate Frame button). Hide the first text layer and make the second text layer visible. Click the New Frame button.

Hide the second text layer, show the third text layer. Continue making new frames and showing/hiding layers until you've created all frames. Preview by clicking the Play button at the bottom of the palette.

If you'd like, you can adjust the timing of the frames at the bottom of the each frame. The Animation palette's menu also offers the choice of "tweening" between frames. Tweening creates new, intermediary frames based on movement of an element, opacity, or effects. (In this case, only opacity is valid É and not particularly effective.) Remember that adding a lot of frames between existing frames can wreak havoc with download times.

In the lower left corner of the Animation palette, you can set the animation to play once or to automatically start over and continue to run. If you choose to have the animation "loop" (start over and run continuously), you might want to adjust the timing of the last frame so that the wall seems to remain empty for a second or two before the slimy letters magically reappear. (You can also create frames in which the opacity of the first text layer gradually increases to have the letters slowly reappear.)

If there are jumps between frames, places where you got carried away in Liquify, you can go back to Photoshop and add new layers in between, then rturn to ImageReady and add new frames. Once you've adjusted the animation and its timing, use the menu command Save Optimized As. Save both the HTML and images for use on the Web.

If you will be using the animation in a Web page designed with Adobe GoLive, choose to include the GoLive code. If not, deselect the box. ImageReady will use the settings in the output options, which you can adjust by clicking the button in the Save Optimized As dialog box. Preview your work by opening your Web browser and using the File> Open command. Open the SlimyText.html file to view the animation.