When I was a kid, Disney was gradiose, the characters larger-than-life (literally), and this place was where all my dreams came true for a day. Now, I focus on different things, my awareness and perception are different, and my expectations much lower. The heat and high humidity might have had something to do with it. I kept thinking how miserably hot and sweaty those poor chaps inside the heavy Mickey and Pluto costumes must have been. Maybe they use ice packs or portable air conditioners inside those things.

Despite having a hard time thinking about all the money these families were spending on their vacations, I still had fun. The funnel cake was good, Space Mountain was still a blast, the Haunted Mansion still wowed with its illusions of dancing ghosts, and walking down Main Street brought back memories. Sadly, we never made it to Pirates of the Caribbean, my favorite ride there.

At some point in the middle of our day, I became obsessed with all the signage and type everywhere, and started snapping photos of it. I wasn’t as rigorous as I could have been, and we were only in Magic Kindom for half a day anyway, so my collection is nowhere as complete as this big list of type spotted at Disney World. But nonetheless, my geeky design souvenir of the visit: Disney Signage.

One gripe about using Illustrator for web stuff: after 11 versions, there’s still no easy way to simulate underlined text without manually drawing lines with the pen tool, then moving them every time the text reflows.

Before drawing attention to this one missing feature, I should mention that I love Illustrator. I’ve been working with this vector app since it was dubbed Illustrator 88 — the equivalent of version 1 or 2. I briefly switched over to Freehand (when it was still produced by Aldus) because I could edit and preview artwork at the same time. But Adobe quickly caught up with Aldus, and I switched back. Illustrator is invaluable for working in print design and illustration, and I’ve been finding more and more uses for it when designing for the Web.

When creating web comps, it’s not uncommon to underline some of the links on the page. Perhaps it’s a technical limitation of text rendering. Or perhaps the Illustrator team is afraid that users will want much more control over underlines than capability would permit (stroke weight, offset, etc.) opening up a can of worms if they implemented the ability to underline text. Despite the fact that users have been asking how to underline text in Illustrator for several versions now, Adobe somehow manages to exclude this feature in each new release of the software.

Until now, there was no way to create simple underlined text in Illustrator, other than the method I quoted above. Again, that’s until now. Full credit for discovering a handy trick for creating underlined text in Illustrator (or at least for discovering it, reading about my frustration, then letting me know about it) goes to Phil Oye. He documented his discovery just a little over a month ago. I’ll expand on his explanation here.

The short version of it is: create the text in Photoshop, then underline it with the underline feature. (Apparently the Photoshop team listened to requests, and managed to figure this out before the Illustrator team.) The underline button sits in the Character palette in the same line as Faux Bold, Faux Italic, All Caps, Strikethrough, etc.

Once underlined, copy the text with Photoshop’s text tool, then paste it into Illustrator. Voilà! Underlined, editable text in Illustrator. I’m not sure how far back (in versions) the underlined text will transfer over to Illustrator, but it certainly works in CS (v.11).

The rest of the trick is only necessary if repeated instances of underlined text are desired. The description of how to set up a character style gets a little long, but the process is actually very simple once you know what’s involved…

This trick would be a pain the arse if I had to toggle over to Photoshop every time I wanted underlined text in Illustrator. Fortunately for me, Phil also discovered the Character Style palette in Illustrator CS. Once a character style is created for underlined text, the style can be saved to a file in the Presets folder, then imported into other files and reused on any text I desire to be underlined.

Depending on how many text attributes are set before creating the character style, the style will copy other existing attributes in addition to the underline. For instance, I had already changed my text to Verdana, 11pt, and changed it to blue. So when I selected the text and added a new Character Style, those attributes also got sucked into the style, as seen in the Character Style Options dialogue below.

Click for a larger version.

Having those extra attributes in the style may, or may not, be desirable. For instance, if I knew that I was only going to be using the style for links in web comps, and that all my links would always be Verdana, 11pt, and blue, that character style would be fine, I’d save it out, and call it a day. But if a more generic style is desired, those extra attributes need to be removed from the character style. This way, the character style can be applied to any text, no matter its color, font, size, leading, kerning, etc.

Most of the settings in the Character Style Options dialogue allow their values to be deleted, or the pulldown can be set to (Ignore). However, if any of the checkboxes from any dialogue panels are already checked or unchecked, those attributes will either be set to “Yes” or “No” values. A “Null” value is desired, often represented by a dashed checkbox. The simplest way to nix all the attributes for the style is to hit the “Reset Panel” button for every panel of the Character Style Options dialogue. Since Illustrator provides no control over the underline attribute, the underline will remain a hidden part of the style. The goal for a generic underline character style is to get the General panel to not show any style attributes whatsoever, as shown below:

Again, click for a larger version.

Notice how each of the settings summaries (Basic Character Formats, Advanced Character Formats, Character Color, …) show no additional attributes. In the Character Style Options dialogue, rename the style to something appropriate, like “Underline”. Then save the file containing just the Underline character style in a convenient location. I chose to create a new folder within Illustrator’s “Presets” folder called “Styles”, and then saved the file in that folder. Whenever an underline is needed, use the Character palette to load the saved file containing the pre-configured style, select the text to be underlined, and apply the character style. Done.

One note about this technique needs to be mentioned. As the underline is completely hidden in the character style, Illustrator provides absolutely no control over the actual underline. Normally, not an issue. Except for color. If a text object (or block) exists entirely of underlined text, the underline will adopt the same color as the text. If the text is changed to blue, presumably the underline is intended to be blue too. However, if the underlined text appears with other non-underlined text in the same object, and those two pieces of text are different colors, the underline may adopt the color used for text elsewhere within the same object. So while the text may be blue, the underline may be black, (or whatever color the non-underlined text is) with no apparent way to change the underline color. Less than desirable.

To work around this limitation, I discovered that the underline color usually adopts the color of the first character within that text object. Let’s call this the “point of influence”. When this is the case, a space can be inserted before the first real character, so that the space becomes the point of influence. Set the space to be the same color that the underline (appearing later in that text object) should be. Then apply some small horizontal scale value to the space (1%), so that the space becomes unnoticeable in width to the human eye.

I said the point of influence is “usually” the first character’s color, because I’ve found this to not always be true for longer text blocks. Sometimes I’ve narrowed it down to the 5th character, sometimes the 8th character, but it always seems to be a character from the first line of text. In that case, a space needs to be inserted at the point of influence, and treated the same as above.

By explanation, this isn’t the most graceful solution. But once the character style is set up, underlining text in Illustrator involves little more than clicking a style name. Many thanks to Phil for discovering the solution and pointing me to it.

For the L.A. Times, Jon Burlingame devotes Movie credits find new currency in retro images exclusively to the inspiration and background of Catch Me’s title sequence. The inspiration apparently came from the opening cartoon for The Pink Panther and Saul Bass’ sequence for North by Northwest. Heh, figures the late Mr. Bass is somewhere in the root of this one. John Williams’ composition for the background theme song pushed the animators even further. Once Williams delivered the music:

Spielberg pressed for a greater degree of integration between the letters in the titles and the images, “so that the sweep of a J becomes the offramp of a freeway, and a character will jump on a rope and slide down from one card into another and it’ll become the L of someone’s name…”

A great explanation of the slick transitions which grace the entire sequence. The article contains three screenshots from the real animation sequence. (Click on the thumbnails for larger images.) They do better justice to its cleverness than the screenshot from the official Flash site which I included in my original post. Thanks to Cameron Cavers for the tip on the French artists, which eventually led me to the Times’ article.

Update: Nexus Productions has the full title sequence up on their site, along with lots of other wonderful animation work, including many more pieces by Kuntzel + Deygas. Be warned though. Looking through the site can fill hours of your time. [Site requires Flash 6]

After wrapping up time with family earlier today, Mom and I returned home, then decided to head out to see Catch Me If You Can. I don’t care for DiCaprio, but rather enjoy Mr. Hanks. So I was up for the based-on-a-true-story con man flick, even though most of the Abagnale story seems to be fiction.

The movie itself was fair. Somewhat entertaining, yet quite long at 2.5 hours. But what really grabbed my attention was the title sequence and opening credits. The opener for Catch Me blended beautiful typography and a simple stamped-style animation. The official Dreamworks movie site [Flash 6 player required, skip the annoying and unrelated marketing intro] doesn’t do much justice to the title sequence seen on screen. The only example I can think of that even remotely hints at this typographic style is the Dunhill logo.

It’s rare that a title sequence is so striking or well-done that it can be enjoyed as art, independent from the movie to which it belongs. I even overheard those sitting behind us remark how nice the credits were once they finished. Other memorable opening credits that come to mind were from Spiderman, Casino, and Cape Fear (the latter two from the mastery of Saul Bass). If you don’t intend to see this one, show up early for your next movie, and duck into a theater that’s playing Catch Me just to catch those opening credits.

As designers, we’re not usually comfortable leaving our type specs up to the naked browser/system defaults, which often render in Times New Roman (or “Times” on a Mac) at some size equivalent of 16-points. It used to be the ever-redundant <font> tag of bloated html markup sans-CSS. Now we control type in a more reusable object-oriented fashion by using font properties in our CSS declarations. We have nearly infinite control over margins, padding, positioning, foreground color, and background color.

So we’ve gotten smarter with the means in which we specify the look of our type. But as the use of CSS begins to permeate the Web, I wonder if this level of control we gain as designers and developers will benefit or harm the users who read our content on a regular basis. Bad choices in text presentation via CSS can cause more problems than the no-longer-missed <font> tag. More powerful tools in our toolbox may pose just as much danger as they offer benefit.