Draw mouse cursor (resizing) - Tutorial

Software
Gallery
Help
- Basics
- Tutorials
- Icons
- Cursors
- Images
- Photos
- Articles
Forum
People

Draw resizing mouse cursor

This tutorial shows you how to draw a smooth mouse cursor for the horizontal resizing role. You will learn how to use the line, flood fill, and pencil tools in RealWorld Cursor Editor. The tutorial also shows how to modify the cursor hot spot using the hot spot tool and how to apply the bevel and drop shadow effects.

Narration transcript

Hello everybody, in this tutorial, I will show you how to draw your own mouse cursor in RealWorld Cursor Editor.

Start by clicking on the large Create button. Then select the New Mouse Cursor wizard and double-click it or click Create.

Switch to the Line tool in the toolbar. Draw a horizontal line with your left mouse button. Decrease the line width to 1 pixel. Change coordinates mode to "Integral coordinates" - this helps you to position points accurately.

Look at the points over the drawn line. Move the middle point (the green one) upwards and a bit to the left. When you release it, new green points appear and you may adjust the line further.

When half of the arrow is complete, click the "Closed" option in the right panel and create the other half. The Closed option indicates that we want to draw a closed poly-line.

Our goal is to create a double-headed arrow - this kind of cursor is used for resizing of windows or for moving splitter bars.

You can use the blue points to modify the line, but unlike the green ones, these do not split the line.

When you are happy with the shape, choose a color. The color picker allows you to select hue, brightness, and transparency. Finally, press Enter or confirm the shape with a mouse gesture and the points disappear.

Now, we will fill the shape. Switch to the Flood fill tool and pick a suitable color. That will be bright blue in my case. There is one more thing: set the blending mode to "Paint under". Finally, click inside the shape. Notice that some pixels by the edges are not filled. We can either increase the filling tolerance, or fix them with a Pencil tool. That's what I'll do. Switch to the Pencil tool and click the pixels one by one. Thanks to the "Paint under" mode, the outline remains smooth.

The "Paint under" mode actually draws the pixel and then places the previous content over the drawn pixel and that is what we need when to keep the outlines smooth.

Let's try our cursor in the Test area. The trail it is leaving does not originate in the center of the cursor. That is because the hot spot of the cursor is not set correctly.

Switch to the hot spot tool and notice a point in the upper left corner. That point indicates, where the hot spot is. Click elsewhere - preferably in the center of the double arrow - to move the hot spot. Notice that the picture in the preview window has moved and it is now in the center of the cross hair.

Verify in the test area that the cursor is working correctly now.

You can make your cursor a bit more fancy by applying effects, for example the bevel effect.

Or the drop shadow effect.

The cursor is complete, let's save it. Pick a suitable name and a folder, where
you have write permissions.

Once saved, it is possible to use it. Active cursors can be changed in the Windows Control Panel, but there is an easier way. Go to the "Cursor" menu, then to "Use current for" and finally pick horizontal resize. Putting your cursor over the splitter or over a window edge now displays your cursor.

That is all. Thanks for watching. You can learn how to make animated cursors in
the next tutorial.