PREFACE:    
The past years many people asked me how to create animated cursors. Presenting this little tutorial I will try to give answers and I will encourage everybody to create your own cursors. It's not very complicated to create animated cursors and maybe you really are a creative cursor creator.

THE CURSOR EDITOR:    
All you need is a little bit artistic talent and a special software, the cursor editor. A cursor editor is a program where you can design and draw a cursor. Most cursor editors consist of a paint surface, where you create the cursor shapes and fillings and several tools for paintings - just like a normal graphics program. Only a few editors don't include their own paint module, there you import single paintings from other programs and the editor unites them and creates an animated cursor this way. But this editors are exceptions and so we don't deal with them here in this tutorial.

You will find links to all actual cursors editors available on the internet on my software download page. On the corresponding homepages of the software developers you can download the cursor editors. Most cursor editors are shareware. So you can check them out for a limited time period and finaly you have to decide whether you will keep the the software or not.

Here you will find the download page

THE CURSOR SIZE:    
OK, let's start now.
Each cursor has a special size. The standard size is 32 x 32 pixels, this makes 1.024 single pixels you can paint in a cursor.

Each square = 1 pixel The editors paint area has a size of 32x32 pixels

When you start your first project you will see: this is really small and there's no place to create huge paintings. It's just the right size for arrows and little objects. But in case you try to draw a logo or a face this may becomes a very difficult process... Off course you can draw an object smaller than 32 x 32 pixels too. But keep care, later it may looks very strange on the desktop depending on your monitor size and resolution. It's anyway important to harmonize look of the cursor, monitor size and resolution.

THE CURSOR ANIMATION:    
You create an animated cursor just like a cartoon. A lining up of single pictures. Several pictures lined up result in an animated cursor. So you have to create several single pictures in your cursors editor and the editor finally creates the animation effect. In the cursor editor language a single picture is called frame. Several frames are giving an animated cursor. Extensively animated cursors may include douzens of frames. The more frames you include in an animation sequence the more flowing and softly appears the final cursor animation.

Looks like a cartoon sequence - the IconForge-frame-overview

For remaining the animated cursor constantly animated, the frames are always played in a continuous loop. After playing the last frame of the animation sequence the next animation sequence starts again with the first frame of the sequence. This repeats frame sequence for frame sequence.

Ready!

So you have to keep an eye on the last frame of an animation sequence. From the last frame to the first frame there should be a smooth transition to obtain a flowing animated cursor.

In case there's only one frame in a cursor (for example a simple arrow) this cursor is called a static cursor. The file extension of a static cursor normaly is *.cur. The animated cursors file extension is *.ani. There's no need to create each frame of an animation sequence entirely new. Create the first frame, then copy it and only change a few details of the first frame in this second one, then copy the second one and change only a few details in this third one.

Add a new frame

Most cursor editors include a function, which takes over the contents of the previous or another frames when you add a new frame to the animation sequence. This is very helpful because then you need to change only the part of the frame, where you want an animation effect. For example: if there's a face and you want change only the eyes, you want them rolling or looking to one side, then you paint the entire face and the eyes in the first frame. After that you copy this first frame respectively the contents of the first frame into the second frame of the animation sequence and there you only change the position of the eye. Then you can take over this second frame for the creation of the third frame and there you change position of the eye again. You can repeat this again and again and finally you have created a face with animated eyes.

A little hint for animations like an eye looking from the left side to the right side: When you have created the entire animation sequence for the first

You can use some frames two times

direction, for example for the look from the right to the left side, you can copy all the single frames of this direction for the opposite direction frame for frame. Why ? All frames displaying a different eye position except the frames displaying the lateral eye positions are required two times for this kind of animation, for each direction one time. So you save the time to create and paint new frames for the opposite direction when you already have created the frames for the first direction. In the eye cursor example you have to draw only 7 different frames instead of 12.

Frames list AX-Cursors

The different frames of an animated cursor sequence are listed very clearly in a special window or special part of the cursor editor program surface. There you can select special frames for working them or you can select, copy and paste them to another position in the animation sequence. Off course you can also open and work cursors created from other cursor authors in a cursor editor. Maybe you downloaded a cursor from the internet or you found it somewhere else. This is interesting if you want to adapt a foreign cursor to your own requirements. In case you plan to use this altered cursor only on your own computer this is not problematic. But please observe the copyrights of foreign cursor creators in case you plan to publish the worked cursor for example on your homepage or in cursor collections on the internet or somewhere else.

IMPORT / EXPORT OF FRAMES / PICTURES:    
Most editors include import and export filters. Using this filters you are able to import picture files such as windows bitmaps (*.bmp), gif-files or animation files such as avi or animated gifs or export / convert frames and animated cursors into normal picture files or other animation files. You can import pictures into a cursor frame and work a cursor with them. But please consider that such pictures are larger than 32 x 32 pixels in size and mostly they are not quadratic.
So you have to reduce the size to a maximum of 32 x 32 pixels, the cursor standard size. Most cursor editors offer this feature and reduce the size automatically to 32 x 32 pixel.

AX-Cursors asking for paste / resize options

You can imagine the result may looks very curious since there are distortions and many pixels of the original pictures get lost because the reduction of the picture size. Usually this will not further the fine-looking of the cursor - but you cannot prevent this effect.
Usually the cursor editor is asking for a decision what method you prefer in case you want import a picture file larger than 32 x 32 pixels: paste at scale 1 : 1, resize the picture, extend or stretch the picture. Little divergences from quadratic sizes are not problematic as a rule.

In practice the following method works satisfactorily to avoid too big quality losses while reducing a picture to small 32 x 32 pixles size: Don't let reduce the picture from the cursor editor but reduce the picture in a good graphic program.

Reduction to 32 x 32 pixels causes a big loss of quality

Any graphic programs include features where you can resize pictures. So first clip the picture to or at least nearly to quadratic size, after that reduce the picture to a size of about 32 x 32 pixels.

When you have finished this work you can copy or import this new little picture into the cursor editor respectively into a new frame of the cursor sequence. However, you should not expect miracles. Reducing a picture of perhaps 400 x 400 pixels or 160.000 pixels in all to a picture of 32 x 32 pixels or 1.024 pixels in all doesn't result a good looking picture. There's a loss of 158.976 pixels, only 1.024 pixels instead of 160.000 pixels must be sufficient to display a more or less large image object!

The cursor editors export feature can be very useful too. You can export single frames and convert them into bitmap files or other picture files. In addition you can convert animated cursors into animated gif-files or avi-files. In that case you are able to add this animations to your website. This is interesting for example for cursor authors who present their cursors on their homepage and want to give their visitors a little preview of the animated cursors available.