Tackling More Complex Graphics [VN Image Editing]
Entry posted by Darbury
1472 views
Here in the United States, we’ll be spending Thursday the way The Lord God intended: eating our weight in meat, potatoes, and gravy, then farting ourselves to sleep on our uncles’ living room couches. Those of you from other countries have good reason to be jealous; there’s no slumber quite as deep or blissful as the post-Thanksgiving coma. But guess what, my forlorn foreign friends? This year, you’re in luck. That’s right — I’ve decided to write another image editing post. With any luck, this’ll put you to sleep faster than the second season of The Walking Dead.
I know. Those are lofty claims, but I’m ready to deliver a Thanksgiving miracle. You’re welcome.
Insomniacs of the World, Good Night.
So at the tail end of image editing on a yet-to-be-released otome translation, I got a care package from the TL team with an additional set of graphics that needed retouching. Most of it was straightforward stuff — modal UI elements, chapter title screens, etc. — but one folder in particular seemed to emanate waves of pure evil. You know that feeling you get when your phone rings at 7 o’clock on a Sunday morning? And you can see it’s your boss calling? And every hung-over bone in your body screams at you not to answer, but you know you have to? Yeah, kind of like that.
So I opened it.
Inside were 13 different full-screen maps, all very similar to the one above, showing the in-game route from one castle to another. I could already see it was going to be a relatively painful retouching job — lots of smallish text set against an intricately illustrated and heavily weathered map. Complicating matters was the fact that the same map was then repeated 12 more times with slight variations, each image representing the path traveled by the characters over the course of a particular chapter.
Ouch.
Image editing is all about measuring twice and cutting once. The more you mess with an image, the more room there is for errors and inconsistencies to creep in — and the more time you waste. So in this case, my first job was to see how much each map actually differed from the next. With any luck, I could create a base map template that contained 90% of the heavy retouching — those elements that were common to all maps — then paste the individual elements for all the other maps on top of that. In Photoshop, the easiest way to do this is layering one image over another, then applying the Difference blending mode. (For you programmers out there, you can think of this as running a diff command on two text files.) The result looks something like this:
The black pixels represent areas where the two images are identical; the non-black pixels show where they differ. In this case, after doing this with all the images, I could see there were two main points of difference between the maps. First, the inset box on the lower right, which shows the characters’ origin, destination, and the direction of travel, along with thumbnail pictures of each location. Second, the path indicator along the road, with a highlighted road marker showing the characters’ final destination. With this info in hand, I could now start tackling the retouching itself, while setting the Photoshop file up for maximum efficiency and flexibility.
The first step in building a map template was to remove the Japanese text from the image:
Tedious stuff, but fairly standard. You might notice that I only removed the text from one of the orange road marker “capsules.” There were a couple reasons for that. For one, there weren’t a lot of similar patches of texture to pull from for cloning, so retouching them all would be a pain in the ass and produce uneven results. Moreover, it would be inefficient, since other than the weathering, they all look more or less identical. So in this case, I drew a selection path around the one retouched capsule, turned it into a smart object, then duped it about 20 times for all the other markers along the road:
Better, but not quite there yet. It’s painfully obvious that all the capsules are identical, and they stick out like sore thumbs; they’re crisp and clean while the rest of the map looks beat up and worn. So my next step was to blend them into the map and add an element of irregularity by duplicating the original map image, floating it up to the top, then applying the Lighter Color blending mode. This mode compares the two images pixel by pixel, and whichever pixel is lighter gets displayed in the final image. Since the capsules were comparatively dark, this effectively lets me pick up the weathered areas of the map where the lighter parchment shows through and apply it only to the capsules.
Much better. They look baked into the map now. As a final touch, I also added the slightest bit of canvas texture as an FX layer set to Color Burn to bring back some level of darker noise to the capsules. Not too much, though; since we have to be able to read 4-9 small English letters as opposed to a couple large kanji characters, we need to allow for some increased contrast.
Done and done. I was finally in a position where I could start adding the translated text to the map. And that’s where I decided to break one of my cardinal rules: never set English type in vertical stacks. Every rule has its exception, though, and this was one right here. The lettering in older, hand-drawn maps was often a loosey-goosey affair, with cartographers squeezing in type wherever they could, however they could. Horizontal, vertical, curved — whatever it took to cram words into the space available. English vertical type would have been right at home on a document like this. Since most of the place names on this map were short, and the space available to me was largely vertical blocks, I decided to go for it. I picked a Western font I thought captured the feel of the original map lettering, then re-set all the type.
With the base map template finished, I could quickly set about outputting those other 12 map variants. This basically involved creating a dozen layer group overlays for the inset box in the lower right, each one holding updated text and location images copy/pasted from the original maps, along with UI indicators as needed — the blue swirl indicating current location, and the hand-drawn arrow indicating direction of travel. Then I created another set of overlays for the red path line drawn over the map itself. Since the capsules were all smart objects, I could easily highlight individual ones as needed by selectively applying a light orange Color Overlay FX with a Soft Light blending mode.
Think that bright red line and arrow on the road looks shockingly bad? Me too, especially considering how well art directed the rest of the VN is. It’s almost like the devs had an intern add it in Windows Paint at the last second or something. Oy vey.
Anyway, everything else came together quickly after that. In short order, all the maps were exported and the new files were back in the hands of the team.
Asleep yet?
All told, the project took about 90 minutes for 13 images, with the first half an hour or so spent reviewing the maps and coming up with a plan of attack. Had I not “wasted” that time up front, I could have easily spent 2-3X longer trying to get things done in less efficient ways — if not more.
So what have we learned today?
- When it comes to image editing, always measure twice and cut once. Plan ahead, especially on more complex projects.
- Always be willing to break, or at least bend, your own rules if a situation demands it.
- I will be made up of approximately 93% pumpkin pie by this time tomorrow.
- #3 is a very conservative estimate.
1 Comment
Recommended Comments