custom cursors!

/ / / / /

The ever-so-awaited tutorial is finally here! That's right, this tutorial will teach you how to make your very own cursors! If you've followed along with my progress on the site, I once had a cursor requests page. It was all fine and dandy until I recieved 40+ orders and was unable to fill them all! This tutorial takes a bit of graphic skill to begin with, so be aware before you begin. If it gets to be too hard, you can always request a cursor from someone who offers them. Also, if I could ask you, please do not copy and paste this tutorial onto your site; at least type up your own. Linking to it is wonderful, but please do not claim it as your own. Thanks!

Materials

You will need:
-an animation program, such as JASC Animation Shop 3 (click for trial) or Pro-motion
-an account on webs.com
-a font of your choosing
-creativity!

Procedure

1) Open up your animation program. These instructions will be based upon using JASC Animation Shop 3, and may need to be altered in order to be applied to other programs.
2) Click File > New. Your new image must be 32 x 32 and transparent.
3) You should now have a small canvas with a gray-and-white checkerboard background. It's time to make your cursor. The top lefthand corner will be the actual clicker point. This point will be the only part of the cursor necessary to touch something so one can click and follow a link. It is reccommended that you include some form of an arrow here. Now you can add text or any other decorations you would like. For ideas, feel free to look at the examples I've made below. Animated cursors are more complex, but if you want a blinking effect which is quite simple; left-click on the frame you are drawing in and click Duplicate Selected. Then change the colors in this second frame so the cursor will flash.
4) After the curosr is ready, things get a tad bit complicated. Click File > Save as... Locate a folder you will remember easily. You can name the file whatever you would like, but underneath the name you enter, click the drop down arrow beside a listing of File Types, and select Animated Cursor (*.ani). Save the file.
5) Now it is safe to exit out of your animation program. Open up a web browser and log into your webs account. Head on over to the File Manager.
6) Click on the Single File Uploader. Browse until your find the file you saved previously, and select it for upload.
7) Once the file upload is complete, you should see a link to this file on your list. Right-click it and select Copy Shortcut. Paste this into notepad for safekeeping until it is further necessary.
8) Copy and paste the code below into an html box on the webpage you want the cursor to appear. Open up notepad to re-copy the shortcut from earlier and paste it in the code where it says melanie is cool (because it's true). Hit OK on the html box. Now, it should be perfect.

Code

<style type="text/css">body {cursor: url(melanie is cool); }</style>

Samples

Feedback

Questions? Comments? Complaints? Please be sure to let me know what you thought of this tutorial in my GUESTBOOK. No feedback will lead to no more tutorials. So keep me posted on your thoughts, I'd love to see your cursors!

back