by
Chad Rolfs
Special
to Digital Media Designer
Here
is a fun and little known way to use the Liquify command
to create an animation. Though it is not terribly practical,
you may see some other possible creative openings here.
Using layers as the individual frames for your animation,
you can use the Shift key in conjunction with the Liquify
command to create a Liquified animation.
Before
we start, find an image that you want to animate. It is
best if you already have an idea of how you want to animate
your image. For instance, you may have a picture of your
boss and you want to animate so that his ears get really
big. The point here is to have fun with it. I’ve chosen
a picture sent to me by a friend who went fishing in the
Bahamas. Nice, eh?
STEP
ONE:
Duplicate the layer you want to animate. Upon opening the
image, there may be only one layer, a Background layer.
If so, double-click the Background layer, hit OK and it
will automatically be named Layer 0. While holding down
the Option/Alt key, drag Layer 0 to the new layer icon in
the Layers palette to create a new duplicate layer and name
it (e.g. Layer 1).
STEP
TWO:
Apply Liquify to the duplicated layer. Go to the Image menu
and scroll down to Liquify (in Photoshop Elements, Liquify
is under the Filter menu). This will bring up the Liquify
command window. Play with the tools to apply a distortion
in a small amount. This will be the second frame of your
animation (the first is Layer 0). I distorted the image
so that the coat stretches out to the side, the sides of
the hat turn up and the top of the hat expands. Once you
’re happy with the distortion, hold down the Shift
key and click OK. Holding down the Shift key will temporarily
save the mesh settings for the distortion you just applied.
You can then re-apply that same distortion again and again.
This is how you will create your animation frames (layers).
(Note: On Windows, you must already have or create a temp
directory on your C drive, C: \temp).
STEP
THREE:
Duplicate the Liquified layer (Layer 1)and apply Liquify
again holding down the Shift key. As in step one, hold down
the Option/Alt key, drag Layer 1 to the new layer icon in
the Layers palette to create a new duplicate layer and name
it (e.g. Layer 2). Hold down the Shift key, go to the Image
menu, scroll down to Liquify and click OK . Holding down
the Shift key while accessing Liquify will re-apply the
mesh settings you saved in step two. Repeat this step a
few times until you have about 5 layers (frames).
STEP
FOUR (Photoshop 6):
Time to set up the animation. If you are working in Photoshop
Elements, skip to step four (Photoshop Elements)on the next
page. In Photoshop 6, click on the Jump to ImageReady button
that is at the bottom of the toolbox. This will launch your
image in ImageReady.
Once
in ImageReady, click on the Animation palette's flyout menu
()and select Make Frames from Layers . Next, you’ll
duplicate frames so that your animation loops correctly.
Holding down the Option/Alt key, click and drag frame 4
to the gray area to right of frame 5 to duplicate it (frame
6). Do the same thing with frames 3 and 2. You should end
up with 8 frames. Since this animation is going to loop,
there is no need to duplicate the first frame. Preview your
animation by pressing the play button in the Animation palette
or go to the File menu and scroll to Preview In to preview
in a browser. Previewing your animation will allow you to
see if any adjustments need to be made. If it animates too
fast, you can adjust the frame delay by clicking on the
pop up menu under each frame. Selecting all of the frames
by Shift- clicking will allow you to set the same frame
delay for all of the frames and therefore keep a consistent
flow in our animation.
STEP
FOUR (Photoshop Elements):
Set up the animation. If you are working in Photoshop Elements,
you’ve got a slightly different road to take, but the
end result is the same. Since ImageReady does not come with
Photoshop Elements, there is no Animation palette. You will
set up the frames using the Layers palette and create your
animated gif in the Save for Web dialog. Photoshop Elements
allows you to create animated gifs using layers as frames
from the bottom up, so in this example, Layer 0 is frame
1, Layer 1 is frame 2, and so on. You may even want to rename
all of your layers in this manner so that the name of the
layer is the frame number in your animation (e.g. double-
click Layer 0 and rename it to Frame 1). If we want to create
the same looping animated gif as we did in ImageReady, we
will have to create some more frames (layers)so that the
animation will loop correctly. Drag Layers 1, 2, and 3 to
the new layer icon at the bottom of the palette. This will
create duplicate or copied layers (e.g. Layer 1 copy). Next,
drag the layer copies above Layer 4 and reorder them appropriately
for your animation (see example).
STEP
FIVE (Photoshop 6):
Save out your animation. Adjust and specify the desired
settings in the Optimize palette. Make sure GIF is selected.
If you try to save as a JPEG or PNG, you will get a message
letting you know that those formats don ’t support
animation. Once you are satisfied with the file size and
quality, go to the File menu and scroll down to Save Optimized.
Voila!
STEP
FIVE (Photoshop Elements):
Save out your animation. Now that you ’ve set up your
frames (layers)for the animation from the bottom up, it
is time to save it out. Go to the File menu and scroll down
to Save for Web . In the Save for Web dialog, adjust and
specify the desired settings to optimize your animation.
Make sure GIF is selected (JPEG and PNG formats don ’t
support animation). Once you are satisfied with the file
size and quality, check the Animate and Loop checkboxes.
Next, set your Frame Delay . By default, it is set to 0.
2 seconds. Click on the Preview In browser button to view
the animation. If it animates too fast or slow, you can
adjust the Frame Delay setting until you get the speed you
like. Click OK, and that's it! More fun than you know what
to do with.
