Form Follows Function: A Roman Exercise

Let’s pretend for a moment that you are a designer who has been assigned the job of designing a font that, when engraved in stone, has to:

Put your thinking cap on and come up with a solution. Done? Now let’s lake a look at what the Romans did: By using a flat brush to draw the Roman Capital, they created thick and thin stroke weights. When these lines—used as guidelines—were engraved using a V-shaped chisel, they created enough depth that, when lit, they created the perception of depth (because of the shadows), and when the stone’s surface was repainted, the letters remained readable so they didn’t need to be re-engraved. This was a perfect solution that satisfied both function and form.

Exercise: A Typographic Narrative

Objective: Animate one quote from a song, poem, or movie excerpt in a way that enhances its meaning.

Process: Pick a meaningful quote (don’t forget to include the quote’s author!), and focus on color(s), typeface, and camera movement to visually represent each quote in the animation.

Think of each word as individual characters. Are there any lead actors? Who are the supporting actors? How do they relate to each other? Do they interact with each other or do they stand alone?

Consider these elements in your composition: depth, scale, repetition, characters’ relationships, readability, and screen time. Arrange your composition so that you direct the viewer’s attention to a particular word when you plan it to be read, especially when multiple words appear on your screen at the same time.

Allowed assets:

Technical requirements/specs:

Restrictions:

Which “Type” Are You?

On the Web Take a look at the following Web sites to see what’s out there.

Useful type Web sites:

Type ID forum:

Useful type foundries’ Web sites:

Table 3.2 Legibility Index Chart

Table 3.3

Are Your Titles Safe?

To guarantee your titles’ legibility—especially when you’re working in broadcast title design—they should be placed within a title safe boundary box. With the exception of plasma and LCD screens, most television sets scale up the video signal received and cut off some of its content by the edge of the screen. Because this cropping, also called overscan, is not consistent among the various TV brands and models, titles should be placed within a title safe boundary box, and relevant live-action or animation content should be placed within an Action Safe boundary box. A title safe box is typically 80% of its frame size. An Action Safe grid is typically 90% of its frame size.

Figure 3.13

Most software programs provide options to display a Title Safe boundary box. In After Effects, you can display the Action and Title Safe boxes by clicking the Choose grid and guide option (Figure 3.14) icon on the bottom left of your Composition window. In Photoshop and Illustrator you can view the Action and Title Safe grids or overlay when you create a new file from one of the Video & Film presets.

Figure 3.14

Table 3.4 Screen aspect ratio of common mobile devices

For Immediate Release:

For millennia, the alphabet has been the building block of human communication and cultural understanding. The Greeks, the Romans, the Turks, the Celts—all were pioneers of our own modern-day writing, passing the linguistic torch down from their civilization to our own. You could say that the alphabet—and phonemes—are so pervasive in our everyday lives that we barely give them a second thought.

And that’s what They’re counting on.

In 1962, while conducting routine experiments at the Voice Research Laboratory (VRL), scientist discovered a curious mutation on the common phoeneme : a faint, positively charged frequency that modified the implied meaning of the resulting sound. In ensuing tests conducted on primate subjects, it was observed that the modified phoneme, when amplified through a common telephone headset device, evoked strong feelings of confusion and anxiety in the primates.

Further experiments were conducted on human subjects using additional phonemes—, , and being the most common. These subjects also displayed increased confusion and disorientation and soon became detached and generally lethargic—most notably when the phonemes were arranged into distinct words and sentences, as with .

There are opposing accounts of what happened next, but soon it was obvious that this subsonic Trojan horse wasn’t a daughter of nature; indeed, the scientists at VRL had stumbled on a massive linguistic conspiracy, the depths of which are only now being excavated. It was an outright hijacking of our language from the inside out. But to what end? And by whom?

This colorful, geometric televideo is an accurate account of the known facts, including several minutes of never-before-seen footage accompanied by helpful diagrams and charts. It proposes new theories and offers supporting historical and scientific context and is two minutes and forty-nine seconds long. It is most likely both entertaining and informative.

Please discuss this film on completion.

///

Figure 3.21a Still frames from “The Alphabet Conspiracy” by MK12.

Figure 3.21b

Figure 3.21c

Figure 3.21d

Figure 3.21e

Figure 3.21f

Figure 3.21g

The Alphabet Conspiracy is a hybrid live-action/animated piece about the language working as a double agent, carrying a hidden meaning with it for reasons yet unknown.

The short came about after finding an educational film from the 1960s, also titled The Alphabet Conspiracy (we like to think of ours as a sequel of sorts). In the original, a young girl named Alice boycotts her homework and falls asleep, traveling to an enchanted world where she conspires with a Mad Hatter type to eliminate books and words (thus no homework). They’re intercepted by a kind-hearted linguist who eventually convinces Alice that the alphabet really does matter. She then wakes up.

Figure 3.21h

Figure 3.21i

Figure 3.21j

Figure 3.21k

Figure 3.21l

Figure 3.21m

We’d already been scripting a type-based short that was eerily close to this one, and so we figured that instead of reinventing the wheel, we’d simply add our own spin to the original. We cut up the soundtrack and remixed it into a slightly darker version of itself, and that became the foundation for the piece. From there we developed an animatic and began working in the key elements (though with nonnarrative pieces, we always treat the animatic as a general guide, since the tangents we follow while animating and designing usually end up becoming the piece).

The short takes other cues from the film as well as other educational films from days past, inspired by the awkward editing and absurd premises that often defined the genre. The color palette is simple and deliberate, and we worked with a technique in which all the elements were split out into their respective red, green, and blue channels, which usually remain superimposed to form a complete image but sometimes move independently of one another to create interesting transitional and graphic effects.

Figure 3.21n

Figure 3.21o

Figure 3.21p

Figure 3.21q

Figure 3.21r

Figure 3.21s

We like to design custom typefaces for our film projects, and since this piece is about the alphabet from a scientific perspective, we spent a good deal of time developing a typeface that was theoretically perfect and balanced. We were less concerned with making an aesthetically pleasing font because we were ensuring that every measurement was a reciprocal of another. We also developed a pretty rigid set of rules for how the type was to be laid out and presented on-screen, making sure that exponents and weights were always considered. It’s not something that’s necessarily meant to be picked up on; it was more a starting point for our compositions, and it felt appropriate to the subject matter.

Figure 3.22

Interview: Stacy Nimmo on Title Design

One of the wonderful things about broadcast design and kinetic typography is that there are so many different things that you can put into any piece you do. You have music, cinematography, 2D or 3D graphics, and typography, which stand on their own as a communication tool. Finding the right mixture of what to use for the message that you’re sending is the real challenge. You have to find out what your client needs, what they need to communicate, and how it needs to be. Generally, on the emotional side you tend to have things that are much more ephemeral, and then on the very clear and concise side, you have “50% off” and giant “For Sale” signs. So, between those two extremes you need to find out what your client needs to communicate and what the consumer wants to hear.

Can you talk a little about yourself and your background in graphic design?

I studied design at the University of Florida in a very, very traditional sort of program, at a time just before computers became more popular. So, not to sound like a Luddite, but I think that there were some really positive things that can be learned in design before you get on a computer. And I think at some point, especially in the foundation time, it’s actually helpful to stay away from a computer so that you deal with very basic compositions. You know, if you have After Effects or if you have Photoshop, you’re immediately capable of layering 100 layers on there, and that’s just not the case when you got a copy machine and you’re blowing up some typography; you’re physically limited to the number of things that you can do there. I think that that’s really good because it helps you focus on saying the most with the fewest number of parts. And I think that is the essence of typography: say the most with the fewest number of parts.

I still urge schools and students coming into broadcast design for the first time to not do everything with the computer, to try to do things offline and in your head and in the sketchbook as much as possible. And one of the key pieces of that is learning to understand and work with typography, getting to know the cropping, and the scale, and the kerning, and the subtle sort of things that are really helpful to have. To look at it offline, as in printmaking and using stenciling, for example, where you have a physically engaging process and you have a feel for the physical weight and positioning of the letters.

It’s almost the difference between reading a book on a computer and reading an actual book. It has a different feel and weight to it, and I think you become much more familiar with typography when it’s reflective versus when it’s on a computer screen.

Figure 3.23a Client: Symantec; Project Title: Higher Level; Duration: 00:30.

Figure 3.23b

Figure 3.23c

Figure 3.23d

Figure 3.23e

Figure 3.23f

Figure 3.23g

Figure 3.23h

Figure 3.23i

Figure 3.23j

Figure 3.23k

Figure 3.23l

Figure 3.23m

Figure 3.23n

From studying graphic design, how did you end up specializing in motion graphics?

I went from studying design, which was primarily print design in college, to working on movie posters for Miramax in New York City in the early 1990s, when they were starting. When you look at a movie poster you have the actors, and you have them composited usually in some vague world, and then you have the title.

And the title really speaks volumes about what it is that you’re going to see; it especially has the capability of doing that, of setting the tone of the movie outside the particular image of the people. It’s about the people and about the title design. In fact, the title is so relevant to these posters that it’s actually written in contracts that certain people’s names have to be a certain relative size compared to the title: “If a title is X size, my name has to be 20% of X size.” And that’s how movie posters end up with very skinny, very tall typography, because it is a legal requirement that people’s names be the same size as the title.

I went back to film school to study traditional film production, and there’s still a lot of things that I draw on from that experience that have nothing to do with being on a live-action set but have everything to do with the way a camera moves through a 3D scene or the way drama or motion is carried through camera movement. I think that that is a very important step in the progress in anybody’s broadcast design growth.

When and how did you start Gunshop?

We started Gunshop in 2000. We’re now 10 years old, which is pretty exciting, and pretty old in this business, too, but we have a lot of benefits of having that experience. The main reason we started Gunshop was because in the late ’90s the main places that were doing sophisticated broadcast design had some very, very expensive equipment. We had started doing more and more work on the desktop with After Effects and realized that we didn’t need all these expensive tape decks, we didn’t need the Inferno, and just really began to produce jobs soup-to-nuts on the desktop. We opened up our shop as a sort of desktop solution for broadcast design. It was one of the first in the city, and it was very popular, and we ended up doing a lot of work with HBO and all their family of channels, like Cinemax, as well as Viacom and their family, like MTV and VH1.

How do your life experience, interests, and passions influence your work? And what are your interests and passions?

If someone asks me, I generally don’t refer to myself as a commercial artist, though at essence that’s what I am. I’m an artist who is working in a commercial atmosphere, in a commercial manner, basically creating commissioned works of art for the client.

So, for me, there’s a lot of creativity that goes into all these pieces. It’s very fulfilling to create, as I call them, tiny worlds. We create these tiny, very special, very specific, very branded worlds for our clients so that they can communicate whatever they need to about their product. And I think that as an artist it’s very fulfilling, I think it’s very challenging as well as it is very commercial, and you have a client that’s paying for it, so there’s a lot of negotiation, sacrifice, and changes that are involved in the process. And if you have the right team together both internally in your design company as well as with your advertising or theatrical partners, you can have some great stuff coming out of it. I think that you basically expand your team to work with the team of the client. And that’s when projects really take on a life of their own that no individual is capable of doing.

Do you have any guidelines or preferences in regard to font size and readability, whether for theatrical release, broadcast, or smaller screens?

You know, its kind of funny, but in general we have a really crappy TV here in the office, and after we do some type design we want to make sure it looks good on that crappy TV. I mean, you could do stuff in HD that will look fantastic on an HD monitor, but you also have a lot of people who have different, older, and smaller TVs, and you always want to make sure it works on the lowest common denominator, especially when half the stuff we’re doing is still in SD.

So as far as specific specs of how many point sizes, we don’t have anything that is that specific because sometimes you have a headline that’s a certain size and it’s only one word, but if it’s three words then it’s going to change that rule all together. So, it’s a little bit more about what works than our rules.

Figure 3.24a Client: Arts and Entertainment Networks; Project Title: Jacked Auto Theft Task Force; Duration: 00:16.

Figure 3.24b

Figure 3.24c

Figure 3.24d

Figure 3.24e

Figure 3.24f

Figure 3.24g

Figure 3.24h

How about screen time?

It kind of follows the same rules as our typographic size rule, which is, you want to make sure it feels right and looks right. Just like with type size, we use a bad monitor, with type timing and also sometimes with scale we’ll do a lot of those things in the edit room, which I think is a very important place to say, “Is this on long enough?” So, we may work on the files in 3D or After Effects, but at some point, or often throughout the process, we’ll bring it into the edit room and we’ll do small adjustments to scale or timing there, because you can get into a level of finesse there that is really where you want to be. You can adjust it so it’s just a little bit faster and the other piece is just a little bit slower and it’s just a little bit bigger. And you play it down and you make these micro adjustments very quickly, and I think that’s where the real magic and poetry really is, when you can make those small finesse changes very quickly. Then we take that information back into 3D or After Effects and implement that information so it’s of better quality. It’s almost like directing a piece of music. You want to have everything just in the right place, and the only way you can get to that level of finesse is if you have real-time interaction with it.

Do you design while keeping in mind the title safe boundaries?

We still adhere to title safe. I mean, granted, the monitors now don’t have such strict or massive amount of title space required, but I think it’s much easier to sort of read the typography if it doesn’t veer toward the edge of the piece. As long as you didn’t put the type up there, you don’t want to hide it. So it’s helpful to keep it in the general area. So, I think we do follow title safe. Since we do work in a tremendous range of media, we never know where it’s going to end up, so if we do a piece that’s originally going to be shown on a digital monitor at a conference and is also going to be broadcast in SD later, we want to make sure that we don’t create too much work for ourselves by doing something that’s specific to one of those mediums. We try to be a little bit more open ended so our client can use it in as many different mediums as possible. When it gets to Web and online in 320 by 240, that becomes very challenging because generally typography, even in SD typography, doesn’t work online and generally it has to be redone for small-size Web applications. But more and more clients are going to larger-size Web applications, so it’s not so much of an issue.

Can you address any of the motivations behind camera movement or even transition between one shot and another, whether it’s hard cuts or dissolves or just general relevance of the use of camera in the work that you do?

When we build tiny worlds for our clients that are very specific, we may have some that are very bare-bones, very clean, very simple, very elegant solutions, and they generally are very hard cuts. And then we have things that are meant to have a feeling of futuristic excitement, and they tend to be much more complicated, so it really depends on what is more appropriate for the project that we’re working on.

I think that camera moves in general are pretty distracting unless they’re tied into some motivating action. Or your palette is so simplified that there’s really not that much else. If you look at some really great title design that’s out there, there’s just a slight amount of atmosphere and the typography and the camera, and that’s all that really exists in the animation of the main title sequences.

Can you elaborate on the relevance of editing in the work that you do? How can you tell a story through editing?

Editing for us has two real major uses. There’s one, which is the finessing. It’s really hard, even if you have your story and you know that those are the camera angles and those are the shots you want to use. The timing and certain subtle things like scale and color correction that you can address really quickly in Final Cut are essential. I’ve seen artists work on shots for hours that end up being cut in duration in half because when you get the final piece together it really doesn’t need or justify the length of the shot. We create very tight animatics and very specific sort of durations in these things, and we trim it by a frame here or a frame there, but I think you really want to have that ability to go in and interactively work with your piece, which is just not easy to do in After Effects. There are so many layers in there, it makes it so hard to do those finessing adjustments, so people just don’t.

So, its almost like you got to get the shot out, you got to get it rendered, you got to get it into Final Cut and you got to finesse it, otherwise it’s going to come out clunky.

If you cut a few frames out of someone’s reaction, it could go from happy to sad, depending on where you end the cut. In more postproduction-oriented places, it seems like it’s more about timing and making the piece feel like a great music composition and flow from scene to scene. I don’t think there’s that much opportunity to change how the story is told in the edit suite; it’s more a matter of finessing it. Because everyone knows that the scene needs to look like this and it’s unlikely that you’ll discover it in the edit suite, well, you could drop entire shots, but it’s unlikely that you’ll create an entire shot to fill a gap in the edit suite.

Figure 3.25a Client: Symantec; Project Title: Vision 08; Duration: 00:30.

Figure 3.25b

Figure 3.25c

Figure 3.25d

Figure 3.25e

Figure 3.25f

Figure 3.25g

Figure 3.25h

Figure 3.25i

Do you generally work when you have a score or soundtrack and sound effects already in place? If so, how does it affect your work?

In general, unfortunately, the soundtracks are not done until later on in the project, and we usually work with temp tracks. As soon as we find a piece, we’ll start working on the style frames and immediately start working on what we feel is a good piece of music to cut with and to lend personality to the piece. A lot of times the animation will become overly complex just because there’s no music associated with it. That’s the natural tendency; people think, “Hey, it needs to keep doing stuff,” if you don’t put a soundtrack next to it. If you put a soundtrack next to it, you realize the design or the style of the frame carries on its own with that music. It’s kind of like saying, “Hey, I’m going to paint this painting without red and put the red in later.” It’s sort of impossible to do because it’s such a critical element.

From the beginning we work with those tracks, and it’s amazing how often those tracks, once you swap them out with the actual track, the cuts and the beats and the timing still work, because basically a lot of the cuts and motion tend to be more open, more languid, when working with the soundtrack. And as long as it’s on 4/4 time, most of the stuff just cuts right to a variety of different tracks if you’re close to the same beats.

I highly recommend working with a temp track as soon as possible and then swapping it when you get the final tracks. Voiceovers are a different story. When we get the script and we have a piece that’s being written to or being created around a voiceover, we’ll generally do a scratch voiceover track here and time it out to that, then get the real voiceover and do some finessing there. I guess it’s not that different, you’re still working with a scratch track, but you never want to have nothing under there. You certainly never want to present anything to your client with nothing or no soundtrack, because they’ll pull it apart.

Can you talk about the use of color and lighting in your work? How is that useful in regard to the emotion you want to convey for a particular client or a particular work?

I think having a controlled color palette is always very helpful, and usually the controlled color palette leads back toward a very specific look of the brand. Let’s say you’re working with a company whose logo is red or the main title of the movie is red. Chances are you’re going to work within a palette of reds and some other colors just so it doesn’t get too flat.

I think that controlling the color palette is a challenge for a lot of people. Getting the color palette that is relatively controlled and very brand specific is a great asset toward the piece and making sure that it fits within the larger format of the client’s needs. It doesn’t speak to movie titles, but it does speak to, “Hey, if I’m going to do this piece for this person and I’m doing it in CG and everything else they did was in Flash or something like that, and I’m doing it in 3D, I can make it match the rest of the body of work and their brand image, just by keeping within the color palette.”

Tools like Adobe’s Kuler are great for establishing nice harmonies of colors within a narrow palette, but for some odd reason a lot of people don’t use it. I think it’s a great tool. Another thing that you can do is pull a photograph that may be dominant in reds or something like that, and then pull the colors from the photograph, because one of the things that make a color palette so pleasant is its reflection of nature. I think that if you’re on a computer just picking colors randomly you would never find those in a real environment. Whereas if you pull your colors from a photograph, they all seem to work together, because they all came from the same color temperature, lighting, they’re all about as saturated, and stuff like that.

Can you talk about the creative process?

Going back to my background in studying design, the first step that I would make in coming up with a new design is sketching—you know, coming up with the basic idea. Sometimes before I’m sketching the composition of a frame, I’m just writing a bunch of words, saying, “Hey, what if we did this, what if we did this, what if we did this?” You can throw out a tremendous number of ideas, you’re not on the computer, you just write lines and lines of different ideas, and then you start doodling little compositions and little stories.

A lot of people, when they start just jumping forward and diving into Photoshop or After Effects, basically they’ll start down a path and they’ll continue down that path. They’ll continue to try and make it work even though maybe the idea wasn’t so good. Instead, by sketching out all these ideas, you can immediately weed off all these bad ideas and then begin pursuing something that’s fairly well defined. You don’t want to be defining something in Photoshop; if you have a bad idea there, you can try to make it better, but it’s an uphill battle. In coming up with a good idea, coming up with the basic framework of what that idea is going to look like, it’s great to work offline and then begin to go into Photoshop.

Even then, once you work in Photoshop and start beginning to add the color and add the nuance and add the detail, I also find it good to go ahead and do a whole bunch of frames and sometimes even start in Illustrator to just figure out the composition with 40 specific frames of how an idea can be arranged, with black and white and really rudimentary shapes representing people or type. Once that’s done, move on a little more into Photoshop; once you’re in Photoshop it’s really about the details. You know exactly what you’re going to do and you just need to go in and get the details.

If you start in Photoshop and look for all those different things, you’ll never get there, because once you’re in Photoshop you expect the frame to have a finish and a polish, and there’s no way you’re going to come up with 30 ideas or 300 ideas the way you would in a sketch. You’re going to come up with two ideas, at most. I’m always encouraging people to spit out as many ideas as quickly as possible and stay out of Photoshop until they really feel strongly about a couple of them, and then work on finessing them there.

What are the most challenging aspects of your work?

The most challenging aspect is integrating client feedback. It’s challenging sometimes because you feel it contradicts your idea, and the real challenge is finding ways to incorporate it while improving your idea.

How about your favorite parts?

The favorite part is the unbridled creativity that happens at the very beginning when you’re sketching through all these ideas and possibilities, and beginning to shape this world out of nothing. That’s just an awesome, great, idealistic part of the creative process.

Figure 3.26a Client: MTV; Project Title: The Word; Duration: 00:15.

Figure 3.26b

Figure 3.26c

Figure 3.26d

Figure 3.26e

Figure 3.26f

Figure 3.26g

Figure 3.26h

Figure 3.26i

How does technology affect your work?

It’s funny, as computers get faster, the software seems to get slower at exactly the same rate. Technology allows us to do better and better things, but it’s certainly not getting us out of this office any earlier. There are some amazing tools that you can work with right now, but everyone, lots of teams, are working with them at the same time. Motion tracking is now pretty accessible, so getting motion tracking into your project is almost expected if you’ve got live action. On one hand it’s adding possibilities, on the other hand it’s adding complexities.

What are your favorite graphic designers, type designers, or motion designers?

I’m a huge fan of someone named Tibor Kalman, who has a great book that I recommend to everybody. It’s a little bit about the advertising world and commercial design and keeping your sense of humor.

Who or what inspires you? What is your biggest influence in general?

There are a lot of fantastic Web sites and portals and books and so many great things that influence me in terms of design, but I think that in terms of a specific project it’s going to be the client that has a great deal of inspiration in terms of helping us understand their needs. You have lots of stuff out there, but is it relevant to the project you’re doing?

What are you working on right now?

Right now we’re working on a project for Sprint. And to me it’s a really great combination of all the things that are in design. We have live action, there’s CG and title design and editing, and all the stuff that makes a project fun.

What we’re moving toward is really in the live-action vein and mixing it in with the motion graphics, because I think that creates sort of a bridge. If you look at half the humorous commercials out there, half the products could be swapped. But if you take a story that’s humorous or a bunch of live action and create a world that’s very, very, very unique, you could tell that same story, or you could tell a better story that’s just so specific it’s just nontransferrable. For the consumer who’s trying to figure out, “Oh, I saw a funny bank commercial, I like the personality of the bank but I can’t remember what the product is,” if you dial in the design and the look of that world more closely than your average live-action 30-second spot and include something that’s very chromatically specific, and very design specific, and very typographically specific, the consumer will tie in that stuff to whatever brand you’re working with.