DEV Community

Cover image for Make your own (interactive) graphic novel
Rob OLeary
Rob OLeary

Posted on • Updated on • Originally published at roboleary.net

Make your own (interactive) graphic novel

As a child, I was spellbound by the 2000 AD comics. It had nonlinear narratives, irreverent humour, countercultural leanings, and fantastic stories. It had some exceptional writers and artists such as Alan Moore, Dave Gibbons, and Grant Morrison who would go on to create landmark graphic novels.

I couldn't articulate what was so good about the comics at the time, but I just knew it was like nothing else, and I seemed to be the only one that "got it". I always wanted to create something like it myself, but never did. The furthest I got was to draw some of the characters.

If you are not familiar with 2000 AD, here are a few covers to give you a rough idea. The characters and stories span many genres and have very different tones from comedy to horror, so don't judge it by these covers! ๐Ÿ˜‰

Photo by Boyce Duprey

You can see the evolution of the style. The cheesy jokes remained.

2000 AD cover

Photo by Boyce Duprey

2000 AD cover

Photo by Boyce Duprey

In particular, Arthur Ranson did some stunning artwork that I found captivating.

2000 AD cover

Photo by Boyce Duprey

As you get older, it's hard to hold onto these creative outlets. I stopped reading comics. I stopped drawing. It didn't fit in with my professional life. Since I had no-one to share the interest with, it kind of became an anti-social hobby. So, it slowly disappeared from my life.

In the back of my mind, I said I will come back to graphic novels. I will make time for my own artwork. I thought I could make some digital artwork later, if it was tangentially related to my day job, it could be "practice". That never happened. My day job became architecture and backend development, rather than anything in the realm of graphic design. Zero tangents!

I found my way back to graphic novels much later. I started to read them on my ereader. Some of them look great on an eInk screen. I started drawing again. That lead me to learn SVG. I started to do some front-end development and got around to learning animation in CSS and JavaScript, and was surprised by how much is possible in the browser. It was a gradual process, but finally, I had the skills to try something out on the web! And ironically, it took a global pandemic, probably the most anti-social period in recent history, to give me the time to do it!

A web-based micro-action graphic novel

I wanted to try out something new. I thought I could try to make a cross-breed (mongrel) for the web - let's call it a "web-based micro-action graphic novel". ๐Ÿคจ

I wanted to try out 2 things in particular, I wanted to add a brief animation (microaction) to each panel (fill in the blank bits I imagine happening), and auto-scrolling to step through each panel at a particular pace. This is my first effort based on a page from Frank Miller's Sin City.

demo

You can play with the demo on codepen. Clicking on the page will restart the sequence.

The process

Initially, I created each panel as a separate SVG (Scalable Vector Graphic) in Inkscape. I measured out the space of each panel, so that combining them would be more-or-less a copy-and-paste job later.

I used GSAP for the animation, and worked on the animation for each panel separately. Combining the timelines in the script is simple, but you must make a few adjustments to hide the panels until they are next to be shown. The net result is one SVG and one timeline in the script.

This is the final panel with a CSS animation (rerun it if you missed it). It is a simple animation and is just 2 seconds of minimal action. It creates a more immersive narrative when it is combined with the more action-packed panels.

It took me, on and off, 2 to 3 days to complete the page. Using masking for the "blam" text effects was the most time-consuming part. I wasn't sure if it would work the way I wanted, so I had to experiment. Looking at it again now with fresh eyes, I would like to tweak it more! Nothing is ever done I guess, it is merely abandoned. ๐Ÿ˜…

I reckon I could make a full-sized graphic novel in this way in less than 2MB!

To distribute a graphic novel as a file, it is just a compressed archive of images (like a ZIP file), named as a .CBR or .CBZ file. You can see an example of this in the screenshot below, where I opened a 2000 AD comic in the archive manager app.

CBR Example

You can export the SVG as a PNG or JPG, and add it to a file archive along with the rest of your pages to create your own graphic novel. Just ensure that your images are named according to their sequence, it follows regular alphabetic sorting e.g. image001.png, image002.png..etc.

There is no obligation to create your images as vector graphics (SVG), you can create the images as raster images in Photoshop or whatever if you like. The advantage of making vector images is that it gives you more options if you want to style it for the web, or animate it.

What do you think?

I like the outcome. With the ability to control the speed of the auto-scroll, I would love to read a story this way. It would give me a reason to go through a story twice, it's almost like getting a director's cut of a movie. If you want to read it as a regular comic, you can turn off the animation and auto-scrolling. It's your show.

If you read graphic novels on a digital device, I would be interested in hearing your thoughts! Would you read a graphic novel in this way?

Conclusion

Given my limited artistic ability, making something similar to Sin City with it's bold, gestalt style would be easiest to pull off. Now, I just need my own story!

Maybe, I can make a short story of 20 or so pages. It might take 8 weeks worth of work to complete, but it would be a fulfilling project to work on part-time over a longer stretch! ๐Ÿ˜… Hopefully, some inspiration will come my way! ๐Ÿ’ก๐Ÿ™

In any case, my 8-year old self is proud of me. ๐Ÿ‘ฆ


Thank you for reading! Feel free to subscribe to my RSS feed, and share this article with others on social media. ๐Ÿ’Œ ๐Ÿ™‚

Top comments (11)

Collapse
 
robole profile image
Rob OLeary • Edited

adam west batusi

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I was going to save the article to read it later... then I saw this GIF and had to heart, unicorn, save, and read all at once ๐Ÿ˜‚

Collapse
 
robole profile image
Rob OLeary

๐Ÿ˜ ๐Ÿ‘Œ Adam West โญ

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe • Edited

Wow, that's a great idea!! Cheers ๐Ÿฅ‚

I will be adding this article to my weekly dev/design newsletter :)

Collapse
 
robole profile image
Rob OLeary • Edited

Thanks. Your newsletter looks like a nice initiative. I like the llama !

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Thank you! The llama? Where in the #93rd issue?

Thread Thread
 
robole profile image
Rob OLeary

Yep. Reminded me of fire alpaca

Collapse
 
bigt1305 profile image
Anthony Hoss

Awesome project, and great comic to choose;)

Collapse
 
robole profile image
Rob OLeary

Thanks ๐Ÿ™‚

Collapse
 
ttfd profile image
TTFD

this is great! both your return to comics/drawing and the work so far!

Collapse
 
robole profile image
Rob OLeary

Thank you ๐Ÿ™