How to Format a Self-Hosted Graphic Novel
June 23, 2018 6:01 AM Subscribe
Seeking advice for formatting a long-form electronic comic / short graphic novella for distribution on the web. Best practices, known pitfalls, presentation tips?
(Details below.)
0: I am a professional art thing, but not in the field of comics. The work has been in development as an animated film for a few years but due to a variety of reasons each more painful than the last, I have finally decided, at four o’clock this morning lying in bed sleepless, that it’s just not going to happen. So rather than throw away all the work I’ve put into a story I care deeply about I have opted to pivot to comic. Seeking advice on all fronts from experienced MeFites.
1. The work is fully scripted and storyboarded, and functional puppets of the characters are already built and ready for posing. Layouts exist at 3,840 pixels by 2,160 pixels, in the HDTV Rec.709 RGB colour-space.
2. Not for print. The work is intended for electronic consumption via the open web. The work will likely be self-hosted. I have a webmaster lined up to assist with Wordpress (I assume?), to take care of the “previous page / next page” jiggery-pokery and that sort of thing. No monetization features required, unfettered public access, no copy protection. Can anyone recommend a template built with comics in mind? I’m imagining that if such a beast exists it probably knows clever things about fluid layouts to accommodate people reading comics on their telephones and watches and whatever? Or is Wordpress not the best solution? Should we just hard code simple, static HTML pages?
3. I have on my bookshelf a handful of famous graphic novels (Watchmen, Sandman, Akira) and have been studying them this morning to better understand how panels and comic layouts work to drive the story. Obviously my existing film storyboards will require adaptation to be “panelized.” But…how big/dense should my pages be? I’ve seen advice that says going wider than 800 pixels at 72 dpi is counter-recommended, because nobody wants to be forced into the dreaded sideways scrolling. But is 800 pixels wide future-proof? Is 72 dpi acceptable in the era of high-resolution displays? Is the height of my page dictated purely by vertical scrolling concerns, or should I be thinking about page load-times, too? Help!
4. I’ve also been downloading panels/sections of existing electronic comics to see how the files are broken up. I grok that I don’t want to do a page as a single file, but can anyone offer any guidance into how I ought to break down my elements? If a page contained four rows of horizontal panels, for instance, would the best practice be to serve the contents using four files? Two? Slice them into eight?
5. How much should a page weigh, in order for people to browse without zen-like patience? What’s the upper limit for a reasonable load-time — 5 MB? 10 MB? Bigger?
6. Is it gauche to incorporate a select number of panels as animated gif graphics? (Or is that jif jraphics?)
7. I am chiefly interested in standards and guidelines only to the extent that they keep the work readable, accessible and enjoyable for the audience. Not keen to be “discovered” as a comic artist or anything like that (I already have a career, and it’s going okay). That being said, are there standards I should work to so that — if the opportunity arose — the work might be compatible with other forms of electronic distribution?
8. Lettering — what kind of point size should I be using for dialogue balloon content? I think I’m going to go the route of having my best, cleanest block handwriting turned into a font but I’m having trouble finding good guidance on how big that font should appear within each panel.
9. JPEG or PNG?
10. Any other advice concerning elements I haven’t thought of yet deeply appreciated! I've been up all night sorting this in my head (and Googling), and given my inexperience with the medium there's probably some key points I've neglected to consider.
0: I am a professional art thing, but not in the field of comics. The work has been in development as an animated film for a few years but due to a variety of reasons each more painful than the last, I have finally decided, at four o’clock this morning lying in bed sleepless, that it’s just not going to happen. So rather than throw away all the work I’ve put into a story I care deeply about I have opted to pivot to comic. Seeking advice on all fronts from experienced MeFites.
1. The work is fully scripted and storyboarded, and functional puppets of the characters are already built and ready for posing. Layouts exist at 3,840 pixels by 2,160 pixels, in the HDTV Rec.709 RGB colour-space.
2. Not for print. The work is intended for electronic consumption via the open web. The work will likely be self-hosted. I have a webmaster lined up to assist with Wordpress (I assume?), to take care of the “previous page / next page” jiggery-pokery and that sort of thing. No monetization features required, unfettered public access, no copy protection. Can anyone recommend a template built with comics in mind? I’m imagining that if such a beast exists it probably knows clever things about fluid layouts to accommodate people reading comics on their telephones and watches and whatever? Or is Wordpress not the best solution? Should we just hard code simple, static HTML pages?
3. I have on my bookshelf a handful of famous graphic novels (Watchmen, Sandman, Akira) and have been studying them this morning to better understand how panels and comic layouts work to drive the story. Obviously my existing film storyboards will require adaptation to be “panelized.” But…how big/dense should my pages be? I’ve seen advice that says going wider than 800 pixels at 72 dpi is counter-recommended, because nobody wants to be forced into the dreaded sideways scrolling. But is 800 pixels wide future-proof? Is 72 dpi acceptable in the era of high-resolution displays? Is the height of my page dictated purely by vertical scrolling concerns, or should I be thinking about page load-times, too? Help!
4. I’ve also been downloading panels/sections of existing electronic comics to see how the files are broken up. I grok that I don’t want to do a page as a single file, but can anyone offer any guidance into how I ought to break down my elements? If a page contained four rows of horizontal panels, for instance, would the best practice be to serve the contents using four files? Two? Slice them into eight?
5. How much should a page weigh, in order for people to browse without zen-like patience? What’s the upper limit for a reasonable load-time — 5 MB? 10 MB? Bigger?
6. Is it gauche to incorporate a select number of panels as animated gif graphics? (Or is that jif jraphics?)
7. I am chiefly interested in standards and guidelines only to the extent that they keep the work readable, accessible and enjoyable for the audience. Not keen to be “discovered” as a comic artist or anything like that (I already have a career, and it’s going okay). That being said, are there standards I should work to so that — if the opportunity arose — the work might be compatible with other forms of electronic distribution?
8. Lettering — what kind of point size should I be using for dialogue balloon content? I think I’m going to go the route of having my best, cleanest block handwriting turned into a font but I’m having trouble finding good guidance on how big that font should appear within each panel.
9. JPEG or PNG?
10. Any other advice concerning elements I haven’t thought of yet deeply appreciated! I've been up all night sorting this in my head (and Googling), and given my inexperience with the medium there's probably some key points I've neglected to consider.
Best answer: I've been doing sef-hosted graphic novels since about 2009.
My first (still-unfinished) one was originally posted via some hacks on top of the image gallery program I was using for my site at the time; it has since been moved over to Wordpress along with the rest of my stuff.
I use a template I made myself called "Bayeux", which is designed to work with the Comic Easel plugin to present entire chapters in one pageload rather than the usual one-page-per-http-request setup. I do not necessarily recommend trying to use it.
There are a few plugins out there designed to work with Wordpress for presenting comics: Comic Easel, Webcomic, and Manga Press. I use Comic Easel because when I started putting my comics into a Wordpress installation, its predecessor Comic Press was the only option. I haven't played with the other ones. I believe all of them now claim to be able to work with pretty much any Wordpress template though I haven't tried this.
The advantage of Wordpress over static HTML is that it makes it really easy to add on extra stuff. Like, whenever I post a new page it gets automatically posted to multiple social media services, and adding new ones as they become relevant is a plugin installation away. Plus there's an RSS feed, not that anyone uses that any more, sadly.
There is also the option of the standalone system designed solely to present comics. As far as I know Grawlix is the only one that's even remotely current, and annoyingly enough it looks like its website is down. So I guess it's not much of an option any more.
Pages on my last graphic novel were served as single files, sized to fill a first-gen iPad's screen held in portrait orientation. My current project is using templates based on the standard sizes of comics in the US, which I'm rendering out at around 950x1500, with some CSS trickery scaling them to fit the screen. Though said CSS is still very much a work in progress.
My last GN was a bunch of super-sharp flat art with limited palettes, served as PNGs that rarely topped 100k apiece. My new project is a lot of textured and shaded stuff that's being served as JPGs that are ranging from ~500-900k. Your sample image definitely looks like you should be publishing as JPGs, with all that texture and blur and whatnot. If load times become an issue then you can switch from using your own server to using a CDN; Wordpress' "Jetpack" plugin will hook you up with the CDN they run for wordpress.org for free, or you can use other paid CDNs. (CDN: Content Delivery Network, they basically maintain copies of your stuff on machines sitting close to high-speed connections around the world.)
It is perfectly fine to have some portion of your panels be animgifs. I think something like 75% of Homestuck, one of the biggest successes in webcomics, is animgifs.
I really can't tell you how to best break up your story into panels. Take some of your storyboards and do quick roughs redrawing them as pages, experiment with how it works. You may find working on top of a grid to be useful; Watchmen is very much an example of what a grid can do to help structure a story. Or you may not - letting the panels take all kinds of crazy shapes is a useful storytelling tool, too.
Hell, you could even decide to stick to your original plans of it being an animated film and present it online as a series of faux-screencaps, all the same size and shaoe, complete with subtitles superimposed over the bottom of the images instead of dialogue balloons. Watch some modern shows with a bit of a budget with the subs turned on and you'll get some ideas on how to use color and placement to make it clear who's talking when there's multiple characters in frame at once.
Really, I would recommend taking a short sequence, no more than a minute or two in length at most, and trying a few different ways to turn it into pages.
I can't give you any pixel-size recommendations for the dialogue, as I work entirely in Illustrator. Typically I'll use a 10-12pt font, preferably with a high x-height, as I am a heretic who thinks it's perfectly okay to use sentence case in comics instead of ALL-CAPS now that we're not printing everything on the shittiest paper possible.
I'm curious where you're thinking it's normal to not post a page as a single file. Most of the people I know who are doing page-oriented comics do just that.
posted by egypturnash at 12:30 PM on June 23, 2018 [1 favorite]
My first (still-unfinished) one was originally posted via some hacks on top of the image gallery program I was using for my site at the time; it has since been moved over to Wordpress along with the rest of my stuff.
I use a template I made myself called "Bayeux", which is designed to work with the Comic Easel plugin to present entire chapters in one pageload rather than the usual one-page-per-http-request setup. I do not necessarily recommend trying to use it.
There are a few plugins out there designed to work with Wordpress for presenting comics: Comic Easel, Webcomic, and Manga Press. I use Comic Easel because when I started putting my comics into a Wordpress installation, its predecessor Comic Press was the only option. I haven't played with the other ones. I believe all of them now claim to be able to work with pretty much any Wordpress template though I haven't tried this.
The advantage of Wordpress over static HTML is that it makes it really easy to add on extra stuff. Like, whenever I post a new page it gets automatically posted to multiple social media services, and adding new ones as they become relevant is a plugin installation away. Plus there's an RSS feed, not that anyone uses that any more, sadly.
There is also the option of the standalone system designed solely to present comics. As far as I know Grawlix is the only one that's even remotely current, and annoyingly enough it looks like its website is down. So I guess it's not much of an option any more.
Pages on my last graphic novel were served as single files, sized to fill a first-gen iPad's screen held in portrait orientation. My current project is using templates based on the standard sizes of comics in the US, which I'm rendering out at around 950x1500, with some CSS trickery scaling them to fit the screen. Though said CSS is still very much a work in progress.
My last GN was a bunch of super-sharp flat art with limited palettes, served as PNGs that rarely topped 100k apiece. My new project is a lot of textured and shaded stuff that's being served as JPGs that are ranging from ~500-900k. Your sample image definitely looks like you should be publishing as JPGs, with all that texture and blur and whatnot. If load times become an issue then you can switch from using your own server to using a CDN; Wordpress' "Jetpack" plugin will hook you up with the CDN they run for wordpress.org for free, or you can use other paid CDNs. (CDN: Content Delivery Network, they basically maintain copies of your stuff on machines sitting close to high-speed connections around the world.)
It is perfectly fine to have some portion of your panels be animgifs. I think something like 75% of Homestuck, one of the biggest successes in webcomics, is animgifs.
I really can't tell you how to best break up your story into panels. Take some of your storyboards and do quick roughs redrawing them as pages, experiment with how it works. You may find working on top of a grid to be useful; Watchmen is very much an example of what a grid can do to help structure a story. Or you may not - letting the panels take all kinds of crazy shapes is a useful storytelling tool, too.
Hell, you could even decide to stick to your original plans of it being an animated film and present it online as a series of faux-screencaps, all the same size and shaoe, complete with subtitles superimposed over the bottom of the images instead of dialogue balloons. Watch some modern shows with a bit of a budget with the subs turned on and you'll get some ideas on how to use color and placement to make it clear who's talking when there's multiple characters in frame at once.
Really, I would recommend taking a short sequence, no more than a minute or two in length at most, and trying a few different ways to turn it into pages.
I can't give you any pixel-size recommendations for the dialogue, as I work entirely in Illustrator. Typically I'll use a 10-12pt font, preferably with a high x-height, as I am a heretic who thinks it's perfectly okay to use sentence case in comics instead of ALL-CAPS now that we're not printing everything on the shittiest paper possible.
I'm curious where you're thinking it's normal to not post a page as a single file. Most of the people I know who are doing page-oriented comics do just that.
posted by egypturnash at 12:30 PM on June 23, 2018 [1 favorite]
Response by poster: Thank you for the dense and informative reply, egypturnash!
I'm going to put your latest GN into my queue -- I've been reading online GNs all day -- and I look forward to diving in.
At this point I'm leaning toward building my masters at 4096 pixels wide, then downsampling to something reasonable for web service. I guess the font size question will come down to a matter of experimentation.
I'm curious where you're thinking it's normal to not post a page as a single file. Most of the people I know who are doing page-oriented comics do just that.
I guess I got the idea from...the past. I haven't built anything designed for an online experience for over a decade, and it looks like between now and then the average user's bandwidth tubes have become wider.
Research continues today. Production begins tomorrow. My self-imposed deadline for going live is 12 weeks from now. Thanks again for your insights!
posted by Construction Concern at 8:47 AM on June 24, 2018
I'm going to put your latest GN into my queue -- I've been reading online GNs all day -- and I look forward to diving in.
At this point I'm leaning toward building my masters at 4096 pixels wide, then downsampling to something reasonable for web service. I guess the font size question will come down to a matter of experimentation.
I'm curious where you're thinking it's normal to not post a page as a single file. Most of the people I know who are doing page-oriented comics do just that.
I guess I got the idea from...the past. I haven't built anything designed for an online experience for over a decade, and it looks like between now and then the average user's bandwidth tubes have become wider.
Research continues today. Production begins tomorrow. My self-imposed deadline for going live is 12 weeks from now. Thanks again for your insights!
posted by Construction Concern at 8:47 AM on June 24, 2018
« Older Books, crafts, etc. for a kid obsessed with... | Best Way to Approach Former Work Acquaintance Now... Newer »
This thread is closed to new comments.
posted by Construction Concern at 6:14 AM on June 23, 2018