I got a nudge or two about the talent calculator image I made back in the Battleground Kitty Mark Beta 1 Bleeder Roger talent discussion post some ways back. Mostly, they jabbed me and pointed out that I somehow keep accidentally disabling comments. Not sure how that came to be. Maybe the powers that be deemed you weren’t worthy of talking. Nah, just kiddin’, I love you guys.
OMG Skip, we love you too, you sexy beast of an Internet you. But no, seriously, like what’s up with that image and how do you do it?
A valid and stunningly accurate question/observation. My primary reason for cooking up the above was size. When I screen shottied the talent tree as I liked it, the image was obscenely large. 100s of KB, and I don’t mean Killing Blows. When I shrank it down and killed the quality, the numbers (see also: the important part) were unreadable. I could go back and type over it, but that would be taking the easy way out. No, I have to be different.
Enter a little tool called Grease Monkey. Grease Monkey is a heady little Firefox Add-On that lets you inject scripts into live pages to alter their appearance or functionality. We (yes, both you and I) are going to use this to alter how WoWHead’s Talent Calculator looks.
Start by getting Firefox. Done? That didn’t take long. I bet you already had it.
Now, Install Grease Monkey into Firefox. It installs like any other Firefox Add-On, so if you have trouble, there’s docs out there somewhere. I’m not a help desk (at least not on off hours), so if I’m moving a bit fast, I do apologize.
All done? You should have a little monkey head in the bottom right of your screen. He smiles when he’s on and frowns when he’s off. Right-click him and choose “New User Script…”.
This is where we create our script. Name is the name of the script. Call it “Fandangly Weasel” for all I care. Namespace is “http://morebarsthanyou.skipcocoa.net/”, cuz I wrote it! Description is self-explanatory too. “Fandangly Weasel chews threw the cables on the Internetz for me.” Or you can write something useful. Includes are just one line: “http://www.wowhead.com/?talent*”. The * means it’ll alter any and all WoWHead talent pages. There are no Excludes.
If this is your first time using Grease Monkey, it’ll want to know where your preferred text editor is. If you don’t have a preference, you can just find Notepad.exe in your Windows directory, if Windows is your poison. Anything that can edit .TXT files will work fine too. When it comes time to actually write your intimidating script, you’re just going to copy and paste my work:
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle('.iconmedium div.icon-bubble {background:black;font-family:Impact;font-size:24px;left:26px;line-height:14px;width:16px;}');
addGlobalStyle('.talentcalc-main div div {background:black;}');All we’re essentially doing is saying “change the styling to be like this”. No actual talent calc functionality is altered. It just turns the backgrounds to black and makes the numbers big with the Impact font. You can change the word Impact to another font, though you may have to toy with the font size and positioning.
Now, with the script saved… You didn’t? Well, I didn’t think I had to tell you. Save it, please. Good. Now, with the script saved, head on over to the WoWHead Talent Calc and punch in a class and some numbers. You should already see your massive numbers and black backgrounds. If not, well, I guess go over it again. It could be any number of things, and I can’t say what for sure. Once you have your tree all prettified, press the Lock link to solidify it, then take a screenshot of it.
From here, it’s your usual image editing magic. I use GIMP, so I’ll continue from that point of view. Feel free to leave at this stage or stick around and snicker quietly at me if you’re a self-important Photoshop user.
I paste the screenshot in as a new image, use the Rectangle tool (the very top left button) to draw around the area of importance, then crop the image (Image Menu > Crop to selection). I then resize it to about 300 pixels wide (Image Menu > Scale Image), and save it as a .PNG file.
This gets me about a 100KB image, but I can do way better. Close it out and reopen the new file in GIMP again. Don’t ask my why I have to do this, GIMP just gives me better quality if I apply the next step to the finished image and not the working file. PNG images work with color palettes, and so can be shrunk way down by decreasing the number of colors. Go to the Image Menu > Mode > Indexed… For the talent trees, I choose “Use web-optimized palette” with “Remove unused colors from colormap” checked and Dithering set to “None”. Some of the colors strip out, but the general look is retained and the image size ends up around 20KB when saved. It’s a solid improvement for modern, image-saturated blogs.
And your fortune cookie for the evening:
WATCH FOR FALLING ROCKS – NEXT 5 MILES
Addendum: Since I figure I covered this about as haphazardly as humanly possible, I went and started a thread on Blog Azeroth on the topic with for to discuss details I didn’t cover well enough. If you’re not a member of Blog Azeroth, and you’re a WoW blogger, I suggest you memberify yourself before you dismemberify yourself (made that up all by myself, hot dog). Topic discussion be heres: http://blogazeroth.com/viewtopic.php?f=2&t=2001&p=9681
