Create animated water drop cursor - Tutorial

Log-in or register.

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.

Recent comments

- show all comments
user icon Anonymous on June 30th

Nice I had made 2 cursors and 2 animated cursors(water droplet and fire ball)

user icon Anonymous on July 4th

10/10 Made 2 animated cursors in less than 30 mins AMAZING

user icon Oddrun1 registered user on July 17th

Gonna try it :P Wish me luck! ;-)

user icon Melody Chan registered user on July 20th

Thank you! :-D

user icon Anonymous on August 7th

Hmmm...

Thanks for the "Water Drop - Animated Cursor" Video/Tutorial, dude.

Mine own is about a fat Panda who stares forwards and blink often his big round eyes, somtimes twice!! He also schrink his schoulders too... indeed he is a Great Panda Teacher. His got his own pen on his little right hand ready to write down a line whenever is that posible, and he really moves his ass when there are background Tasks. Such a lovely tiny thing. There are no-one cutier as him about to resize a window... 8-)

JNC

user icon afafsuraya registered user on August 27th

Thank you!! Kasahamnida!

user icon Anonymous on September 11th

funciona perfecto,gracias , thanks

user icon Anonymous on September 12th

download realworld-cursor-editor.softonic.com/descargar#downloading
version 9.1 is more simple and same of the image

user icon Vlasta site administrator on September 12th

Never download realworld apps from web sites other than this one. If you do, you'll likely get some unwanted adware installed with it. If you want older versions, you can get them here.

user icon Anonymous on October 15th

I saved mine as .ani and the animation wouldn't work!
Got any ideas?

user icon Anonymous
What about ICL files?
Select background