Kenny's Head • Making your own tumblr "home" icon

Making your own tumblr “home” icon

So…yeah. Wow. This was a pretty unexpected thing to wake up to.

So is this the part where tumblr contacts me to tell me I’ve violated some obscure term of service, a la missing e?

Makes me happy to have made something people like (especially because it wasn’t easy, starting with zero user script experience other than having missing e). I haven’t been feeling very useful lately, so it’s a bit of a boost for me.

In case any of you want to make your own groovy home icon, I’ll walk you through how I did it after the read more:

First, you need an image of the icons:

Can’t see that, right? Trust me, it’s right above this line of text. That’s because it’s white on a clear background. If you right-click there, though, you have the option to save the image (and here’s a direct link - right-click and save, being sure you save it as a .png file).

When you look at these white icons with a clear background over tumblr’s background color, they look like this:

Tumblr loads them all as one file (which is strange to me, because on my dashboard, it adds the missing e logo between the “settings” and “log out” icons even after I changed the icon bar; I don’t know why or how it works, I just know that it does).

I know my icons are lower than the missing e logo, but I haven’t been able to figure out how to fix that. I’ve tried re-sizing, adjusting the position of my icons in their png image, etc, but I haven’t figured it out. If I do, ~~I’ll re-upload them to the photobucket account that everyone who’s using my script is pulling the logo from so it will be fixed for everyone, but I don’t know if that will ever happen~~ [EDIT - Photobucket was causing issues, so now all photos are uploaded directly to tumblr - this means I can no longer edit them later, so will instead update the script itself]. I do know that the issue is with my icons, NOT with missing e, since their logo is even with an unaltered set of dashboard icons.

Anyway, back to the tutorial.

So now you’ve got your white-on-clear png file. All you have to do now is change the image/images that you want to change. For me, I knew that this was what I wanted, so I did a google image search for “old Disneyland castle icon.” And what do you know, it popped up right away:

For whatever image you want to use, try to find a one-color image like that to keep things simple (I suppose you could use a full-color image and leave it as-is if you wanted, say, Christopher Eccleston’s head as your home icon…

…but I’m thinking more in terms of matching the look of the other icons) - and if you DO want Christopher Eccleston’s head as your home icon, here’s the png file…though I haven’t actually tested this one on tumblr:

Wow, another tangent. But they’re fun, right?

Anyway, you can use whatever pic you want, but I’ll use the castle as my example and walk you through how I did it.

Now, I’ve got one problem: I don’t want a pink castle on my page; it’s not the Magic Kingdom’s 25th anniversary any more, so I don’t want to make it look like a cake. So I downloaded the file, and put it in my handy image editor.

Then I cut out the WDW castle logo, leaving just the Disneyland one that I want to use:

The next step is to isolate the castle from the background. Select your “magic wand” tool…

…and set it to add more areas with each click instead of selecting a new area. For a simple image like this, I used a tolerance of 40 (Eccleston’s head would need more of a 5-10 for the edges, plus an eraser for touching up).

So now you select all the colored areas.

In some places, part of the white background is also in the selection, so now change your selection option to de-selecting certain areas while keeping the rest.

Now, click around the white areas. This will make the selection lines more closely “hug” the outline of the castle.

Next, I copied this image (control-c) and pasted it into a new image with a blank background.

Then set your color to white,

and select the paint bucket tool.

Now you want to fill in all the pink areas with white. Here it is in progress:

You’ll see that at first, some pink is still showing. You can zoom in and click on those with the paint bucket icon to touch those up. You may notice that some of the pain “spills” a little past the edge of the edge of the actual icon…this is OK.

In fact, on thin lines like the flag poles, a little spillover is a good thing…it means they’ll actually be visible. Remember, this is going to be a tiny image when you’re done with it. Tiny imperfections will become infinitesimal imperfections when your image is only 30-35 pixels tall.

If you miss the logo with the paint can and click on the background, making the whole image white, control-z (undo) is your friend.

So now you’ve got a completely white castle on a clear background.

Next comes resizing. I did it by dragging the corner of the castle after I’d instered it into the icon bar, so you could do it that way or you can re-size it now. The icon bar’s dimensions ate 175x36, so be sure it’s 36 or less pixels tall.

I didn’t think about the dimensions when I made the castle icon…this time I’ll re-size it to 36 pixels so it’s as large as it can be. Now the castle image is 22x36 (it was 138x229 when I was editing it).

*Note: In doing this, I liked the result MUCH better than what I had. So if you’re using the castle icon and noticed it getting just a tiny bit larger, you’re not seeing things - I updated the image that the script uses with the slightly larger version.

Now, open your png image that you are altering. It will be white on a clear background, but I’m going to put it on a black background in this post so you can see what I’m doing.

Now, use your rectangle selection tool…

…to select the tumblr home icon.

Delete it (for me, using PhotoPlus X4, that’s done by pressing Delete - your image editor may vary).

Now de-select the area by clicking somewhere else.

Go back to your home icon that you’ve made, resized to 36 pixels high or less. Copy the image (control-c), then go back to your icon bar and paste it as a new layer.

Now you can drag it so that the spacing is even (on a clear background, you can use the grid to help you get it even).

Drag your icon layer to the spot where you want it. Here it is in black,

And here it is with the clear background, where you can see that the spacing is even according to the grid:

If you want to change other icons (I’ve seen that a bow tie is a popular choice for the inbox logo), just do the same thing as above, replacing the other icons with the icon you want.

That’s it as far as making the bar. Now you have to export the file. Make sure you export it as a PNG (Portable Network Graphic) file with a bit depth of 32 (if the bit depth is less, it exports a plain white rectangle).

Now all that’s left is to upload the image somewhere that allows direct linking (~~I’m using photobucket~~ [EDIT - I’m no longer using photobucket because they were sending error messages instead of pictures], and I’ve seen tinypic used as well…use whatever works for you) and make your user script. Don’t worry, I’m going to make that really easy for you.

First, upload your png icon image and get the direct link URL. For example, the URL for my image is ~~http://i1107.photobucket.com/albums/h396/un1k3n/CastleIconTumblrBar.png~~ [EDIT - it’s now at http://24.media.tumblr.com/tumblr_ma3u4tYKDD1rgncooo1_250.png] - keep your direct link URL handy.

Now visit http://userstyles.org and sign in (you can sign in with OpenID, Google, Yahoo, or create an account). I signed in with Google and have so far received no spam or anything because of it.

Select “Create new style.”

The next step is not to freak out at the big text boxes. Trust me, it’s easier than it looks.

Give your icon bar a title, and a short description (it can be as simple as you want…if you don’t plan on sharing, just make sure YOU will know what it is; if you do plan to share, be more descriptive so people know what they’re getting).

You can skip the “additional info” unless you want to put something there.

Now you’re at the CSS box. Don’t worry, you don’t have to learn how to use CSS.

Just copy and paste this into that box:

@-moz-document url-prefix('http://www.tumblr.com') { #popover_blogs .tab_notice:after{display:none}#header .iconic>a{background-image:url('http://YOUR-IMAGE-URL.png') !important;} }

Now replace the part that says ‘http:..YOUR-IMAGE-URL.png’ with your own image URL (be sure to leave the ‘apostrophe’ at either end — that’s part of the code).

Ignore the Style Settings. I uploaded my own screenshots; I didn’t play with the automatic screenshots to see if that worked or not. Then click save, and you’re all set! Install that user script with Stylish, Greasemonkey (Firefox), or Tampermonkey (Chrome) and reload your tumblr tab and you’ve got your own new icon at the top of the page.

You may have wondered why all these icons are pure white, yet on your dashboard they are a little dimmer. Tumblr just alters how see-through the icons are when selected, not selected, or hovered over. This effect will still work on your new icon(s).

Enjoy!