Multilingual Comics with Google Spreadsheets and Photoshop

This is a behind the scenes look at the production process for multilingual Carla comic images that are a part of an article series I have been working on with Richard Whitt of the Glia Foundation; I also have been sharing the articles with my students to help raise "data fluency" in the context of marketing. (The sixth and latest article, which includes Carla's story in narrative form, discussion of data, and occasional comic images, can be found at: https://whitt.medium.com/digital-lifestreams-reclaiming-our-online-identity-74228196482d)

The narratives and comic images follow the journey of a character named Carla as she learns about all the data around her. The original comic art was done by artist Martha Sperry using a program called Procreate - and in this example the image is brought into Photoshop.

I thought it would be fun to show how with translation, a comic can become accessible to entirely new audiences, and I also wanted to test the ability of the latest Creative Cloud version of Photoshop to handle various languages.

Below is a view of Photoshop, which allows you to edit images in various layers, and this is an example of where the layering ability becomes important. The comic itself is all one image but in the original image the circle is blank so that text could be added - in Photoshop.

The two blue arrows point to the layers - the Layers “panel”, and the second arrow to the background layer with the comic image. The other layer in the Layers panel is an editable text layer.

In this version of the image, the text layer is in English and the power of Photoshop is mainly that it allows you to edit an image - that is, add elements and then adjust their position, or in the case of text, make corrections/adjustments to the text.

Normally you might just add a new layer for an additional visual item, but in this case because I wanted to copy and paste translated text in from Google Spreadsheets, I chose to duplicate an existing text layer. (The reason is that this preserves the position of the layer, which in this case is inside the circle)

This is a close up of the Layers panel where I named the duplicated text layer “Korean”:

This shows the image with the blank circle in the background and the text layers ready to go:

Then the main thing I wanted to test is whether I could actually paste the translated text into the image. Using various languages can be very tricky, as sometimes you have to have a certain language or keyboard layout added to even work with it on a computer. But to a certain extent, web-based tools and advanced apps are starting to have more capability.

The reason I used Google spreadsheets is because I wanted to use human translation. Google Translate is an excellent tool that uses AI to make translations with probably the best translation quality in the world (because of the newer AI power they added via deep learning). Microsoft also has very powerful translation technology. But the integrated tools in Google Drive and Google Spreadsheets are very handy because I created the spreadsheet to make it easy for someone to log in and add the translation.

I asked various friends and acquaintances to translate into Arabic, Chinese, Spanish and Korean. (Special thanks to Dr. Jawdat Abboud, LF, Erika Rodriguez and SK.) The reason I broke it up into bits was to make it a bit easier to translate, one sentence at a time. (Note: Arabic is interesting - the language is "right to left" so it is written/typed from the right side of a text area to the left, and is "right justified")

The translation from someone who is not a professional translator may not be "perfect", but if they are bilingual and fluent it can be decent. One technique that “language service providers” use is to actually “test” a translation by having someone else translate it back into the original language. So if you translated text from English into Chinese for example with Translator A, you might have another translator translate the Chinese translation back into english, and then compare the original to the “back translation”. This is one way to ensure as high a quality as possible, and companies with resources and highly visible projects sometimes invest in this.

Back in photoshop, when I looked at the text layer, at first when I paste the Korean in, it didn’t appear right:

But then when I selected the text in the layer and looked at the fonts, I was deleted to find a Korean font named “LG PC”, so with the text selected, I switched the font to a Korean font.

And this allowed me to adjust the sign on the building from “Nursery” into Korean.

This image below shows the results, and in the Layers panel the top layer has a new name based on the Korean characters. Then the layer right below it is the one I named Korean, which will be for the text in the circle.

So I went back to Google spreadsheets, copied the text, worked through various languages and this is the final result:

Conclusion

As you can see, when working on a project, there are many ways that you can open it up to new audiences by learning how to get material translated, and comics is an interesting medium, because there is not as much text to deal with - so it can enable many new language versions with a relatively less amount of work than something like an entire article.

And the latest version of Photoshop in Creative Cloud does appear to have good capability to enable fonts that allow you to take translations and integrate them into text layers.

Voila! Various versions of the comic page. Any comments or questions are welcome, and please share this article with a friend or family member if you think they'd enjoy seeing it. Also please consider "liking" this.

Here are some more of the language versions:

(Arabic)

(Chinese)

(Spanish)