Creating an ASCII/HTML-based Webcomic

Rate this:
By keymonkey (Contact - View My Woyano)
Published Tue 31 Jul 2007, 459 Views, 0 Comments

This article is about the creation of the ASCII/HTML-based Webcomic, Ttskr and will include an indepth look at creating an ASCII/HTML based webcomic, from scripting, storyboarding, character selection, editing and hyperlinks. We will also be examining some of the tools used to create the Ttskr webcomic.

About Ttskr


Ttskr is a minimalist ASCII/HTML-based webcomic with office/geek humor. The characters are represented in ASCII characters which attempt to describe characteristics which are infered, rather than read. The webcomic is a 3-panel comic which is updated on a weekly basis. The main characters are
BB: o-o  JJ: -.-  GB: []-[] HOLLY:  @@ RD:  o_o and LOFTY:
------
| |
------ a Linux-powered robot who is represented as a box.
Scripting

Scripting takes the form of a simple text-editor, in this case SciTE (the Scintilla Text Editor: http://www.scintilla.org/)

1 JJ: bugs!
2 BB: [singing] bugs bugs bugs bugs!
3 GB: G'ah! BB is signing again!
4 RD: Why is the tune always the same?
5 HOLLY: BUGS?! WHERE?!
6 LOFTY: In here. Ouch.
7 JJ: Sorry, I forgot to escape a space.
8
9 comment: I wish I was like this guy.

Storyboarding

The scripts are storyboarded - i.e., organised according to which panel the text will be displayed.
1	JJ:  bugs!					(panel one) 
2 BB: [singing] bugs bugs bugs bugs!
3 GB: G'ah! BB is signing again! ' (panel two)
4 RD: Why is the tune always the same?
5 HOLLY: BUGS?! WHERE?! (panel three)
6 LOFTY: In here. Ouch.
7 JJ: Sorry, I forgot to escape a space.
8
9 comment: I wish I was like this guy. <-- comment line
We will now load the ttskr-template file using JavE, the Java ASCII Versatile Editor (http://www.jave.de)

This is a blank comic with the pre tags, comment, title, the panels and the comic number.

Character Selection

We will now place the characters where they will appear in the panels. LOFTY will appear in the first and third panels, JJ and BB in the first, GB and RD in the second and HOLLY and JJ in the third.


In the next step we will insert the dialogue and comments.

Editing

The dialogue in Ttskr is presented left to right and top to bottom, without overlapping characters or the panel margins.


An almost complete ttskr webcomic, with dialogue and comments

Hyperlinks


After the dialogue and comments we then load the comic back into SciTE for the final touches, the date, comic number and any hyperlinks. Ttskr is released on a Saturday, so I use the cal program on my Linux box, I will need to access the existing archive to check the next date and the comic number of the last comic that I have completed, this would be the 15th with the next comic number being #116










In the comments I will be linking to another comic, called xkcd, in particular: http://xkcd.com/208/














Conclusion


All that is left to do is to open the completed comic and view in a web-browser.


The completed ttskr webcomic

I hope you enjoyed this 'bac
kroom' tour of Ttskr, please feel free to visit the webcomic with your favourite web-browser, any is fine: http://ttskr.comicgenesis.com







This Item
Category: Knowledge, How to's, Technology
Tags: webcomic, ascii, html, create, minimalist
Contributor
keymonkey
Share it
Link to this item:
Bookmark this item: RSS Feed

People who liked this item

    0 Comments

Please Login to Add Your Comment   ..or..  

Replying to comment by