#cursor tutorial

I’m using Pixlr editor for this tutorial, it’s very similar to Photoshop just without some tools which for this aren’t needed.

Things you will need for this tutorial:

image you want to make into a cursor

transparent cursor arrow (you can use mine either this or this)

a mouse (find one this makes the job a lot easier)

I’ll be using this picture from THE8WORLD for this tutorial. 

Tip: I use editable fantaken pictures for my cursors as most of them you are able to see the face shape easily (e.g. x x x x you can use these for practice.)

List of editable fansites here 

Tip: Using the site in fullscreen mode makes the cursors more clearer (view > fullscreen mode)

Open your image then click on the maximize button located at the top of the image. 

Double click the lock icon located at the layers to unlock the image then use the navigator to zoom in the image until it’s showing only their head.

Next, use the polygonal lasso tool located at the tools section (lasso tool > polygonal lasso tool) to trace along the shape of their head. 

This part is the most tedious so if you can’t trace it the first time just try and try again (practice makes perfect so try out more and more different images to get even better)

For tiny strands of hair that is coming out or out of place, you don’t have to trace around them since it’s gonna be a cursor anyways so small details don’t matter

Next, invert selection to delete off the background (edit > invert selection). Now the background is selected instead of the head. 

Clear the selected background, which then you will be left with your traced head only (edit > clear)

Crop out the image (make sure to change to aspect ratio) leaving only the head then change image size (image > image size > 80 px by 80 px).

I usually use 100px by 100px but for some reason pixlr can’t resize the image to 100px by 100px but 80px by 80px is still totally fine just make sure the cursors you make doesn’t get any bigger than 100 px by 100 px

Now you have to insert the mouse arrow into your tiny square head image. (exit full screen > minimize image > file > open image > select mouse arrow)

Next you have copy the mouse arrow and paste into your head image. 

(edit > select all > copy > click onto the head image tab > edit > paste > use move tool to move arrow to top corner of image)

Next save image (file > save..). Make sure you change the format into png so that background is transparent.

Upload the saved cursor to any image sharing site. (imgur, tinypic, etc)

And tadah~~~ you’re done just follow these steps to insert the cursor onto your blog :)

Taken form this cute lil’ GIF <3

CODE

LIKE THIS POST IF YOU’RE USING THIS PLEASE!

The back to top pic is included in the theme, idk if your theme has that option

For the cursor:

If you have an URL for the cursor (like if you found it in another website), GOOD. If you created your own cursor and want to use it, then create a new Text post and add as picture the cursor you wanna have. Then save that text post as Draft. 

Then in a new tab open your blog and go to Edit theme. Then go to Edit HTML and AT THE VERY TOP paste this code:

body, a, a:hover {cursor:url(<b>THE_URL_GOES_HERE), auto }

Go back to the tab with the cursor (either the other page or your drafts) and right click on the cursor, select Copy Image Url 

Then go back to the tab with the code and replace THE_URL_GOES_HERE with the URL

I made the pixel in Photoshop

then I put it up Tumblr as Draft, just to have the URL 

(You can put it up anywhere else, like imgur or w/e, what's important is that you have the URL to the image for later) 

Then you take this code that is for cursors

body, a, a:hover {cursor:url(URL OF THE PICTURE GOES HERE), auto }

You copy it

You go to your blog and click edit theme 

Then you go to Edit HTML

And you paste the code at the very very top of the code of your theme

Then you just replace the ( URL OF THE PICTURE GOES HERE ) with the URL of the pixel or picture 

Thank you so much! (“:

Oh sure okay so;

Have your picture (or whatever you wanna use as a cursor) ready.

Make sure its size is small so you dont have a giant cursor hah. (I made my cursor, the sonic screwdriver, on Photoshop CS6)

Then go to ‘Edit Theme’ and on your Description box add this code:

body, a, a:hover { cursor:url(ADD YOUR LINK HERE), auto }

Now go to tinypic.com and upload the small image youre gonna use as a cursor. 

Once its uploaded copy and paste the ‘Direct Link’ onto the part where it says ‘ADD YOUR LINK HERE’ in the code I gave you.

That should do it!