Create animated water drop cursor - Tutorial

Software
Gallery
Help
- Basics
- Tutorials
- Icons
- Cursors
- Images
- Photos
- Articles
Forum
People

Create animated water drop cursor - Tutorial

This tutorial demonstrates two main areas: making cursors animated and using layers in while drawing cursors. The arrow is created using the arrow shape wizard; the puddle and the drop is drawn with the curve and pencil tools of RealWorld Cursor Editor.

Narration transcript

Welcome to another RealWorld Cursor Editor tutorial. I will show you how to create a simple animated cursor with an arrow and drops of water.

Switch to the Create page and select the "New mouse cursor" wizard. The editor does not differentiate between static and animated cursors.

Pick a color for the cursor outline. I will select a dark blue color.

When you are happy, click the "Create arrow shape" button in the toolbar. You'll see a arrow outline drawn using the selected color. Pick an interior color - a bright blue in my case.

Set arrow tail size to zero and arrow head size to 20 pixels.

Click OK and you have the base arrow. You can generate a smooth arrow shape with this wizard in seconds.

Open the "Layer" panel and add a new layer. Rename the old layer to "Arrow" and the new layer to "Pool". Then move the new layer down.

Switch to "Curve" tool, set its width to 1 pixel and draw an outline of a puddle. Enable the "Closed" option in the tool panel. You can make the shape more complex by dragging the green points.

When you are done, activate the "Arrow" layer and switch to the "Dropper" tool. Click inside the arrow to select the bright blue color.

Switch back to the "Pool" layer and to the "Pencil" tool. Set blending mode to "Paint under" and manually fill the pool. Dont' worry to draw on some of the pixels of the outline.

Click the "Duplicate frame" button in a toolbar above the list of frames. Add a new layer to the duplicated frame, name it "Drop" and move it inbetween the other layers.

Select the dark blue color in the list of recently used colors. Use the "curve" tool (without the "Closed" option) to draw a water drop.

Use the same technique as before to fill the interior of the drop with the bright blue color.

Duplicate the frame and select the "Drop" layer in the new frame. Switch to the "Move" tool and move the "Drop" layer down by one pixel.

Duplicate the frame again, select the "Drop" layer again and move it down again, bu by two pixels this time.

Repeat the same, but move the drop by three pixels.

Turn on the animation in the preview window to see how it looks like.

Then duplicate the first frame and move the new frame to the end of the animation with your mouse.

Select the "Pool" layer, switch to "Curve" tool, select tha dark blue color and draw a ripple on the pool. You would have to switch to "Paint over" blending mode.

Then switch to the "Brush" tool, set its size to 2 pixels and draw three dots over the pool.

Look on the preview to see how the drops are falling into the pool.

Duplicate the first frame again. Add a new layer to the duplicated frame. Move it in-between the other layers and rename it to "Small drop". Then draw a smaller drop into this layer. Draw the outline with a "Curve" tool. Fill it with pencil using the "Paint under" mode.

The next thing we will do is adjusting the animation speed. Each frame is displayed for given amount of time - observe the numbers under the frames. Increasing the number under the first frame to 30 will make it visible for half of a second. Simply select it and type 30 on your keyboard. The drop should probably fall faster - decrease the number on the frames with the falling drop to 6. Finally, increase the duration of the last frame to 12.

The cursor is complete. Save it. Since we are using layers, the default file format will be "layered cursor". But cursors with layers cannot be directly used in Windows. Change the option in the "Files of type" field to "Animated cursor files".

It is a good idea to save the file both as layered cursor for future modifications and as animated cursor if you want to using it right now.

Let's review what we have done. The animation is accomplished by displaying a sequence of different frames. Since the animation cycles, it is a good idea to somehow connect the content of the first frame with the content of the last frame.