How the strip gets made (old version)

Step 0: Some Background

Keep in mind, all I have available is some free software and Microsoft Windows XP Home. I don't have the money to buy Photoshop nor the time to learn it. It's not about the art, anyway, right?

Sorry in advance for the file sizes.

Legal note: all software is used under license. Honest.

Step 1: Writing the Scripts

While the first few strips were written straight into the comic (see Step 4), after a while I realized that in order to keep things straight, I'd have to script them out -- especially with those multi-comic storylines. Plus then I could work out different dialogue without so much pressure.

Of course, I just use Notepad. I give the text file the same name as the (future) comic -- it's a good system.

(Even some of the pages were scripted ahead: About, Cast, and this one.)

Other than dialogue, there's minimal information: which frame (possibly joined) who/what's on screen, who's talking, emotion, etc.

Step 2: Framing it up / Adding the Cast

I have two source files: a blank template, and a cast master. Both are 1280 * 960, 24-bit color, with 8 gray frames (black inside). The cast one has all six characters with titles, plus a full overhead table shot and an empty table shot.

I like all the cast into position before anything else (unlike Charles Schulz, who did dialogue first). It's pretty much cut&paste, with a twist...

To help with targeting, I change the frame from gray/black to black/white [PHOTO 1], then when I do the paste I set white transparent. (I need the white background because now the original text is transparent.)

After all the characters are in place, sometimes I connect adjacent "guys". I don't do it right away, since I use the original frames for positioning the dialogue, but I make it easier for myself; putting in certain lines make it easier to flood-fill later [PHOTO 2]. Look at this strip for an example of the end product: you can see which areas get filled what.

Step 3: The Extras (props, body parts, and fourth walls)

(Of course, this wasn't a problem originally, either.)

Anything that might get in the way of text that has to be drawn goes in next. The beer bottle, for example, or the multiple items in this one.

Sometimes I "break the fourth wall" (breaking the false reality by referring to the comic AS as comic), usually by sticking a (doctored) photo of myself in there (first appearance).

Naturally, I'm forced to upgrade the final strip from 16 to 256 colors for this (or adding the strip's logo). The number is squared, but the filesize is only doubled, so it isn't that bad.

Step 4: Dialogue Time!

Again, it's cut&paste! Set the font (Arial (OpenType), 18pt, Bold, White, italics for voice-overs), set the frame, paste, and arrange [PHOTO 3].

I always (try to) leave 1 blank line on top and 1 space on the left.

You might notice in the screenshot that the active text looks more anti-aliased than the "complete" text. That's a Windows thing -- it doesn't "snap" to 16 color until I change tools or draw a new text frame.

Now, I'm using that to my advantage: doing the strip in 24-bit and converting to 16 color only when the strip is done. Some anti-aliasing remains on the text, making it more readable, without using new software.

Step 5: More Extras

If I need the "6 Guys" title, I'd stick it in now.

You might also notice some strips have some really small text. I make that from scratch. Each letter is 3*5, then I expand it 200% (you'll see why).

Also, I finally fill in those joined frames.

Step 6: Emotions and Such

I found out the hard way that my characters needed more depth than dialogue alone. So as of this strip I gave them mouths and eyebrows. Not eyes -- eyeBROWS.

I pick the "matching" color and use the Airbrush tool, smallest size [PHOTO 4].

Step 7: "Finishing"

Well, now I have a complete bitmap, 24-bit color. But this is the web: it's too big, and bitmap is not efficient. So first I open the strip up in LViewPro, convert it to 16-color, shrink it to 50% (see?) and save it as a GIF87a (non-transparent). The size goes from 3600 KB to 601 KB to under 20 KB -- not bad.

And just to make sure I don't need to change things, I open it up in Windows Picture & Fax Viewer (comes with XP) [PHOTO 5].

Step 8: The Pages

The actual comic archive pages are made automatically by AutoKeen -- a PHP CGI script that runs every comic on the server at least once a day, at a preset time (mine is midnight Central Time (US/Canada)).

AutoKeen also does things with other pages: index page (comic, newsbox and links), Archive page (tables), and every page (advertisement and footer). Each page has "tags" that are substituted with the proper HTML code when the script runs.

There are other scripts that handle site statistics, the KeenSpace Guide, server administration (manual updates and more), and other stuff.

As for the pages I have to make myself (including the Comments files), I use Crimson Editor to write them [PHOTO 6] and Internet Explorer to preview them.

I used to only use the simplest HTML code I can (I don't know much), so it would be compatible, BUT...

I recently upgraded it all to XHTML 1.0 / CSS 1.0 -- if you have a problem, upgrade your browser!. It's amazing how simple the code gets when style info is external to the content.

(The Crimson Editor also works great for Java code, C code, MatLab scripts, and lots of other languages.)

Step 9: Getting it Online

Comic? Check. Pages? Check. But is anyone going to see it?

Yes, once I use LeechFTP and put those comics in the buffer [PHOTO 7]. AutoKeen looks for comic files there every night. If it finds them, it moves them into the public directory. It also copies the HTML files from the buffer to the public area, replacing the tags in the process.

So, when everything is there, there's two things to do: wait, or log in to the site admin page and run an update.

(Usually I'll put the comics up right away, but only put up changes to the pages Friday morning so they don't show up before the comic. And I always check Saturday before noon to make sure things are okay.)

And that's it! The rest is up to you!