How to make a cursor.
So. This is the first “tutorial” I’m ever writing. I hope I do a good job at explaining everything!
If you’re making a cursor for Tumblr it’s different than making one for your computer. They start off the same way though. Making/Drawing/Designing/Whatever word you’d like to use your cursor.
I’m using Photoshop. Technically you could use Paint. They both allow you to save pictures as .PNG files. Photoshop will make your life a lot easier though. I’m using Photoshop 7. Odds are you have a much newer version than me. Most things should still be the same though. :)
Step One:
Make a new document that is 32pixels by 32pixels.
Step Two:
Zoom in 1600%
Step Three:
Design your cursor. What you make is totally up to you. For the sake of this tutorial I’ll show you how to make a simple triangle. If you already know what you’d like to make skip ahead to step four.
Triangle Cursor.
1. Make a new layer. Start by “drawing” a line 25pixles long down the edge of the “paper”. I’m using the color #8300A4. Make sure you are using a square pencil that is 1pixel and at a 100% hardness.
To switch to a square brush/pencil:
To select the brush/pencil tool and size:
If it is automatically set to a brush (like mine is) RIGHT CLICK on the brush and than select the pencil tool.
To change the hardness:
Wow. I made that look a lot harder than it is! Haha. :)
The reason you want a square pencil is to make it easier to make sure your line is exactly 25pixels long. You can just make the line one square at a time. Now instead of thinking of it as 25pixels long you can think of it as 25squares long!
So here is our line:
I pinky swear in gets easier from here!
2. Now we make a line that is 8 pixels long going diagonal to the right.
3. Now we go 10pixels to the right.
4. Now up 18pixels diagonally to the left.
5. Now use the fill tool to fill it in. Pick a lighter color than the color you used for the outline. I’m using #CA1AFD.
6. Now we’re going to change some blending options.
Now we change the Bevel and Emboss
Next we work on the Contour
Now the Inner Shadow
Now click okay.
7. Now click on your background layer once to make sure it’s selected. Than delete it. Now we have a transparent background.
Now just save it. Make sure you save it as a .PNG file.
In the top right corner click on “File” than “Save As”
Okay, now back to the main tutorial.
Step Four:
There are a few options for this step. It Depends on what you’re using it for.
For Tumblr:
You need to use the following code:
<style> body, a, a:hover { cursor:url(URL GOES HERE), auto }</style><a href=””></a><a href=””></a>
You’ll also need a “direct URL”. It’s very easy to find this. Save the image anywhere on the internet. (I have a page on my Tumblr.) You can use Photobucket and sites like that too. Some of them give you the direct URL. Others block you from getting it. So. Yeah. Play around with that. Once you have it on the internet RIGHT CLICK on it. Click “View image in new tab” copy the URL and paste it into the code where it says “URL GOES HERE”. Copy that code into your Tumblr’s description.
If you’re using it for your computer there’s A LOT more steps. So bare with me.
You’ll need a cursor program. I use Axialis. I believe it costs $60. When I got it I got a free 30 day trial. I’m not sure if that’s still something they do or not.
Open your image up.
Once it is open press “i” on your keyboard.
A box will pop up. Choose 32X32-256
Click okay.
Here’s a tip. There’s a button that looks like this
Now just save your cursor.
To set this as the cursor on your computer:
1. Click on start
2. Go to control panel
3. Click on “Mouse”
4. Click on the “Pointers” tab
5.Click browse
6. Find the cursor
7. Click open
8. Click apply
9. Hug a guinea pig
10. You now have a cursor.
I hope I did an okay job of explaining everything. Let me know if you have any questions! :)
TUTORIAL #1 : How to make a cursor
- Open a new file (120x120 max)
- Then, write the text or post the photo you want
- Delete the background
- Put the cursor and save it
- Open your file on tumblr, tinypic or anothers websites
- Then, put this code : <style> body, a, a:hover { cursor:url(CURSORURLHERE), auto }</style>
- And replace ‘CURSORURLHERE’ by the picture’s url
- Then go to customize page > HTML code and put the code after <head>
I hope it helped you, if you have any questions feel free
How to make a cursor
Well yaaa sometimes it’s pretty funny to have a different cursor on your blog. So that’s how you make it (works with animated cursors, too!):
1. Make a cursor (and upload it) or go look for one in the Internet. It shouldn’t be bigger that 50x50px
2. Edit the HTML of your template:
a) Scroll down until it says <style type=’text/css’>
b) After <style type=’text/css’>, copy and paste the following code:
body, a, a:hover {
cursor: url(Graphicadressofyourcursorshouldbehere), auto;
}
c) Copy and paste the graphic adress of your cursor between the () in url()
d) That’s it!
3) Understand what the code does:
When you paste the code after <style type=’text/css’>, it edits the CSS, which means it is part of the style sheet, not exactly part of the HTML.
body, a, a:hover { } means: On the whole body of your blog, also on hovering. This means not that the cursor that appears while hovering over different objects (like links, images, headers, etc.) on your blog must be replaced by your own cursor!
cursor: this “announces” what should happen to the cursor.
url(Graphicadressofyourcursorshouldbehere), says where to find the picture data for the cursor.
auto says that for the cursor it should use your settings.
; is end of the command.
I hope this was useful :D Any questions?
> other tutorial: Change the font of your blog.
Hey sweetie, after you make a cursor, how do you use it for tumblr?
My lazy self is just going to copy and paste what I wrote in the tutorial. XD
You need to use the following code:
<style> body, a, a:hover { cursor:url(URL GOES HERE), auto }</style><a href=””></a><a href=””></a>
You’ll also need a “direct URL”. It’s very easy to find this. Save the image anywhere on the internet. (I have a page on my Tumblr.) You can use Photobucket and sites like that too. Some of them give you the direct URL. Others block you from getting it. So. Yeah. Play around with that. Once you have it on the internet RIGHT CLICK on it. Click “View image in new tab” copy the URL and paste it into the code where it says “URL GOES HERE”. Copy that code into your Tumblr’s description.
Does that make sense? Let me know if you need me to explain it better! And no need to be anon! I don’t bite! :)
How to Make Cursors for Tumblr
Wow Cursors! Anyone can easily make their own Custom Cursors for their Tumblr blog using a single line HTML codes. I will love to share this tutorial to make customizable cursors.
