December 24, 2007

ASK MORDY: Movie Credits Text

I noticed a recent post on the Illustrator User to User forum from Plumeragent:

I'm laying out a DVD slip sheet and was wondering if there is a standard template for the credits text as shown on the back of a hollywood-style DVD jacket, usually near the bottom. The part that I'm concerned with is the titles for each credit such as PRODUCTION DESIGNER or MUSIC BY or DIRECTOR OF PHOTOGRAPHY...where the print is very small next to the person's name and uses 2 horizontal lines while the name is as tall as the 2 lines on only 1 line. Is this just a layout trick using separate text boxes for each credit or some fancy Character/Paragraph palette adjustments, or? It looks almost like having superscript and subscript text in the same position...see your nearest DVD back cover for an example of what I'm talking about.

In addition, John Nack recently posted a link to this cute clip which talks about how just about every movie poster uses the font Trajan. I take it to heart only because I've made a similar observation in the past (only I've kept it to myself and my close friends -- amazing what the 'net does...).

Obviously, it's no coincidence that these two items became known to me in such a short span of time. It must be a sign from above that I should post a technique on how to achieve this particular text effect (using Trajan of course) in Illustrator. I know what you're thinking -- a type treatment like this surely should be done in a program like InDesign. And ordinarily you'd be correct. But today is different. To achieve this effect easily in Illustrator, you have to look towards the East. No, farther than that... more... keep going... that's right, I'm talking about the Far East (well, for Kyle Barrow and others who are already IN Japan, well, you get the point...).

Back in version CS, Illustrator received a new text engine. Yes, this caused some initial grief with backwards compatibility, but the new technology brought tons of new text features (think Optical Kerning, Every-Line Composer, Optical Margin Alignment, OpenType support, etc.). For those who use Illustrator in Asia, where typography is far more complex than it is here in the US (US Roman typography is a super soaker compared to Asia's 2-byte tomohawk missle fonts), the upgrade in the Text engine in CS was, as Donald Trump would say, "HUGE". The good news here is that unlike InDesign, which has those features locked away in a separate "J" version of the product (which you'd need to buy), Illustrator includes ALL of the Asian text features in the English product. The folks at Adobe just didn't want to confuse us with all these Asian-specific features, and so they politely turned them off by default. However, it turns out that some Asian features may actually be useful to those using Roman fonts in the US. One of those features is called "Warichu" and happens to be PERFECT for our little task of setting some text for a movie poster or DVD. Let's begin:

1. Turn on the Asian text features. In Preferences, navigate to the Type panel and click the box marked "Show Asian Options".

2. Set your type, as you would normally, all in one line. Style it accordingly. While I set a single entry in this example, you can set ALL the text in a single string if you'd like.

3. Select the words that need to be stacked in two lines. In this example, that would be the words "Production Designer".

4. Open the Character panel and choose "Warichu" from the panel's flyout menu.

5. To get the settings as you'd like, choose "Warichu Settings" (with the text still selected) and choose the appropriate settings. Lines: Controls how many lines you want the Warichu text to become; Scale: Controls the size of the reduced text; Line Gap: Controls the "leading" of the Warichu text; and Alignment: Controls how the Warichu text is aligned (left, right, etc).

6. To really make this effect useful, create a Character style. That way, you can apply this effect, with all the correct alignment settings, with one click.

Because Illustrator's text engine has all of this built in, you can open this file on another computer, even if the Asian Text Options aren't turned on. The text will appear correctly. Heck, you can even copy and paste the text into Photoshop (which shares the exact same text engine that Illustrator does). So you don't have to worry about sending this file off to print -- it will be fine.

One thing I will note: It's best to turn the Asian Text Options off if you aren't using this effect. Leaving it on will only add all these Japanese words and settings all over your application and could confuse you. In addition, it will replace your English language paragraph composers with its Japanese counterpart. But it's easy enough to simply turn the preference on and off when you need it. That's my opinion anyway.

In fact, if you turn on the Asian Text preference, and then create a Character style for your Warichu text, you can then turn off the Asian Text preference -- and the Character style that you created will STILL WORK. So if this is a kind of text effect that you use often (yes movie poster designers, that includes you), set up a couple of character styles and then turn off the Asian text features altogether. Any time you need to use this effect, simply load the necessary character styles into your document. Or if you REALLY use this a lot, add the character styles to your NDPs (New Document Profiles).


Anonymous said...

Thanks a million, Mordy! This technique is a real time saver and much easier than using tables or inline frames.

One thing I would recommend after successfully using Mordy's simple technique, is to turn off Hyphenation first. Also, I couldn't find the Warichu option in Photoshop CS3 after turning the "Show Asian Options" preference on, so maybe Illustrator offers the only complete answer to this layout problem. Fortunately, I could copy and past from AI to PS successfully with just a few adjustments necessary afterward.

(aka Plumeragent)

Gary Spedding, Ph.D. said...

Yes - very nice. I too took to PS and made a nice "banner" for my outgoing E-mails this way.

Narration said...

Did you notice, that the right justification isn't correct on the two small lines? The space between words is included at the end of the first line.

I wonder if there's any way around this -- I couldn't find it. And so, learn to use Indesign tables...

Mordy Golding said...

tom - thanks! glad I be of help

gary - that's putting a technique to use!

narration - it isn't a space. I've found that it depends on the font you use. Trajan seems to leave an odd space there (easily fixed with a little kerning), but for example, when I used Univers, the alignment was fine. I got different results with different typefaces. Why is this happening? It might be related to some small underlying issues within the type engine. For example, if you use the character rotation attribute, you get weird spacing which also requires some manual kerning adjustment.

khiltd said...

I swear I've seen this exact same tip here before. Was it in one of the videos maybe?

Mordy Golding said...

Yep, it was in one of my video podcasts... but it obviously wasn't searchable and the server that I used to use for my podcasts no longer exists. So now the tip is in print :)

John Svatek said...

Sorry about coming to this so late, I just found your site.

This is truly an awesome feature--the only problem is that I need it in ID, where I often create multi-line, run-in heads. I'm stuck pasting frames as anchored objects, but this would be way easier. I searched AI help to see if I could export the character style, no luck, ID doesn't seem to have the Asian type options (just "Inline input for non-Latin text," which doesn't help).

Is there any way you know to get this into ID short of converting to outlines then cop/paste, which isn't really practical, or setting books in AI, which is impossible?

ps--great site--I've been browsing for an hour, and I'm not even much of an AI user

Anonymous said...

If you select the space between the two words (Production and Designer) you can scale the space horizontally to 1%. Which makes the right alignment nearly perfect