My experience with desktop publishing (DTP) so far has been quite enlightening, and in the wake of a rapidly expanding demand for media localization, I recognize the increasing need for DTP skillsets in the industry. To that end, I’d like to share a little project I completed while attending MIIS.

Image Localization

The premise was simple: localize a couple of promotional images into German and Korean from English using Adobe Photoshop. So using the skills and tools learned in class, I obtained two images from an email from Nintendo about Pokémon™: Let’s Go Pikachu and Pokémon™: Let’s Go Eevee and proceeded through a few simple steps.

Image localization is straightforward conceptually, but tedious and often complex in practice. The basis is that, since you are dealing with images, you can’t edit the text, which is a problem since you need to translate the text. You might resort to OCR (Optical Character Recognition), but that wouldn’t get rid of the old text or deal with the background. Thus, the only practical approach to this conundrum is to create a mask layer to hide the old text, then create new text on top of the mask that closely resembles or exactly matches the original text. Voila! You have editable (and, more importantly, translatable) text!

The Mask

For the first image, most of the challenge lay in the creation of the so-called “mask” layer. Using Photoshop’s “Content Aware Fill” function allows an easy method to get rid of the text, but, because of the unique patterned background, distortion was inevitable. Thus, I was forced to recreate parts of the pattern to clean it up, as seen below.

The remainder of the work involved cleaning up fragments of text that the Fill function missed. This demonstrates the unfortunate limitations of the function, but it should be noted that the vast majority of the text was filled in, requiring minimal post-work.

This was a simple matter of using the brush tool. It could be argued that this could have been avoided with careful use of the magic wand tool, but after multiple adjustments and approaches, I was forced to clean up the text manually. For the sake of process improvement, I would probably resort to manual cleanup immediately after applying the magic wand tool to hasten the overall process in the future, rather than tediously finding a way to get it all in one go with the Magic Wand.

The Font

Once I cleaned everything up, I blended all of the adjustment layers into a single mask layer, effectively removing the text from the image. Then, of course, came the replacement text. To translate the text, it needed to be editable so I created a few text boxes, and did a deep dive into the internet to find the font used in the original image. Unfortunately, I came up empty-handed, and I surmised that the font was a proprietary one used and owned by Nintendo. So, instead, I found a font closely reminiscent of the original in PS’s font library and used that in its place.

Once you have found an appropriate font, matching the text involves a series of adjustments to some important settings including leading, kerning, vertical and horizontal stretch of the characters, and, of course, font size. You’ll also need to tinker with paragraph settings as well, such as alignment, indentation, etc. This was probably the most tedious part of the project. I had to align the text just right by tinkering with the above mentioned settings.

The second image with the green gradient in the background was more straightforward and more easily demonstrated the usefulness of the “Content Aware Fill” function in PS.

If you compare this image to the original above, you’ll notice subtle changes in the font, as was the case with the first image. At this point both images had a mask to hide the original text, and text boxes with properly adjusted character and paragraph settings, which led to the final stage.

Translation

Believe it or not, this was the easy part. I utilized the CAT (Computer-Aided Translation) tool Memsource to localize both files. I selected German and Korean as target languages to test this process, and both came with their own unique challenges.

German

German typically expands by 30% when compared to English. That is to say that it takes 30% more words to say the same thing in German as it does in English. Unfortunately, this meant that text in the images would extend past the ends of the text boxes I created or become misaligned once translated. To combat this issue, I either resized some of the text boxes, or I opted for simpler translation to cut down on the word count/length. You can see the results below:

Korean

The Korean versions of the images were a bit simpler to deal with. Korean generally shrinks compared to English, as opposed to expanding like German. Nonetheless, I ended up resizing some text boxes to make the text appear to fit better. The real issue was using a Korean-friendly font whose style at least vaguely matched the English source text. You can see my choice below. But bear in mind, that I used unedited machine translation to get this text since I didn’t have a Korean translator available. So in case you can read Korean, please pardon the nonsense you might find.

Conclusion

Once you’ve gotten the hang of creating masks and recreating text, you have mastered the essentials for image localization using PhotoShop. With the modern additions to PhotoShop’s array of tools, this process has become easier than ever. The Magic Wand and the “Content Aware Fill” function are both very powerful tools when used correctly. That, combined with many CAT tools’ present integration with file types including PSD, makes for a smoother experience for localizing images. However, be prepared for challenges such as patterned backgrounds and unique fonts. They may require a slightly creative approach with a little extra effort, but the payoff will be worth it.

If you have any questions, or would simply like to discuss localization or DTP, please feel free to reach out to me on my Contact page.

You’ll also find the files from this project in the google drive link below:

https://drive.google.com/open?id=1Feas1pd22FXP32sfAHbblsDLM7KaFokv

As an aspiring professional, real-life experience is an invaluable and necessary part of my personal growth. I would like to present the work that my colleagues and I completed at the end of our Fall 2018 semester that reflects that growth. This project essentially consolidated everything we learned in our CAT class and put it to practice, forcing us to make decisions about how to approach and conduct the localization process from beginning to end.

First thing’s first, our client: Blablacar is a German ride-sharing company established in Europe that my group selected. The ultimate goal was to localize the “history” and “about us” pages into US English so that Blablacar could theoretically begin expanding into the US market.

For the first part of our project, we were responsible for coming up with a statement of work as part of an official project proposal. To that end, we drafted up the following document:

In order to make the project readable for the client, we created a simple timeline/flowchart to illustrate how the processes would proceed without confusing the client. We did learn a few lessons from the kickoff meeting with the client. The primary lesson learned, however, was to discuss client preferences during the kickoff meeting and to plan to sort through them at the beginning of the project, if approved.

We also developed a list of potentially problematic words for the translation process that we brought up to make the client aware of any pitfalls that might occur as a result. (e.g. words such as Nutzerführung, Mitfahrzentrale, Gesprächsfreudigkeit, etc.)

One other important takeaway was the need for brevity in our documents. Including as much information in as little space as possible while maintaining clarity was a significant factor in our meeting with the client.

After client approval, then, we could proceed with the actual localization. As part of our strategy to complete the project, we divided the approximately 600 words evenly between us and translated the documents using the translation management tool Memsource. This process naturally involved the creation of a termbase and translation memory.

Also included was the pseudo translation which, as we have learned, is a crucial part of the translation process to identify problems before beginning translation.

But there were some unique challenges to this setup. We had to translate each of our sections separately, and, as a result, we had to collaborate afterward to ensure that our final translation was consistent in style and tone. For the small scope of our project this approach was acceptable and beneficial, even, since it allowed us a glimpse at the habits and preferences in the process of translation of our teammates.

Some of our work:

But in the context of a larger project, this approach would be ill-advised if not downright messy when producing the deliverables for the client. However, at the end of the project, we were able to consolidate our translations effectively and produce a quality translation suitable for the debut of a European website to an American market.

For our deliverables, we included the translation memory, termbase file, source text in a word document file format, target text in the same format, and our pseudo-translated file for future reference. Ultimately, this project demonstrated our ability to communicate with clients throughout the proposal process for a project as well as our ability to negotiate with the client to determine preferences and key details to allow the project to be smooth and without major setbacks.

It also demonstrated our ability to coordinate our efforts and function as a localization team.

Here is a link on Google Drive to our final deliverables:

https://drive.google.com/open?id=1I6VVUoVjBUEvB96IvEwEQqzmvyh-LFvn

 

And, of course, here is the video presentation of our lessons learned:

https://drive.google.com/open?id=11u5X0toYJ4v-8HgejGjPQ7Avuqz5h7gf

As a final project for the Fall 2018 semester at the Middlebury Institute of International Studies, two of my colleagues and I localized a JavaScript version of Pacman from English into three different languages (Arabic, French, and German). We leveraged the skills and methods taught to us throughout the semester to complete this project in a timely fashion. Here are the results:

The process of localizing a game or application that runs on JavaScript is a fairly straightforward, if somewhat tedious, process, but please allow me to walk through it step by step.

My colleagues and I utilized the “24 ways” method which involves three distinct JavaScript files being created. The first file is called “24Ways.js”:

Very simple and concise. It essentially checks to see if a translated version of a string is available, and, if it is, replaces the source text (ST) string with the target text (TT) string during run-time. It is the crux of this method, but, ironically, requires the least amount of maintenance among the files used for this method.

The next part required the majority of the work needed to bring the project to completion. In this step, we gathered all of the strings in the JavaScript files that players of the game will encounter during normal gameplay. We copied the strings into the simply named “Strings.js”.

This array of strings is passed to the “_” function in the “24Ways.js” file so they can be translated. They are divided into two sets (purple and orange), and the rightmost set (orange) needed to be translated. Normally, the text in this file would be copied into a word document or .txt file, but since the scope of the project was small, we manually translated the orange strings into our three languages. But to translate the strings using the normal method, after copying the strings to a text file or word document, all the characters other than the strings to be translated would be toggled to “hidden”. Then, when the document is exported to a translation management tool (e.g. Trados Studio, Memsource, etc.), the text is directly translated, and everything (including the hidden characters) can be copied and pasted back into a JavaScript file.

With the “Strings.js” file in English, we added the target language copies to the game, “Strings_DE.js”, “Strings_FR.js”, and “Strings_AR.js”. (The source and target text versions of these files were the second and third of the three distinct JavaScript files mentioned earlier.)

With our 24Ways and Strings files in place, it was simply a matter of calling the “_” function for every string in the JavaScript files that players of the game would encounter. (e.g. _(“example text”) )

In many cases, this process required splitting up strings that were written in HTML code that ran during runtime, as was the case with the screenshot above.

The only remaining text requiring translation, then, was anything in the main HTML file “index.html”. Thus we translated the file and made target language copies. (“index_DE.html”, index_FR.html”, “index_AR.html”) So when a player launches the any of the translated HTML files, the game is entirely localized into the language of the “index” HTML file they chose.

At the end of this process, for the sake of usability and efficiency, we added a language selector to the game, so that players can freely switch between languages during runtime. It should be noted, here, that we also made some minor changes to the primary CSS file to accommodate some issues with the target languages. This is a common problem when localizing into foreign languages, but simple to fix.

Ultimately, this entire process was simple and straightforward, but it consolidated the skills we learned in our localization courses and put them to the test. Here is the link to the original game (this game does not belong to me):

http://pacman.platzh1rsch.ch

And here are some screenshots of our work:

 

And, lastly, here is a link that you can copy and paste into a browser for the downloadable version of the localized game on Google Drive:

https://drive.google.com/open?id=1XK5a_GmkzOmOBhNi7yUM8fo-82dtDl6_