Saturday, April 13, 2013

Bit by Bit

"|+++++++\" is the fundamental text required to make the banner's papery texture.
This code-based logo is inspired from the anime Pretty Rhythm Aurora Dream.

It's quite interesting to see just how far down the rabbit hole a person can go with their hobby. As someone who was originally just a simple manga and anime fan, I never would have imagined that my interests would lead me to do something like this.


As I got more interested in learning Japanese, I applied as an editor in one of my favorite anime fan-subtitling groups in order to further immerse myself in the language. Though my position required fluent English, I was, through the editing of endless lines by comparing text and audio, able to polish the interpretation, summarization, and contextualization skills required to become a competent translator. Thus, after about a year of this combined with self-study, I finally succeeded in translating an entire anime episode (twenty-five minutes of pure Japanese audio) without much difficulty. From there, I sought to refine my skills further, and even started going to university in order to more properly study the language.

What the designing process looks like; I have only the big
ribbon left to add. Click these images for their full resolutions!

The catch? Translating Japanese to English plays no significant role in this... this pursuit of mine that I can't even name properly, unlike common hobbies like swimming or reading. I'm officially known by my groups as "banner designer," which you can see in my profile, but to anyone reading this: I'm still taking suggestions.

My first logo ever for my group. Any kanji/kana I use is usually what the
roman letters say. The style is from the anime Anyamal Tantei Kiruminzoo.

What I create on this blog are basically images - banners or logos usually - that are primarily made using an open source text-based program called Aegisub, which is extensively used by anime fansubbers to put subtitles on their encoded videos. Other than the translated text you would see at the bottom of the video frame whenever a character speaks, there are often many on-screen signs and text that require translation as well. Captioning the signs is a satisfactory workaround, and widely utilized by anime licensing companies when authoring DVDs or BDs, but in the highly critical and elitist business of anime fansubbing, many consider it a sign of laziness or incompetence if you do not position and style the translated text exactly like the original. This is where typesetters come in. These specialists spend their time finding exactly the right font, size, color, position, angle, duration, and - because the signs themselves often do not stay still - exactly how and how much to move the text to be displayed. Some typesetting enthusiasts even use expensive professional third-party programs such as After Effects or Mocha in order to get the motion tracking data for each moving sign right down to the pixel.

Wasurenai means "to not forget" in Japanese, hence my use of a
 forget-me-not flower. Based off Yumeiro Patissiere (SP Professional).

I found myself catching this OCD-like obsession over text when one night, after despairing over the fact that one of the shows I was translating had its typesetter quit because of real life issues, I decided to try and typeset an episode on my own. Typesetting is, in my opinion, like taking an exam: it's fairly easy to pass, but quite difficult to get past, say, ninety percent, and almost impossible to get perfect. My first attempts were, weirdly enough, better than I thought and perfectly releasable to the public according to my group. However, when I compared my work to the elaborate scripts penned by the experts, I immediately scrapped everything I had done and started over. Even now, I still keep in contact with several typesetters who have years more experience than I and know some advanced techniques that I still can't quite figure out. There is no easy way to become a typesetting expert; like learning Japanese - or any language, for that matter - you must keep trudging onward, starting from zero, step by step, until, slowly but surely, you become fluent.

The other main group I work in. Using gradients is resource
intensive, and nearly killed my laptop. From Rio: Rainbow Gate!

I think the moment I realized this "bit by bit" (I'll call it the three B's, or BBB) mindset is when this unique thing of mine clicked in place for me. I was becoming a better translator, editor, and typesetter BBB. I was getting more fluent at Japanese BBB. The fansubbing process is realized when each member contributes their own specialties BBB in order to create the end product. I use a program that turns mere code, bits and bytes, into pixels, which in turn transform into text. All BBB. Everything I do applies the principle of making mountains using grains of sand. I thus basically took the process even further by asking myself: Can I do something artistic, something I can use to express myself, by using BBB? Text-based images have been used since antiquity; looking at any brand logo can tell you that. Code-based images are widely deployed, too; ASCII art is a good example. What if I could combine the two? What would a code-structured text-based composite image look like?

This week-long project took 1,991 lines of handwritten code.
Same as my birth year! Taken from Tantei Opera Milky Holmes.

Well... They look like regular enough logos, I suppose. But, I digress, it's what's incorporated into them that sets them apart from others of their kind. I realize that though there are other, more feature-rich programs that I could use to make these images, those programs do not employ 'BBB' in any way that I can be satisfied with. They require you to move boulders to make the mountains, as I would call it. There were other reasons, such as the learning curves and prices being too high for the lazy part-timer I was at the time (though I do own a drawing tablet and several such programs now just for "advanced imaging heuristics"), but for me the simplicity of the code was what reeled me in - hook, line, and sinker. Aegisub itself is coded in C++, and its plugins and automations in Perl/Lua, but the override tags necessary for typesetting used in the internal line editor are formatted to be idiot-proof, much like HTML, and with only minimal RTFMing to boot. It intrigued me highly seeing how far I could go by just picking fonts and hacking away at them, BBB. Many fonts don't use letters, but shapes, which I can handily use in place of clip art. Because there are so many to choose from, it can be more troublesome trying to find the right font than doing the actual coding itself!

Meanwhile, this elegant logo I made for a joint group took
only seven lines of code. Inspired from A Little Princess Sara.

I started experimenting and self-learning by seeing if I could copy various anime-related logos and banners on the internet. While of course I cannot replicate brush strokes and fine details like in other programs, I believe that the number of different fonts on the internet far outnumber the total types of brushes or pens, and even more so because I can understand and effectively use Japanese fonts as well. With this, I can be as creative as need be. By blowing up a certain letter or character in a given font and cutting it to size, and then setting parameters like rotation, opacity, or color, I can achieve something fairly close to the effect I want. If anything breaks or looks off, I can go to the exact line of offending code and change it as I see fit, all with pixel-perfect accuracy. For me, this is a huge advantage over many other programs that only have a simple "undo" function (which Aegisub has built-in for user-friendly redundancy, of course). And just to put it out there: I bought my drawing tablet in order to more precisely move around the text using the graphical interface, not to draw in brush strokes! Put simply, the sky is the limit for a creative application like this... unless I break the software or hardware limits first, that is.

Though both logos are simple, the two lines covered by the titles required heavy styling and hacking to get right.
Designed after Les Miserables: Shoujo Cosette and Umi Monogatari: Anata ga Ite Kureta Koto, respectively.

To sum up, I will basically post a new entry for every additional banner or logo I design, along with the creative processes involved and perhaps the accompanying do-it-yourself tutorial (if not too long). I realize that though I try and use free, non-commercial images and fonts, there may be bits and pieces - especially in this first blog post - that are the intellectual properties of copyright holders out there, the names of whom I've unfortunately long forgotten at this point. I will henceforth write a "Thanks To" list at the bottom of every entry, which details the fonts used and their creators, and also any other images I use. To those who permit me to reuse/modify/enhance their work, thank you very much! If not, please hit me up with an email and I'll take down the offending image(s) as soon as I can. Thank you for reading, and I hope you enjoy my work.

The feather, too, is made of code... extremely complex vector code, that is.
Code can do anything! From Mermaid Melody Pichi Pichi Pitch (Pure).

No comments:

Post a Comment