The Making of Kid Radd
Creating Kid Radd has been one of the most fun projects of my life. Though it owes a lot to the genre known as "sprite comics," I like to think (hope) that I've brought something new to the web. I also hope that some of what I'm doing will inspire other writers out there to create new types of strips, involving some of the tricks I've both figured out and learned. That's my main motivation for writing this essay, to show off some of the "tricks of the trade," in hopes that other artists will find them useful. Plus, it'll help me evangelize to the masses that cool-looking pages don't have to take forever to load, or require overuse of Flash.
But first, I suppose I should relate the heartwarming story of how Kid Radd began. Be warned that some of it won't make sense if you don't know much HTML. To the opposite crowd, all you IT nerds out there, I'll apologize in advance for any misused terms or inelegant code. Keep in mind, my webpage skills are all self-taught.
My first exposure to sprite comics was when I stumbled upon a site known as Oldskooled. After gaining some amusement from the page, I followed its links and soon found sites such as 8-Bit Theater and the granddaddy of all sprite comics, Bob and George. I also found a lot of mediocre knock-offs, but I guess that's to be expected with any popular artform.
But one day while reading through the archives of 8-Bit Theater, I was begrudging my plight at being seemingly the last person on the planet not to have DSL or some form of non-dial-up connection. The irony struck me that it would take almost a minute for a comic to load, when after all, what's pictured in it? A bunch of four-color, 16x16 pixel sprites. Gifs of that size and limited color load instantly even on ancient 28k modems. Why the hell should it take so long to see such simple graphics?
My brain went into nerd-mode, thinking about this problem off and on at work and play. It occurred to me that in HTML, I could make a comic strip using table cells to simulate the square panels, and position gifs of characters inside with text, looking like they were interacting. Since the characters would be blocky 16 or 32 pixel tall sprites, I could save them as tiny, low-color gifs. Blown up two or three times their normal size, the characters inside their panels would look just like a regular sprite comic. But since the table cell panels aren't part of the image, and the recycled gifs are so tiny, the comic would load much more quickly.
For a little demonstration of this, click here!
Edit: Since you're reading this offline, you won't be able to see a difference in loadtime in the demos. Sorry.