Comics, Graphic Design — and the Power of JavaScript
Tags: javascript, design, comics, scripting
Published: 2021-07-09 16:54:34

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!):

![Viggo_boksen_ryg_indhold](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7bv2tiiyntf4j38pgkv.jpg)

But how on earth could JavaScript help me create seven comic books in record time?

---

## The Power of JavaScript

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: 

```js
const doc = app.activeDocument
``` 

… and then you can do all sorts of things! Read the [documentation](https://helpx.adobe.com/indesign/using/scripting.html) 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.

---

## The Secret Weapon

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:*

```js
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:

```js
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. 

---

## But then ...

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.

---

## Final Thoughts

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! 

---

## Geeky Bonus Info
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:

![Franquin and I](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s92amrkvbj2mfq8jv9bt.jpg)

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](https://www.high-logic.com/font-editor/fontcreator), that were used in the publication:

![Gaston Typeface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvuwzyzyflvgp08ebgq4.png)

![SpirouModern Typeface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn3p9vsrs518djwnn63s.png)