Home  >  Tutorials  >   Effects V7  >
Water Animation
E-mail this tutorial to a friend Email to a Friend

Water Animation
Created by: Prof

Water Animation

Creating a water effect using animation rather than Java is easy to do with PSP and Animation Shop. The process is relatively easy, though the steps require time and patience.

This tutorial will show you the basic techniques to create a very realistic water effect using the 'Underwater' Image Effect in Animation Shop. Once you master these steps, you will be able to create an animated water effect from any photograph including lakes, water falls, streams, puddles, oceans and more.

The first part of the tutorial will take you through the various steps to create the animated image. The last part of this tutorial will provide a brief review of using the 'Underwater' effect and its options and values with some tips and hints how to explore them and view the animation prior to finalizing it.

Download the attachments for this tutorial  Download Files
For this tutorial you may either choose your own picture or download the '/tutorial/html/tut7eff/sunset.jpg' picture here. (To learn this technique it is best to choose a photograph where one is able to easily select the water area from the photograph.)

The Basic Steps

The steps to creating an animated water effect are straight forward. However, a number of steps require time and patience.

Overview of Steps:

– Open a photograph with water
– Select the water area
– Open Animation Shop
– Apply Effects || Insert Image Effects || Underwater
– Transfer Animation Frames to PSP building image layers
– Save each image layer
– Use Animation Wizard in Animation Shop
– View Animation
– Save Animation


Standard Toolbar - Open (image) button

Sunset photograph
Sunset.jpg Photo

Styles     Layer Palette - Create layer button

Tool Palette - Drawing tool

Sunset photograph with selection line
With Selection Line

Tool Palette - Magic Wand tool

With Magic Wand selection
With Magic Wand selection

Layer Palette - Delete layer button

With line layer deleted
With Line layer deleted

1. Open Photograph and Select Water Area

In this photograph the water area will be very easy to select. The technique is to use the Drawing tool with either 'Point to Point' or 'Freehand'. Also, if the water area is more complex, you might find it easier to zoom your photograph to have a little better control over drawing the selection.

  1. Increase the image window by placing the mouse on a side, hold down its button and open up the image some (drag out) to see transparency on all sides.
  2. Set Foreground Style to Solid Color (the brush icon) and the color to contrast with the photograph (I used white).
  3. Set Background Style = Null. (Click on the background-style arrow and select the fourth icon from left.)
  4. Add a new layer above the photograph Background layer.
  5. Use the Drawing tool:
    – Type = Point to Point Line
    – Width = 4
    – Antialias = unchecked (saving as a Gif file, we do not
       want partial transparency areas.)
    – Create as vector = unchecked (If you know how to use
       vectors, sometimes by using this option you may find it
       easier to get selections around curved areas in the water
       part of your image. However, it is not necessary to use
       this feature.)
    – Close path = unchecked
  6. Select the water area by applying the 'point to point line' around all water areas to be animated.

    Hints and Tips:

    You can click on any point node, hold the mouse button down and drag the point node (handle) to better position it.

    Leave some water area outside of the selection so that there is some water around the edge of the landscape or in the sunset.jpg image at the horizon. By doing so, when you animate the water you will find a smoother transition at the edges of the landscape and water.

  7. Make sure your edge handles are off of the picture.
  8. Then, right-click on the image and select 'Quit Node Editing' to set the selection line.
  9. Use the Magic Wand tool and click inside of the selection line (into the water area).

    Note: If the selection (marching ants) just surrounds the water, you are fine. However, if the selection goes into any other part of your picture, you will need to redo your selection line.

  10. Save the selection: Use Selections || Save to Alpha Channel
  11. Finally, delete the layer for the line as it is now no longer needed.

Do not deselect.

You want/need the selection showing. Should you ever lose it, then use Selections || Load From Alpha Channel to retrieve the selection.



2. Create the Animation of the Water Selection

In this step, we first copy the selection, then open Animation Shop, paste the selection as a 'new animation' and finally, apply the 'Underwater Image Effect'.

Time will be needed to find the correct settings for the 'Underwater' effect that produces a smooth water ripple. (At the end of the tutorial, I will briefly review the 'Underwater' options.) When using this technique on another photograph, you may need different option values.

Standard Toolbar - Copy button


First copy the selection and transfer it to Animation Shop:

  1. In PSP, copy the selection: Use Edit || Copy [Ctrl+C].
  2. In Animation Shop, paste as a new animation:
    – Open Animation Shop: File || Jasc Software
       Products || Launch Animation Shop
    – Use Edit || Paste || As New Animation [Ctrl+V].
       (If there is a transparent area at top of this image, that is
       no problem.)
Insert Image Effect Window - the Effect Selection Area
  1. In Animation Shop, use Effects || Insert Image Effect.
  2. In the 'Insert Image Effect' dialog box, in the 'Effect' area, select 'Underwater':
    – Click on the down arrow and scroll in the list almost to
       the bottom to select 'Underwater'
    – Check 'Show Preview'
    Do not click on 'OK' yet.
    (Do not worry at this point about the settings or the effect being applied in this window. We will set them with 'Customize'. Just notice that once you select underwater, the effect is applied with the current set of settings.)
Insert Image Effect Window - the Define Effect Area
  1. Set Effect Length and Frames Per Second:
    – Effect length = 2.0 secs
    – Frames per second = 6 fps

    Tip: Click on the slider and then use the arrow keys to set the values.

  1. Click on the 'Customize' button to set the Wave Effect values:
    – In Effects: Apply Both = checked
    – In Effects: Sunlight Intensity = 20
    – In Liquid Properties: Water Depth = 2

    – In Waves: We will use just 2 Waves:

    Wave #1:
    – X = -2
    – Y = 10

    Wave #2:
    – X = -1
    – Y = -5

    – Click on OK.

View Animation


Water selection animated with Underwater effect
  1. You are back in the main Animation Shop window. To view your animation, use View || Animation.

    Note that there is one frame that will jump. This frame is the original water image and now needs to be deleted:

    1. In the 'Frames' window, go to F:1 D:10 (your D: value may be different). Use the slider at the bottom of this set of frames and slide it all the way to the left for Frame 1.
    2. Click in Frame 1 to highlight it and then use the 'Delete' key. You should end up with 12 Frames.

Now, your animation will be smooth. We are finished with creating the water animation frames. You will not save these frames as an animation. However, in the next step we will copy each frame and paste it into our full image in PSP.

Again, we do not concern ourselves with the transparent areas at the top of the frames.



Animation Shop: Copy Frame(s)

Layer Palette - Create layer button

Animation Shop: Copy Frame(s)

Layer Palette - Create layer button

3. Copy the Frames from Animation Shop to PSP

In this step, we will copy each frame of the animation (12 altogether) in Animation Shop and paste them into a new layer each in the original image in PSP.

  1. In your image in PSP, rename the 'Background Layer' to 'Layer 1'. (Since we do not want the water from the original, we will paste Frame 1 of the animation on this layer.)
  2. In Animation Shop, highlight Frame #1. Then copy it: Edit || Copy [Ctrl+C].
  3. In PSP, highlight the top layer. If the selection is not showing, use Selections || Load from Alpha Channel. Then, paste into the selection: Edit || Paste || Into Selection [Shift+Ctrl+L].
  4. Add a new top layer and label it 'Layer 2' (or the next higher number in sequence).
  5. In Animation Shop, highlight the next frame in sequence and copy it.
  6. In PSP, highlight the top layer, paste into the selection, and then create a new top layer, labeling it in the next higher number in sequence.
  7. Repeat copying the next frame from Animation Shop and pasting it into a new layer in PSP until you have 12 layers.

Note: If you labeled each layer from bottom to top in sequence starting with 'Layer 1', 'Layer 2', etc., the next step will be easier.



Standard Toolbar - Save (image) button

Layer Palette - Layer visibility off

Layer Palette - Layer visibility off

4. Save Each Layer as a Separate Image

In this step, we will save each layer as a GIF file. (Note, it is also possible to save each layer as a PSP file.) Each image saved needs a naming sequence so you are able to determine the order of these layers as they represent the frames in the animation. (Also, note by starting with the top layer and moving down one layer at a time, it is a bit easier to see the frame being saved as well as keeping track of the saved layers.)

  1. First, save the whole image as a PSP file to preserve your work.
  2. Highlight the top layer, then
    – Use File || Save As and select GIF as file type.
    – Save this image (and all subsequent images) in a folder
       you will remember as you will use the folder in creating
       the animation.
    – Label this file as: Layer12.gif or image12.gif or
       something like that starting with the highest number
       of the frames created in Animation Shop.
    – Turn off this layer.
  3. Highlight the next lower layer, then
    – Save this file in the next naming sequence such as
       Layer11.gif, etc.
    – Turn off this layer.
  4. Repeat this process for each lower layer until all 12 layers have been saved using the naming sequence so you know the order of the images saved.
  5. Once all layers have been set, deselect: Use Selections || None or press Ctrl+D.

Animation Wizard

5. Create the Animated Water Effect

It is now time to create the Animated Water effect. In just a few moments we will see the neat effect from all our hard work.

  1. In Animation Shop, click on the 'Animation Wizard' button or use File || Animation Wizard [Shift+A].
  2. Check 'Same Size as the first image frame' and then click on 'Next'.
  3. Check 'Transparent' and then click on 'Next'.
  4. Check 'Centered in the frame' and 'With the canvas color', leave 'Scale frames to fit' unchecked and then click on 'Next'.
  5. Check 'Yes, repeat the animation indefinitely' and set the time for each frame = 10. Then click on 'Next'.
  6. Add your images:
    – Click on the 'Add Image' button.
    – Go to the folder where you saved your images.
    – Highlight all 12 images and click on 'Open'.
    – Use the 'Move Up' and 'Move Down' buttons to move the
       images so they get ordered correctly. Just highlight an
       image to move and then move it.
    – Once all images are ordered correctly, click on 'Next'.
    – Then, click on 'Finish'.

View Animation

The Animated Water effect without using Java

Your animation (frames) has been created. To view your work, use View || Animation. And there you go! Your water effect without using Java has been created.

Note that this animation has the water flowing to the right. Had you set different values in the Customize of the 'Underwater' effect, you could create the flow in any direction wanted.

Experiment with different values to create interesting water effects. Though to produce this animation takes time, the end result is very much worth it and there are endless possibilities. Check my homework page to see various water effects from different photographs.

Below is a brief overview of the various options in the 'Underwater' effect with some hints and tips for using it.

Insert Image Effect Window - the Define Effect Area

Brief Review of the 'Underwater' Options

  1. In many of the various effects available, there are some common options.
  2. The 'Define Effect' options ultimately set the size of the final GIF image (animation). There are two (2) interrelated options; (a) Effect Length in seconds and (b) Frames per Second. These two values set the Total number of Frames in the GIF animation image.

    Keep in mind that there are a number of factors that determine the ultimate size of the final product. First, the image (photo) size, and the number of frames in the GIF animation image. You want to keep the final size as low as possible.

    Finally, the longer the Effect Length and the higher the Frames per Second the result is a smoother animation effect. However, it is also a larger file size as well.

    In our image we used a total of 12 frames. This total number of frames will give us a balance between file size and smoothness of the effect.

    To set the Effect Length, click on the slider (or in front of or behind the slider) and set to 2.0 secs.

    To Set the Frames per Second, click on the slider and set to 6 fps.

Hint: When you click on the slider you can use the arrow keys to move it.

Underwater Settings

Underwater Settings

Underwater Settings

Underswater Settings

Underswater Settings

Customizing the Wave Effects Options

The key to the 'Underwater' effect is its Customization options. Setting the values will take experimentation, and time. However, going through the exercise of finding the settings which compliment the particular water image is both fascinating and fun.

I will very briefly provide you with a review of the three key options: (a) Effects, (b) Liquid Properties, and (c) Waves. It is the interaction of these three sets of values that produce the type of wave or underwater ripple effect. I will also just provide you with the settings I used in this tutorial.

  1. The Liquid Properties set the 'Water Depth'. Greater values will produce greater distortion. Since in our image I want more of a surface effect, I set the Water Depth = 2. Essentially, lower values are most likely better for the Java Lake-like effect.
  2. The Effects set either (a) a 'wavy water effect or undulation' with 'Apply refractive distortion', (b) an increase in the moving light (sunlight), or (c) both simultaneously.

    Lower values create a smoother lake effect.

    My values are: (1) Apply Both and (2) Sunlight Intensity = 20.

  3. The Waves option sets the number of waves, their direction, height and length dependent upon the values of 'X' and 'Y'.

    The more waves, the more the wave or ripple effect.

    The larger the values of 'X' and 'Y', the greater undulation of the waves.

    The positive or negative values of 'X' and 'Y' will determine the direction or flow of the wave effect.

Note 1: These Underwater values need to be explored for each type of water image as there are no default settings.

Note 2: Lower values tend to produce more of a water surface and ripple effect while larger values create more of an ocean undulation or rolling wave effect.

Note 3: Though not a hard and fast rule, for the 'X' and 'Y' values positive values tend to move the flow to the left while negative values move the flow to the right.

Note 4: Experimentation is the best teacher.



Method/Technique for Setting Values

When you explore the various option values you want to see the animation while you experiment to find the values that compliment your image. The technique I use is to first set the 'Underwater' effect:

  1. In the main Animation Shop window, click on Effects || Insert Image Effect.
  2. Click on 'Customize' for the Customize dialog box.
  3. Set the values for the option or options.
  4. Click on Ok and allow time for the frames to be set in the main Effect dialog box.
  5. Click on OK in the main Effect dialog box to apply the frames.
  6. Back in the Animation Shop window, click on View || Animation to view how these setting appear.

Note: At this point there will be a 'jumpy' frame. This is Frame 1 which is the original frame and does not have any effect applied to it. When you are satisfied with your animation you will delete this frame. But for now, just leave it.

  1. If not satisfied with the effect, to undo it, click on Edit || Undo Insert Image Effect.
  2. Now, just repeat these steps until you have an effect that you like.

Some Hints and Tips

  1. Take time to explore various settings including the number of waves to use, and their settings. This step takes time due to the time needed to set or apply the options. However, it is well worthwhile to explore various options to find the one or ones that will work well with a particular water selection.
  2. Once you have an effect you like, you may want to change the frame delay values:
  • Use Edit || Select All
  • Use Animation || Frame Properties and then set the value.
  • Then, in the animation see if you want to reset the delay values.

  • Even though a fewer number of waves and low values for settings give more of a ripple effect, also explore setting high 'X' and 'Y' values as both combined with the number of waves as well as their direction create interesting results.
  • Once you have finalized an animation and have saved it to a file, you want to check out the file size. If the animation width and height are large, you can resize the animation, you can lower the quality of the final product to medium and you could set a fewer number of frames for the effect.

    Often reducing the width and height of the animation will significantly reduce the file size. Once again, some experimentation will give you better ideas of how to proceed.

  • As always, have fun. -- Prof --