Cursor Tutorial

Programs Needed

Tutorial

  1. Open Paint.
  2. Go to File > New.
  3. Go to Image > Attributes.
  4. Set your width and height to 32 pixels.
    Image Attributes
  5. Select lime green from the color box.
    • If you cannot see the color box, go to View > Color Box.
    • If you want to use lime green in your cursor, choose a different colour that you will not use.
    Color Box
  6. Select the Paint Can Tool (Paint Can Tool).
  7. Click on the white box to fill it in.
    Background
  8. Draw a small arrow in the top left of the picture or copy and paste this one onto your picture.
    Arrow
  9. Draw your cursor image. If you want to use an image from the internet, go to the next step.
    Finished cursor
  10. If you've already drawn your cusor image, skip this step. Find an image from the Internet. If it's bigger than the green box, you'll need to resize it. Open another Paint and paste the image. Go to Image > Stretch/Skew. In the first two boxes, put 50. If your image is small enough, paste it into the green box and close the second Paint.If not, then go to Edit > Clear. Paste the image from the Internet into Paint again. Go to Image > Stretch/Skew again and try a smaller number (make sure both numbers are the same!) until the image is a good size, then paste it into the green box. Your image may look a little rough. Use the Pencil Tool (Pencil) to clean it up.
    Rough Cursor Clean Cursor
  11. Save your picture as "cursor.bmp" and open Jasc Animation Shop. Go to File > Open and select "cursor.bmp" then click the "Open" button.
  12. Now you need to make the cursor transparent. Go to Animation > Replace Color. Change the Attributes to match the ones on the image below. To change the color of the lime box, move your mouse over a lime on your cursor. The mouse will turn into an eyedropper, click on the green part and the box will turn green. Click the "OK" button, the green area should now be white and grey checkered.
    Replace Color
  13. Go to File > Save As.
  14. Select ANI from the drop-down list below the filename and save the cusor.
  15. Upload your cursor to the internet. Check out the Uploading Tutorial for help.
    • Not all file hosts will allow you to upload .cur or .ani files. Graffiti and Ripway will work, but Ripway will not work on Neopets.
  16. Use the following code to put the cursor on your website. Replace URLHERE with your cursor's URL.
    <style type="text/css">
    body, a { cursor: url("URLHERE"); }
    </style>
    • To check your cursor, got to its URL. You should get a message asking you to Open or Save the file. If you see your cursor, something went wrong. Open the cursor in Animation Shop and save it again. Make sure that the filename ends in .ani and that .ani is selected in the drop down list below the file name.

Troubleshooting

Custom cursors will only work in Internet Explorer, not Firefox.