Create a Custom Mouse Cursor

Just for fun, create yourself a custom 3D Mouse Cursor that can be used for your UT3/UDK/UE4 ‘In-Game’ Mouse cursor, or for your desktop Cursor


For Unreal:

  • import into the Engine as Normal

For windows:

  • save the custom image file as a “.ico” into your OS “C:\Windows\Cursors” Folder (Or whatever you main Drive letter is)
  • load it in your control panel settings > Mouse properties > Pointer

Tutorial:

Step 1: Creating the Mouse Pointer

  • make a new document at a size of 617 x 621.
  • Photoshop already has a pre-built mouse for us to use.
  • go to your toolbar and click on the Custom Shape Tool (or you press U on your keyboard)

Once you have the custom shape tool selected look up at your Options Menu Bar (the bar below file ,edit, image …..) and click on shape.A new popup window will appear with many shapes to choose from but what we want is the mouse pointer so scroll down untill you see it then click on the solid black mouse pointer.

Now we have to choose our color for our mouse so click on the foreground color box and type in this number for our color fd6c28 ( this number should be put in the box that has the # sign next to it ) .Now we need to make a new layer and name it Arrow Surface.Next make sure you have the custom shape tool selected and just click in our and drag in our document window and create our mouse.Now it doesnt matter how big you make this just as long as its not bigger then the document of course.Ok so thats complete lets move on to the next step.
Step 2: Making it 3d

Ok now this step is pretty easy but it may take you a few tries to get it just right.Now to make this thing 3d we have to give the illusion of depth so what we do is first make a new layer and name it Arrow Depth.Now we must grap the selection of the Arrow Surface layer. So select the magic wand tool and make sure you have the Arrow Surface layer selected and click inside of our orange arrow.

Ok great now we have that done lets select back on to our Arrow Depth layer and what we will do is fill this with a shade of light orange so click on the foreground color box and type in these numbers fccb91( this number should be put in the box that has the # sign next to it ) once that has been done click on your paint bucket tool and fill the arrow selection or if (you can also just use the hotkey Alt + backspace) Now you wont see the color you justed filled the selection with since its behind it so the next thing we are going to do is moving it at a certain angle to give it a 3d look.

Now before we move this layer make sure you deselect the selection.Now start to move the Arrow Depth layer down and to the right about 1/8th of a inch i know this might be a little tricky but just refer to the video clip and screen shots to see it in action.Now once you have moved that its time to do it all over again so duplicate the Arrow Depth layer and move it another 1/8th inch down and to the right.So now you should have 2 Arrow Depth layers, right now it looks really spikey on the edges so next we gotta make a nice smooth angle on the corners.

Alright now in order to get rid of those spikey edges we are going to use the Polygonal Lasso Tool Polygonal Lasso Tool so make a new layer then click on the Polygonal Lasso tool and create a angle between all the spiked edges and then fill it with your paint bucket. I know this might be hard to understand and its really hard to explain with just text so i created a nice video showing how this entire step is done below.So once you have that done its time to move on to step 3.

Step 3: Adding Color

Ok now comes the good stuff, making our arrow look pretty.So first off lets start with coloring the background. So click on the foreground color box and set its value to this 450506 ( this number should be put in the box that has the # sign next to it ).Good!! now select the Background layer and then click the paint bucket tool and fill the background with our foreground color we just put in.Now click the gradient tool once you have done that we must edit the gradient so click on the gradient image in the options bar.Once you have done that the gradient editor will appear and from this editor we want to select the second preset box in the list which is called Foreground to Transparent it looks like this >>Foreground to transparent

Now once you have that selected its time to edit it. Now this next part is very hard to explain so i want you to look at this picture below and match all of my setting, you dont have to be exact with the color positions but just close enough, now if your a beginner to photoshop and have no idea how to work the gradient editor you can just view the video clip of this at the end of this step.

Now that we have our gradient set name it Fire Gradient then click New and then click Ok. Alright now we must make our background so with the gradient tool selected look up at your options menu bar and make sure the radial gradient is selected. Now click and drag out from the center of the document and release then BOOM we got our background (Looks Pretty Dont it).

Next up is our Arrow Surface layer and just like before we are going to make a new gradient so open up the gradient editor once more but this time we are going to use the Foreground to Background preset and after you selected that copy my setting below.

Good now select the Arrow Surface layer and then grab the magic wand tool and select inside the arrow.Now that you have that selection get your gradient tool again and look up at the options menu bar and make sure you have the radial gradient selected.Now drag your gradient tool from the lower right of the arrow to the top corner of the arrow.DONT WORRY i have provided you with a exaple image so you can see how to drag your gradient tool and as always you can refer to the video clip of this step as well for further help.

Step 4: (Final Step) Making Shadows and Gloss

Ok boys and girls were almost done all that is left is to make some shadows and make the arrow shine more.Now this step wont be easy and will most likely take you a few tries to get just right.The reason why is because we are going to be doing alot of drawing by hand for the shadows and gloss.I HIGHLY recommend you watch the video clip for this final step closely to see how this is done.

Ok so First we are going to be working on the Arrow Depth layers but we need them to be in one single layer including the layer we made our edges on from step 2 so hold shift and select all 3 layers and then go up to your menu bar and click Layer then click Merge Layers (or press Ctrl + E if your on a PC) ok we got those into 1 layer so now we can start putting in our shadows.

Alright now select the Arrow Depth layer and add a inner shadow layer style to it and copy my settings below then click Ok


Notes:

This tutorial was adapted from givemefreeart.com . The link is no longer available but can be seen on the WayBackMachine Archive [https://archive.org/web/]


Links:

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s