How to Make a Cursor With Photoshop

You can find thousands of custom cursors on the web. However, if you want to make a cursor that identifies you, make it from scratch. A number of shareware utilities create cursors, but their graphic interfaces are clumsy. You can use Photoshop's powerful image arsenal to start the cursor creation process.

Things You'll Need

• Graphic conversion utility
• Knowledge of CSS

Instructions

1. Plan your cursor design. Think about your audience's expectations of the web experience. A personal website can get away with a cutesy cursor. A site intended to attract clients or customers may not.

2. Create your Photoshop file. The file should be 16 pixels by 16 pixels. Use any Photoshop tool to create your image. Try to keep the design simple; cursors shouldn't be distracting.

3. Add layers to create an animated icon. Use the layer underneath the current layer as a reference for motion or change. Hide all but the top two layers when working to avoid confusion.

4. Save your file in a format supported by your conversion program. Most will support BMP or GIF files. Animations must be saved in GIF format. Import your file into your cursor creation software to finish the job.

5. Point your website to your cursor. Upload your cursor to your server. Use CSS to link to your cursor's URL.

6. Test your cursor with several browsers, just as you would test any CSS or JavaScript. Make sure the cursor doesn't interfere with the page download and display. Many developers consider custom cursors to be a gimmick at best and a distraction at the worst.

Tips & Warnings

• Some cursors require a cursor mask (one layer only). To create a cursor mask, copy your file. Select the cursor and fill it with black. The white background will be used to "mask" your cursor.

• Some Macintosh users have reported they can create CUR files by creating GIF files and changing the .gif extension.

• Your graphic conversion program must be capable of opening BMP, JPG or GIF files and exporting CUR and ANI files, such as IconForge or CursorMaker.

• Custom cursor performance is entirely browser dependent. Although Explorer, Firefox and Safari are supposed to support GIF and ANI files, they don't do so consistently.