Friday, April 20, 2012

Homestuck Notifier - Spades Slick

 If you've been following me on Tumblr, you know that lately I've gotten interested in a webcomic called Homestuck. It's made up to feel like an old school text-based video game, and it incorporates a lot of audio, flash animation, and even a few flash mini-games (making it a sort of multi-media webcomic). I wont bother trying to summarize the plot, as it's a bit complicated, but it's a really intriguing storyline and I'm hooked.

The comic updates regularly, generally on a daily basis, so sometimes fans have to constantly check the site to see if there's a new page. Luckily, one such fan developed a program called the Homestuck Notifier, which checks the Homestuck RSS feed regularly, and when there's a new update, a sound will play and an image will pop up above the computer's taskbar.

The Notifier cycles through a bunch of preset fanart, but the READ ME explained that you could upload your own image or sound to the program's macro folder. Obviously I had to do this, because the preset images didn't include one of Spades Slick, one of my favorite characters.
Spades Slick is the leader of a gang called the Midnight Crew and though they're relatively minor to the story, they're so awesome that I can't help but love them. Spades also doubles as one of the webcomic's primary antagonist, Jack Noir, who may just be my favorite villain ever (he essentially messes up everybody's plans, killing some of the other bad guys just to make himself more powerful, and is a total boss about it).

I really wanted a Spades Slick image to pop up on my screen, telling me about any new Homestuck updates, and since I'd been practicing drawing Spades in my notebook all week, I figured I could make it happen.

(WARNING: The rest of this is pretty much just me explaining how I got the finished product; if you're looking for the image or sound macros, they'll be at the very bottom.)

When drawing Spades, and the rest of the Midnight Crew for that matter, the problem is the coloring. Because they're all black-on-black, there's no easy way to draw the outlines AND color every section in without it turning out to be a big black blob. Instead, I decided earlier this week that when I drew one of these characters, I'd draw them inverted - black ink lines where I wanted the white space lines to be, and black "shading" where I intended white highlights. It's an interesting effect, but it means that if I make something I like, I can scan it and invert it before 'publishing' it.

I started the piece in pencil, designing the pose so Spades wouldn't cover up my taskbar/clock (that's one thing that kind of bugged me about most of the preset images). I chose a post-getting-his-eye-slashed but pre-getting-his-arm-sliced-off Spades with his gun because I think I love this version of him the best (his awesome level increases with the robot arm, but for some reason I'm not a huge fan of the eyepatch). After the pencil work was done, I inked it with a gel pen:
Then with some turning and cropping and editing the contrast, brightness-levels, and gamma (all edits I can make directly on my scanner client), I come up with this:
Next came the fun part - finally inverting the colors, to see what it looked like. I got super excited at this point and just kind of stared at what I'd done for a while. One of the nice things I like about inverted-shading (A technique I've used before, for some reason) is it gives texture to the white spaces. You can't really get white-space texture naturally, so it looks kind of cool even though it's unnecessary.
To get the image background to be transparent, I had to use a certain color on all the negative space. This took a while; first, I had to figure out how to get exactly the right color (I ended up just copying it from one of the other images in the program's macro folder). Then I had to decide how close to the image I wanted to get the transparency; I could add the transparent color right up to all the outer white lines, but that meant the white highlights had no outline. If I gave those an outline, I'd have to give the entire image a black outline.

I finally decided not to give the image a black outline. Given more time, I may create a darker gray to outline the highlights, so they'll stand out against a white background, but for now I'm happy.
Just adding the color also took a long time - I do all my photo editing in MSPaint because I don't have Photoshop, so I have to go right down pixel by pixel to change the blacks to this light purplish color (a simply 'fill' wont work because not every black pixel is the same shade of black).

Finally I got all the digital coloring done, so I set it up to appear as my reminder and tested it out. It looks awesome (note: Kenna understates how much she was freaking out when she got this to happen).
The next thing I wanted to do is figure out the alert sound. I don't mind the simple beeps that come with the program, but I wanted something to match the "Midnight Crew" theme, so I looked up Homestuck-inspired text alerts, and found a shortened version of the song Black (Which technically isn't a MC song, as it plays when Jack Noir kills the Black Queen, but it is Jack Noir's theme and since Jack and Spades are essentially the same character and I think this song is absolutely the coolest, I'm going with it).

Unfortunately, the version I found wasn't short enough - it was a good 20 seconds long, and in a house with other people on a computer my parents would be using, I didn't want anything too distracting. Apparently we still have Audacity on out computer - a free audio-editor - so I pulled the clip into there and shortened it to 6 seconds, with the ending fading out (and I swear, this took an hour to do. Audio editors are so confusing to figure out).

So then when I hit the button to test out the alert reaction, Spades Slick popped up and the refrain from 'Black' played and I was freaking out.

And now I've been sitting by this computer waiting for it to happen again, when Homestuck really updates. Honestly, I think I'm more excited for my little fanart to pop up and the music to play than for the actual update. I have to be humble and say it's not that great - the gun's a bit small and the arm seems a bit off and I probably should have added the eye stitches and the greyed outline and OH MY GOODNESS this thing is awesome!! GUYS. I MADE A THING. It's SPADES SLICK and anytime now he's gonna pop up on the corner of my screen pointing his gun at me and I'm gonna freak!!

(HOMESTUCKS! Want my little SS fanarty thing for your Notifier? You can download the image off of THIS Tumblr post - and here's a link to the 6-second version of Black, which you can right-click on to save to your computer.)

No comments: