How to Make Custom Cursors

Make a custom cursor to improve website design.

Jazz up your website design by creating a custom cursor. While the effect may look advanced, you can make a custom cursor in just a few simple steps.

Things You'll Need

• Graphics software program
• Website
• Website hosting

Instructions

1. Open your choice of graphics software programs and create a new image. You can use Paintshop Pro, GIMP, or any other graphics program that supports the correct file extensions. This image should be no more than thirty-two by thirty-two pixels. Cursors larger than this will not work. Keep the background of the image transparent.

2. Draw your desired cursor shape using the web safe color palette. Enlarging the graphic file and using a grid to see the pixels is a good idea. Then draw the desired custom cursor shape with your graphic program's pencil or paintbrush tool. Draw a simple shape that matches your website design.

3. Save the completed graphic as a .cur or .ani file. The .cur is the file extension for cursors. The .ani file extension is for animated graphics. Cursors will only work in these two file formats. You can save a graphic as an .ani file even if it is not animated.

4. Upload the completed custom cursor graphic to your website server or hosting account. Copy the graphic URL (web address) for use in the code that will tell your website to use the custom cursor design.

5. Paste this code: <style> <!-- body{ cursor:url("yourimage.cur"); } --> </style> directly above the HEAD tag in your website's HTML code. Replace the CURSOR.gif with the actual URL web address of the custom cursor graphic you uploaded in step four. You have now made a custom cursor that matches your website.

Tips & Warnings

• Keep cursors simple for maximum impact.

• Animated cursors take longer to load.