24
Comics, Graphic Design — and the Power of JavaScript
In January 2007, I was asked to do the impossible: Layout, letter and produce a boxset with seven hardcover comic books, each 136 pages – in just two weeks! I knew I could do it, because I had a secret weapon, that none of the other Graphic Designers I knew used: JavaScript!
February 2007 marked the 40th anniversary of the “Gaston Lagaffe” comic (“Vakse Viggo” in danish). Multiple publishers around the world were publishing commemorate anniversary-editions, but the danish publisher had decided not to mark the anniversary.
Then they had a sudden change of heart – and the boxset had to be ready in record time, in order to co-print with other countries.
It ended up looking like this (it's rare, and sold out today!):
But how on earth could JavaScript help me create seven comic books in record time?
As web developers we often forget, that JavaScript can be used in many other places than websites and web apps. One such place is Adobe InDesign, a popular desktop publishing application. Using it's Script Panel, you can write small helper-scripts or even extend the UI (with small popup forms) using JavaScript.
In Adobe InDesign, you simply create a reference to the active document in a plain .js-file:
const doc = app.activeDocument… and then you can do all sorts of things! Read the documentation and try some of the sample scripts. If you know JavaScript, it's straightforward. You can also write scripts for Adobe Photoshop and other Adobe applications.
My “Secret Weapon” were a bunch of scripts, each assigned to a function-key, that could help me:
- Import the complete text of a comic book (from a Word-document), split it into pages and then into multiple text-frames, that would be used for each “speech balloon”.
Excerpt:
for (i = 0; i < len; i++) {
height = ((HEIGHT * len) > pageHeight) ? (HEIGHT / len) : HEIGHT;
width = WIDTH;
tmpFrame = doc.pages[pageIndex].textFrames.add();
tmpFrame.geometricBounds = [0, 0, pageHeight, pageWidth];
tmpFrame.contents = frames[i];
tmpFrame.textFramePreferences.insetSpacing = [2, 2, 2, 2];
tmpFrame.textFramePreferences.verticalJustification = VerticalJustification.CENTER_ALIGN;
tmpFrame.geometricBounds = [0, 0, height, width];
tmpFrame.move( [-width, height * i] );
}Add “Word Effects”, for instance changing a line of text into ”wavy text” or text, where each letter grow or shrink in font-size (in comic books, these are KABOUM! and VROOOOMM! etc.!)
Change the language of all text-frames in a document
“Fit text to frame”, by growing or shrinking the font-size
Color layers with original lettering, so you could differentiate them from local language lettering
… Sometimes, I'd just write a quick script to help me re-link artwork-files or similar:
d=app.activeDocument;l=d.links;
for(j=l.length-1;j>=0;j--){
n=l[j].filePath.replace('TUNI_45','TUNIQUES_50')+'.tif';
nf = File(n.replace("C:\\TB45\\Tuniques Bleues 45 page 03_46\\images","D:\\Download\\TB_3\\Natifs\\Tuniques 50 page 03-46\\images"))
if(nf.exists){l[j].relink(nf);l[j].update()}
}So – yes – JavaScript did really make it possible to create these comic books in record time!
At that time, the workflow of a typical “comic book letterer” was like this:
- Select the text of a single speech balloon in Word
- Copy the selected text
- Create a new text-frame in Adobe InDesign
- Paste copied text
- Adjust the size of the text-frame to fit the speech balloon
- Re-format the text
- Repeat for next speech balloon …
Needless to say, by automating all this in JavaScript, I could letter the comics many times faster than my competitors.
As a result, I could lower my prices, and get even more work.
In 2008, the financial crisis hit, and for the years to come, it impacted the Danish comic book-market badly.
Not only that, but my main line of work besides comic book-lettering, was layouting childrens magazines like “Hello Kitty”, “Spider-Man”, “Star Wars” and “Toy Story”.
As you might or might not know, childrens magazines faced a very hard time after the launch of the iPad in 2010!
A combination of the financial crisis and the launch of the iPad meant, that the company I worked for, went from 130 employees to just 5, in the span of a few years.
Luckily, graphic design was only half of my work-life, the other half being – you guessed it! – web development! In 2014, I “retired” as a graphic designer, and focused entirely on web- and app development.
So why this post? It's not only meant to show you how – as a Web Developer – you can use your JavaScript-skills outside the world of web development, but also:
No matter which field you work in, it's all about improving and optimizing your workflow. If you have repetitive tasks, use your coding skills to remove them!
… and, finally:
If you know a Grahic Designer, ask her/him if s/he has repetitive tasks. If yes, offer to help writing scripts – it can make a huge difference!
The artist behind “Gaston Lagaffe” was called André Franquin (1924–1997), and I was lucky enough to meet him, when I was a 12-year old comic book geek:
When I did the lettering of “Gaston Lagaffe”, I wanted it to resemble the original as much as possible, so I scanned a bunch of pages with Franquin's original handwriting, traced them in Adobe Illustrator, and created two typefaces in FontCreator, that were used in the publication:
24