Media Assets Localization: Aquarium Maps
Introduction
The first time I visited the Monterey Bay Aquarium, the receptionist provided me with a map, which greatly helped me and my friends as first-time visitors. Since then, I have been to the aquarium many times. During my visits, I noticed that a significant number of visitors were tourists from different places, including other countries. Many of them spoke languages other than English. However, the aquarium only provided maps in English. This led me to think: why not localize the map into other languages for the benefit of tourists from other countries? And here I am! My initial goal is to localize the two-page Aquarium map into simplified Chinese.
I am writing this post with the hope of assisting beginners in this field who are interested in translating files using Photoshop, by providing some useful guidance to avoid some potential pitfalls.
Maps of the Monterey Bay Aquarium:
[PLACEHOLDER: Map of First Floor
Map of Second Floor]
Link to the maps: https://www.montereybayaquarium.org/visit/aquarium-maps
Planned Workflow
1. Preflight
Source File Recreation: clean the to-be-localized texts from images; add English text layers back; adjust the text to match the original
Identify and list the file-specific potential problems that need to be fixed
2. Translation
Use the TMS platform to create a translation project
Translate with AI’s assistance
Review and edit the translation
3. Desktop publishing work
Find appropriate replacement font(s)
Adjust truncation and missing words/sentences/paragraphs/pictures
4. In-context review
5. Delivery
Process, Difficulties, and Solutions
This is a one-minute intro video of the project:
For preflight, I scanned through the two pictures. I located the strings that needed to be translated, including deciding which text should be point text or area text. I also marked the texts that I didn’t need translation:
The logo, the website of the aquarium, and the name of the association should remain untranslated.
There are also some small words that need to be translated but can be easily overlooked:
After locating all the text, I started the cleaning process:
To generate a picture without any to-be-localized text, I first used the Marquee tool to select the texts that needed to be recreated. Then, I right-clicked the selection to apply Content-Aware Fill or Generative Fill(based on the complexity of the background color).
text?
As you can see, the newly generated contents were presented as multiple layers. So, I merged all these layers down to the duplicated picture named the “Background” layer.
Cleaned Map of First Floor
Cleaned Map of Second Floor
After that, I hid the “Background” layer and started to create textboxes for inserting the English text. Luckily, Chinese and other ideographic languages will contract by about 30-40% when translated from English, so I don’t need to pay special attention to text expansion issues this time. But if you are trying to translate English into other languages like French, Italian, and Spanish, you will need to leave more space in the textbox for the localized text in order to avoid text truncation issues after the text is translated.
One important step is to find similar replacement fonts. In this map, most texts belong to the Sans Serif font family, so I used Century Gothic Bold as a replacement. (You can use WhatTheFont to find the most matching font.) To match the text with the original text, I used kerning and tracking tools in the Character Panel. Some hints for difficulties in recreating special texts:
example
Don’t type all capitalized text yourself, use the “All caps” function. This can help with translation.
You can use the “Rasterize Type” function(and then use “Rotating”) to transform the text shape.
Before I turned to add a black rectangle to fit this text background, I was looking at this method, but it failed to work on my side. If you are interested, please give it a try to examine if this method does work.
Here is the recreated map:
Map of First Floor:
Before
After
Map of Second Floor:
Before
After
For translation, I followed the procedure of PEMT: 1. pre-translate the source text with Machine Translation; 2. post-edit the translated target text on Phrase TMS; 3. download the completed PSD files from the platform).
example
During DTP work, two issues are worth mentioning:
First, bullet points were used in the source file, but Photoshop is not able to generate this type of text, so the only way to do this is to create “fake bullet points”: you can use the keyboard shortcut to add a bullet by holding down Alt plus 0, 1, 4, and 9 (for Windows) or Option plus 8 (for Macs).
Second, when you open the completed files, you will first find the texts seem to be still in English. Don’t worry, because when you click them with the Type Tool, you will find them turn into “tofu boxes”. This can be solved by changing the font to a properly chosen Chinese font. You can see the example as follows:
example
Here is the localized map:
Map of First Floor
Map of Second Floor
Summary & Reflection
To conclude, through this project, I further familiarized myself with the standard procedure of localizing a multimedia asset, which here refers to localizing flat pictures in Photoshop. While the overall outcome meets my expectations, some handling processes can still be improved. First, I didn’t go through the translation line by line on the Translation Management System but corrected the inappropriate translation in Photoshop after downloading. This increased the difficulty of maintaining the consistency of translation and didn’t provide help for generating a Translation Memory for future possible use. Second, I could’ve merged down the generative-filled layers all at one time, rather than doing repetitive work each time, which is what I’ve been doing in this project.
If you are a project manager wondering about how to arrange the turnaround times, or you are a beginner wanting to conduct a project on your own, just for reference, it took me around three days to fully localize the two-page map.
By the way, if you are interested in sea life, Monterey Bay Aquarium is definitely a must-see view. This is the official website of Monterey Bay Aquarium: https://www.montereybayaquarium.org/. Do pay a visit to it if you are available!
