Lettering involves some repetitive tasks, like placing 160 images across a book's document. I've written a variety of scripts as part of my normal workflow, and posted them online for anyone to use.
I built a font previewing app better tailored to letterers' needs, using vanilla JS and the MyFont API.
This tutorial will cover how set up the environment to start writing scripts to use in InDesign.
A part of the Credit Analytics suite, this widget gives the ability to calculate outcomes from financial models for multiple scenarios at once, as opposed to calculating each company separately. The user inputs various macroeconomic factors, and this widget provides generated model output, industry and country benchmarks, and integration with the LSM model.
The user has the ability to provide an infinite amount of scenarios, compared against a control (left) and weighted average (far right). There are arrows to shift left and right between scenarios, and the dots at the bottom indicate to the user where they are.
All of the Highcharts graphs are synchronized by legend filtering and relative bar heights, and they aren't rendered until they are visible on the page. The first point is accomplished by calculating the relative maximum of all the data points on load, and the second point by rendering indexes 0, 1, and 2, and waiting until the user clicks the right arrow to render graphs at indexes > 3.
This widget was built with ES6 (Babel), LESS, Handlebars. If I had more time I would've build this with CSS Grid instead of
<table>, so that I could add better CSS animations as the user flips horizontally
I wrote a mixin that creates a CSS-based image, given an array of HEX codes, and created some forks to see what I could do with it.
Creating CSS animations is not only good practice -- it's real good fun.
Using the computer vision library OpenCV, we developed a method for reliabily detecting tree-like structures from images using SIFT feature detection and brute force matching.
Detecting positions of trees is difficult primarily because of the complex nature of the backgrounds of these images, so we used several methods to simply the files for data collection.
Manga lettering has very specific editorial and graphic design needs, and many fonts fall flat, so I've started making my own using Illustrator and Font Lab.
The first font, Soapy Hands, was based off of my hand-lettered sound effects in the series Sweat and Soap. I expanded the all-uppercase set to include lowercase, as well as hundreds of extended characters. It was really well recieved, and I'm really proud of it.
My second font, Spicy Noodles, is intended for stylized dialogue, most frequently seen when a character is yelling. The fonts we choose as localization letterers try to match the Japanese font as closely as possible, and there was no good English font to match a particular type of JP font. It needs to match the JP in style most importantly, but there are many editorial needs that comics require that some fonts simply don't have, like curly quotation marks and crossbar-I's.
All of my fonts are available for free. If you have the means, please consider leaving me a donation so I can continue to create high-quality fonts for free.
This is a great example of how difficult it can be to transform complicated business logic into something the user will understand intuitively. I believe that communicating business logic is more effective through thoughtful UXD than it is through blocks of text.
After we added a "Basic" (simplified) view of different widgets and pages, we needed a place to toggle that setting for each individual piece.
We decided to reuse an old settings dialog, which previously had a checkbox to apply a special template to various widgets. Since we were adding not only a new setting but also new widgets that weren't affected by the old templating, I landed on radio buttons.
The user had to be able to batch-apply settings, but they also needed a handy discription of each "View". We gave the user large buttons at the top of the dialog, while still allowing the user to toggle each setting individually.
The radio buttons are all left aligned to emphasize the fact that the "None" option isn't available to all areas.
The biggest challenge of this project was the location of the dialog's code. Since it's on a platform dashboard, I didn't have access to any JS/CSS/HTML preprocessers. I had to write cross-browser JS and CSS animations without the safety net of modern technologies like arrow functions and automatic polyfills.
I participated in a week-long intensive class in UX Design at General Assembly in NYC. The class focused on an iterative design process, and at the end of the week we had produced high-fidelity wireframes in Sketch.
Our app tried to give users a better experience when trying to book events with friends.
Cover designed for high school newspaper, featuring the cover story I wrote. Created using InDesign.
Back page advertisement designed for another Kodansha series.
Lettering is an essential part of comic book production, where the dialog and sound effects are applied to the page via traditional or, in my case, computerized methods.
I primarily work on Japanese comic books (called manga) as they're being localized for the English-speaking market.
The tools I use most frequently are InDesign, Photoshop, and Illustrator.
It's hard to find tutorials specific to manga lettering, especially all in one place. I've been compiling my years of experience working in the industry into easy-to-digest tutorials.
As a way to spotlight my peers and foster appreciation for excellent lettering, I occasionally post breakdowns of manga lettering on Twitter. Here is a list of them all:
Part of localizing Japanese comics is Photoshopping all of the non-English elements off the page while making sure that the integrity of the art remains. This can range from simple retouches to complete reconstruction, depending on the series.
All images copyright Yuu Watase / Shogakukan / Viz Media
One method that letterers use to evoke different types of storytelling is to use different text styles. For inner dialog, we use italics. For narration, we might use a different font face. For aside text, we might use all lowercase.
When these styles are used consistently across the series, it allows the reader to process that extra context effortlessly. Like with all aspects of lettering, if it's done correctly, the reader won't even notice it.
Placing the translation of sound effects onto the manga is a more involved process than normal dialog. It's the letterer's responsibility to match the style and inflection of the original artist's work, without being so flashy it detracts from the reading experience.