Support and Elevation

Disclaimer

This tutorial has a number of comic samples cobbled together from old artwork and from my own comic, "The Conversations Within Elsydeon". The quality of the artwork varies quite a bit but, more importantly, the pictures and the comic are all fan works for an old series of role-playing games called "Phantasy Star". Phantasy Star and everything in the games is copyright Sega.

Introduction

Any movie director can tell you how important music is to the final cinematic product. Music defines what you feel in a scene and is powerful enough to change even the saddest character deaths into triumphant scenes resonating with new hope for the future. Incidental music is anything but incidental. It not only supports the movie but elevates it beyond what it could be without it.

For the most part, webpages currently only support comics. They are not part of it - they frame it. The comic is simply dropped in the middle between the advertising banner and the latest news and is a seperate thing to the comic.

And yet, by slaving the webpage to the service of the comic, it can be used in a similar way to incidental music, elevating the comic and underlining the story and emotions within it. With the aid of the webpage itself, the comic becomes that much more immersive, dramatic and effective, the story more powerful.

Changing Designs

This is a very simple technique, which I've used in my own - rather pathetic - comic, which I'm going to have to explain something about for context.

The comic is called "Conversations Within Elsydeon" and it mutated from a series of one line gags based on a series of Sega computer role playing games called "Phantasy Star". In the games, the souls of the dead heroes who fight through the ages attach themselves to a magical sword called Elsydeon. The one-liners and the comic merely shows what they get up to during the indeterminable centuries stuck in an afterlife tied to a sword.

Here's a normal, everyday comic. By the standards of my website design tutorial, it's not a terribly good website design but never mind that. I did it some time ago, before I understood the design requirements of comic websites.

At one crucial stage of the plot, the characters cross over to a another sword called Netrdeon, in which reside the souls of the villains of the Phantasy Star games. The first of these comics can be found here.

The entire webpage design changes. It's dramatic but that's not the important bit. The important bit is that it's dramatic for the readers rather than the characters. We feel some of the punch that they do, because the comic has affected something in our world. Something's happening, and it's important. The whole site has been changed.

Now, all I did was change the colour scheme but there's no reason why you couldn't change the whole look. You could do this for events and locations, as I did here, or for different characters. If your comic is named for your main character and, perhaps even website is built to reflect his or her personality, you can change the site design to reflect different characters if and when they take over briefly.

Empty Pages

Changing the design of the webpage is a neat trick but mostly a gag - it's a surprise and maybe it's a chuckle, but it's not much more than that. If we're using the movie soundtrack analogy, then what we really want is to let the webpage both reflect and increase the mood of the comic - or even to define the mood, as soundtracks do.

Easiest way? Remove the webpage design entirely. No logo at the top, no title, no tagboard, no newsbox... The bare minimum of navigation and everything kept well away from the comic. Removing the structures that are usually expected to surround the comic works for a great many dramatic and moody moments.

For example, an empty page with the character in the middle can add to the feeling of loss and isolation, as in this example. A similarly empty page with a looming red lit figure will increase the drama of a villain's appearance, like this. Or a dark figure standing casually in the middle distance will increase the confrontational feel of his challenge, here. In all cases, the entire webpage is taken over to serve one dramatic moment, making it that much more dramatic.

The webcomic Fans, whose archives are sadly not available for casual linking, used one awesome example of this. The view was from above one of the main characters as she lay on her back in a padded cell, her arms bound by a straight-jacket and the webpage used tiled wallpaper to create an endless padded floor around her. That was the best (and admittedly almost the only) use of this trick I've seen.

In Japanese manga, the background behind a character will often reflect the mood of the character. Sharp, jagged lines for anger, for example, or a spiral for someone feeling dizzy. Although I haven't seen it done, this too would work well. Fill an otherwise empty webpage with spiralled wallpaper with the character in the centre and we've gone far beyond simple disorientation.

Separation

There's a problem.

The examples above use completely empty webpages to reinforce the effect of the comic but this is frequently not possible. An advertising banner is often needed at the top and Comic Genesis, for example, requires a plug at the bottom. Surely this ruins the effect?

Yes.

...and no. Surely if the advert is a problem, why aren't the browser buttons? It's still taking up room that could be used for effective comic-surrounding emptiness. And what about a television? There are speakers either side, a video recorder above it and the dog sleeping on the floor below. They're not problems.

All correct. The trick here is to separate these elements - the advert and the Comic Genesis plug (if applicable) - from the comic in some visual fashion. A simple line can be enough but a buffer of empty space either side of it certainly helps as well. Here's an example. You could also confine the comic to a box in the middle like Scott McCloud does here - it works for when you're watching a movie on the computer, doesn't it? Of course, that would limit your space somewhat and would therefore not be my preferred option.

The Infinite Canvas

The infinite canvas seems well paired with this sort of webpage manipulation. In fact, with only two exceptions (one of which is mine) infinite canvas comics are the only places I've seen it.

The Conversations Within Elsydeon have used an infinite canvass with a redesigned webpage for one entire story arc that starts here. The idea is taken just a little further at the end, where I faded the background from black to white and put the sword Elsydeon in as a background. Much later on in the plot, I did a much better infinite canvass effect for interdimensional space

Those are all very crude equivalents of what's done over at Electric Sheep, which does the superb infinite canvass comic "The Spiders". Finally, Scott McCloud's online Zot! comic (to take just one of his examples) also uses a lot of same ideas.

Inventive Trickery

The key word here is "inventive". I can give a few examples but, really, the idea is to come up with your own.

I mentioned earlier that you can visually separate the advert and the Comic Genesis plug (or similar) from the comic with a simple line. The lines produce a sort of cinematic widescreen effect and you could narrow the lines further to get the correct widescreen shape for, say, a film noir sequence in your comic. Or go even further and focus in on the eyes anime-style like this.

Flash can be used for some subtle effects. Flash, for those of you who don't know, is a way of animating graphics comparatively simply and with smaller files than, say, an animated GIF image. Now, I said in my previous tutorial that animation on the comic webpage is a bad idea as it distracts from the comic. It does have its uses, though.

For example, when the comic returns to an unconscious character who is now waking up, the comic could be faded from black. It's harder to fade to black when they get knocked out since you can't judge how long it would take for a reader to get to the end of the comic, but you certainly do know when he's going to start it - as soon as it's loaded.

Another trick could be to fade in chapter names and credits at the beginning of each chapter, like this. This doesn't achieve anything much but it looks original.

And one of the most subtle but useful abilities of Flash is that it can take up the entire webpage.

Huh? So?

So the comic can be the same size visually no matter what the resolution of the computer in question is. If it takes up the whole screen in 640x480 resolution, then it will in 1024x768 as well. The looming bad guy used above will never be reduced to a pathetic postage stamp in the middle of the screen, even at the highest resolutions. I use this on the main page of this site. Try resizing the window and you'll notice the logo will resize with it.

"The Spiders" is probably the best showcase for inventive genius in web comics. At one stage of the story, you get to view a CNN news website detailing things that are going on in the world of the comic, complete with working links. After a few moments, a Javascript window pops up and alerts you to the fact your "Spider" has spotted something of interest.

Implementation

The impact of these tricks is best if used sparingly. It's best if you do whatever everyone else is doing for a while and then you leap out and surprise your readers! However, if you're not looking for punch, but rather just to add to the overall effect of every comic, you can certainly use different backgrounds and effects on every comic's page. Indeed, most infinite canvass comics are like this.

Got any comments?

Comments and any good ideas, too. If you know of any tricks, effects and clever webpages, or just want to comment, drop me a line and I'll add 'em with a credit.

Webcomics

Writing

Design

Technology

Misc.

Personal