4

LIGHTS, COLOR, AND CLARITY: PREPARING YOUR TITLES

Color and lighting are essential components to your titles. Choosing the correct color scheme and lighting setup will help you obtain the level of style you want, create the mood you seek, and provoke the desired emotional response from your title sequence. In this chapter we explore the fundamentals of color theory and lighting and begin to explore some text styles you might want to use to increase the clarity of your titles.

Understanding Color

Human beings recognize a visible spectrum of seven colors: red, orange, yellow, green, cyan, blue, and violet.

The visible spectrum is the portion of the optical electromagnetic spectrum that is visible to the human eye. The other portions, which are invisible to the eye, include radio waves, microwaves, terahertz waves, infrared, ultraviolet, X-rays, and gamma rays. Each of these waves carries unique ranges of wavelength, frequency, and energy. The wavelength of the light is measured in nanometers (nm) and affects the color perceived by the eye.

On one side of the spectrum is violet, with a lower wavelength value that presents a higher frequency; the wave cycles fast with a short distance between the wave’s peaks. On the opposite side is red, with a higher wavelength value and lower frequency.

We perceive color when light hits objects that surround our environment, and these objects absorb or subtract the unwanted wavelengths of the visible spectrum and bounce back only the ones that pertain to the surface of the object itself. For example, a red apple will reflect only the red wavelengths. The eye perceives these wavelengths and sends the message to the brain.

Other species recognize wavelengths outside the visible spectrum that humans see. For example, bees and insects can detect ultraviolet patterns on flowers, which help them find nectar.

Figure 4.1

It is important to understand which color you should be using in your titles and credits because we experience a psychological and emotional response to colors. When utilized appropriately, colors can evoke moods and emotions that enhance the meaning of the images, whether they are on a movie screen, a TV, or a computer monitor.

For centuries, artists have used the psychology of color to convey an emotional response and mood they wanted to evoke. Think of the use of color in the works of Van Gogh, Chagall, and Degas and the use of color and light in Caravaggio, Rembrandt, and Whistler’s works.

Whether you use a color palette because of a personal like or dislike for other colors or with a particular color motivation in mind, you want to make sure that the color choices you make do not conflict with the message you are trying to convey. Or, if the medium and the message conflict, it should be an intentional choice. Understanding a bit of color history, the basics of color theory, and color symbolism will help you find a logical and dependable way to utilize color in your title sequences.

A Bit of History

Aristotle (384 B.C.–322 B.C.)

In De Coloribus (translation: On Color), possibly attributable to Aristotle’s disciples, Aristotle theorizes that colors are derived from following natural phenomena: sunlight, firelight, air, and water. These four elements, mixed with darkness (black) and light (white), create color. Additionally, in the text On Sense and Sensibilia, written around 350 B.C., Aristotle identifies a linear sequence of color he deducted from observing the changes in the light during the course of a day, from white to yellow, orange, and red. After sunset, the light becomes purple, sometimes green, then dark blue and black. From his observations, he theorized a linear color system. This color theory was accepted for about 17 centuries.

Leon Battista Alberti (1404–1472)

In De Pictura (On Painting, 1436), a treatise intended to define the rules of visual arts, Alberti states, “Through the mixing of colors infinite other colors are born, but there are only four true colors—as there are four elements—from which more and more other kinds of colors may be thus created. Red is the color of fire, blue of the air, green of the water, and of the earth gray and ash … Therefore there are four genera of colors, and these make their species according to the addition of dark and light, black or white.” Alberti builds on Aristotle’s color theory with the exception of white and black, which are demoted to noncolors.

Leonardo da Vinci (1452–1529)

As a true Renaissance man, da Vinci investigated the topic of color. In his Trattato della Pittura (Treatise on Painting), published posthumously in 1651, he identifies six primary colors: white, yellow, green, blue, red and black. Each color had a direct physical manifestation of the natural world: white for light, yellow for earth, green for water, red for fire, blue for air, and black for night. He also wrote about what would later be referred to as simultaneous contrast: “Of different colors equally perfect, that will appear most excellent which is seen near its direct contrary blue near yellow, green near red: because each color is more distinctly seen when opposed to its contrary than to any other similar to it.”

Isaac Newton (1642–1726)

Newton was the first person to analyze color and view it as a result of light hitting objects and reflecting colors that are perceived by our eyes. In 1666, he conducted the famous prism experiment in which he demonstrated how light is responsible for color. A prism, when placed next to a window and hit by the sunlight, casts a seven-color spectrum: red, orange, yellow, green, blue, indigo, and violet. In 1704, Newton published Opticks, a “treatise of the reflections, refractions, inflexions, and colours of light.” Newton rearranged the linear color system into a circular one in which the circular color diagram shows the relationship between primary colors and secondary colors. White is in the center of the diagram, to signify that the sum of all colors results in white light.

Johann Wolfgang von Goethe (1749–1832)

Geothe, in addition to being an outstanding poet and novelist, wrote Zur Farbenlehre (Theory of Colors) in 1810. He disagrees with Newton and theorizes that the way we see color is affected not only by the light and the object but also by our perception. Color has “sensual qualities within the content of consciousness,” he says. Goethe clearly moved beyond Newton’s study of color as physical matter and entered the realm of psychology. He developed a symmetric six-color wheel in which he arranged the colors on a circle to support his color theory. He divided colors into two main categories. The plus-side colors (yellow, orange, red) provoke warm, exciting, lively, and comfortable feelings, whereas the minus-side colors (green, blue, violet) provoke unsettling, weak, and cold feelings. Goethe also furthered the study of complementary contrasts.

Michel Chevreul (1786–1889)

Chevreul furthered the knowledge of color theory by advancing the concepts of simultaneous contrast, the optical illusion that appears to darken or lighten the hues of two bold colors placed in close proximity of each other, and optical mixing, the blending of two colors to create a third one.

Symbolism and the Psychology of Color

Color influences our mood and even the way we taste food. Color is deeply rooted in cultural, political, and sociological connotations. These associations are constantly changing throughout cultures, years, and generations.

One common emotional response, originally theorized by Goethe, is provoked by cool or warm colors. Cool colors are the ones close to the green/purple spectrum and evoke distance and coldness. Warm colors, on the other hand, are the ones close to the yellow/red spectrum and evoke urgency, action, and closeness.

Cool colors tend to recede in the background of a screen or Web page, whereas warm colors tend to pop to the front.

When deciding the color palette for your title sequence, cultural connotations are another factor. Certain colors can acquire a particular significance, depending on the cultural background and codex. Red, for example, is often interpreted as danger, as exemplified by stop signs.

The following are some of the scientific, symbolic, and emotional connotations to keep in mind while you work with color:

Take a glance at the following table to see some of the most common emotional, political, and cultural connotations generally associated with colors. Keep in mind that these associations are only a starting point; before you embark on a project you should do research to ensure that you have the most up-to-date information on what colors represent to changing attitudes, generations, and cultures.

For example, even though white has traditionally been associated with mourning in China, brides have started to wear white gowns in addition to traditional red dresses, mimicking Western brides. Or consider the use of violet in Thai Airways’ branding. Even though the color violet is culturally associated with mourning in Thailand, the airline’s decision to use violet in its branding is most likely dictated by the fact that the target audience for Thai Airways is foreigners who often associate the color purple with luxury.

Color Systems

Now that you’ve learned about color’s history and cultural and psychological connotations, let’s dig into the nuts and bolts of color theory.

A number of color systems are used today; most can be found in common computer applications. The most common color systems are:

Each color value in a system can generally be translated into another color system, although that might create some differences in the richness of colors. For example, when converting CMYK colors directly to RGB, the colors might look a bit washed out.

Figure 4.5

When working with computer software, a new document can be created utilizing a specific color mode (e.g., RGB), but you can create design or typographical elements that contain colors picked from a different color system and apply them to the color system in use. This particular case applies when, for example, you are given a style guide, which includes instructions on how to appropriately use the logo, typeface, and color palette of a specific project. If a print designer created the style guide to follow their work done on the logo of a movie or the movie poster, the color palette will most likely display color values in the form of CMYK and/or Pantone colors.

The task of a title designer is to find the corresponding colors in the RGB system. An easy solution is to identify the CMYK or Pantone color in the color picker of your software, using the color system indicated in the style guide provided, and then convert it to RGB. Some color palettes, such as the ones in Adobe Photoshop, simultaneously display the corresponding values in HSB, RGB, LAB, and CMYK, so you could simply enter your value in CMYK and you’ll automatically have the corresponding RGB value.

Figure 4.6 Photoshop’s Color Picker.

Adobe Illustrator has a similar color picker palette that simultaneously displays the HSB, RGB, and CMYK color values. If you are creating a new swatch color or working in the Edit Color palette, you simply click the pull-down menu to select the CMYK color, enter the known values, and then switch the pull-down back to RGB to know its corresponding values and to use the color in your project.

Figure 4.7 Illustrator’s Color Palette.

Figure 4.8 Illustrator’s New Swatch window.

Figure 4.9 Illustrator’s Color Picker.

In both Illustrator and Photoshop, you can add a variety of palettes called swatch libraries (in Illustrator) or swatches (in Photoshop). You can find anything from default swatches (which include CMYK and RGB) all the way to a variety of Pantone palettes.

When deciding which color system to use on your project, it depends on what you are working on. When you are working on film titles, the answer is simple: RGB. It is the color system used when working with video. When working on a movie poster (or any material that will be printed), you should use CMYK.

Color motion picture film uses a color system that was originally introduced by Kodak in 1934. It employs a single-strip multilayer emulsion (as opposed to multiple strips of film, which included a variety of in-camera recording techniques devised to achieve color in film). In this system, three thin layers of emulsion are applied to the film’s base, and each one of them is sensitive to specific colors of light. A typical color filmstrip contains a blue, a green, and a red emulsion layer. You could say that film records its information in the RGB color system, but when the film gets processed at a film lab—through chemical processes in which the oxidized developer is formed and silver halide crystals are removed from the film strip—dye couplers will produce a colored dye. The topmost blue layer creates a yellow dye, the middle green layer creates a magenta dye, and the bottom red layer releases a cyan dye. The sum of CMY creates the full color picture.

Figure 4.10 Adding a new Swatch Library in Illustrator.

Primary, Secondary, and Tertiary; Hue, Brightness, and Saturation

The basic color wheel is composed of colors grouped into three main categories:

Color has three basic properties:

Color Harmonies

As in music, where you can experience consonant and dissonant chords, colors can intensify or create tension with each other, depending on the characteristics we’ve explored so far.

Figure 4.11

Color harmonies are groups of harmonious colors that you will want to keep consistent when you are designing your title sequences and collateral designs such as posters, postcards, and other materials.

Simple color harmonies might be based on one color, and more complex ones can be based on mathematical rules. The following describe a number of techniques available to create color harmonies, also called schemes:

Color Deficiency

As designers we must understand that our work will be experienced by a variety of people with a variety of characteristics. Generally the creative brief will take into account some of them; the target audience and how the work will be viewed might affect the type size that you will use.

When dealing with color, though, keep in mind that a considerable number of people have various levels of color deficiency (also sometimes referred to as color blindness or Daltonism, because of John Dalton’s studies). This section should be taken as information that may or may not influence the design direction and color choices of your work.

Color deficiency prevents people from distinguishing certain shades of color or perceiving certain colors at all. There are several levels of color deficiency, from subtle anomalies to full deficiency, in which a person can only see in black and white or shades of gray. Most people affected by this color deficiency have difficulty discriminating reds and greens (approximately 8–10% of the male population) or blues and yellows (approximately 1–2% of the male population).

If your target audience includes any color-deficient users or if you want to play it safe, you should:

Color Contrasts: Color and Type Combinations That Work

It is common knowledge that black type on a light background is very readable. In filmmaking, we often see the opposite: white type on a black background, especially dealing with end title credits. In this section we’ll explore how the readability of text changes depending on the background color.

First, let’s identify two main elements: foreground (text) and background elements. We talked about type in the previous chapter. Now we’ll explore possible backgrounds.

The background elements can consist of:

Think of color combinations that you experience every day: street and highway signs. These signs need to be readable by a variety of people who are moving at different speeds. The most common street or highway sign color combinations are black on white, white on blue, white on green, white on red, and yellow on black.

In the case of title sequences, the reader will most likely be still while the type is animating on-screen. The following are some considerations to keep in mind when you’re making your color choices for your foreground and background:

Figure 4.23 When using complementary color as text and background, adding a stroke increases readability.

Understanding Light

Through lighting you can manipulate images and typographical elements so that you better produce the desired emotions in the audience.

Understanding lighting and its correct use is important for directors of photography, color timers, and lighting directors.

You need to understand lighting when you’re working on a title sequence so that you can:

You could start thinking about lighting as early as the moment you receive an idea or a directorial instruction, when you receive a frame or scene sample of the animation being produced, or when you receive the background plates that were shot on the green screen that the director wants you to use to introduce each character.

In any case, your job is to both collect information about lighting schemes utilized in the footage (when footage is provided) and research the lighting environment you will either have to create or in which your title sequence will have to be composited.

You should pay extreme attention to samples or plates you receive and determine what kind of lighting has been used, depending on whether you need to match it or not. If you are working with live-action footage that’s already been shot, a useful tool is a sketch of the lighting setup that was used on the set so that you can try to mimic it with CG. The gaffer or the director of photography generally creates a sketch of the lighting setup. If you have been involved early in the process, you might want to ask the director if you can visit the set so you can sketch the lighting setup yourself, take a few pictures, or at least talk with the director of photography about it.

If that is not possible, you will need to determine what the setup was based on the quality of light in the footage, references received, or your best guess. Take a look at the shadows and see whether are they hard or soft. Where is the light source? Is it straight on, coming from the side, bottom, or top, and from what height?

On the other hand, if you need to create your own plates, you will need to perform accurate research and collect as much visual reference material as possible about the environment you want to recreate. You could start with a simple online search and further your research by visiting a library, bookstore, or newsstand and even doing a field trip to snap some reference pictures.

To better help you in this process, you need to understand how light works and the various sources of light.

Color Temperature

Light is energy transformed into the visible spectrum. Depending on their temperatures, different objects or lights (flames, fireworks, lava, auroras) have different ranges of colors.

Color temperature is the scale used to relate to the different hues given off by various temperatures of light. The temperature is measured on the Kelvin scale, abbreviated with a K after the numerical value. A high color temperature of 5,000K or more, such as direct sunlight, produces bluer hues. A lower temperature of 3,000K, such as a tungsten light bulb or candlelight, produces orange hues.

Figure 4.25

In film and video production there are two main color temperature light fixtures (or light fixtures with exchangeable light bulbs): tungsten and daylight.

The director of photography usually plans which lights to use in different situations, whether the scenes are outdoors or indoors. If a scene is being shot indoors but next to a real or fake window, the director of photography might decide to use all daylight lamps in order to match or recreate the color temperature of the light coming from outdoors. In the opposite situation, if a scene is being shot outdoors but next to a shop, telephone booth, or street lamp, the director of photography might decide to use tungsten lamps to match or recreate the color temperature of indoor lighting.

Sometimes light bulbs can be mixed and matched to create a more subtle variation in the color temperature. For example, the versatile four-banks Kino-Flo lamps (which present four light bulbs) can be swapped to include three daylight bulbs and one tungsten bulb. The result would be still be a dominant blue hue but with a hint of orange to warm it up a bit.

Something else to keep in mind is that when people refer to a light being cool, as in its hue, it is not to be confused with blue light being a cool temperature. A light that produces bluish hues is actually a higher temperature, around 5,600K, than a light that produces orange hues, which is around 3,200K.

Color-Balancing Film and Video Cameras

Our visual perception adapts to the different lighting color. We perceive a white T-shirt as white whether we are indoors and using warm artificial lighting or outdoors in sunlight. Our eyes and brain recalibrate what we read as white, based on our own experience and points of reference. On the other hand, film and video cameras need to be guided in recording with the correct color temperature setting. If they are not, they will read that T-shirt as orange under candlelight and blue under sunlight.

There are two situations in which you could alter the classic use of white balance with a video camera:

Qualities of Light: Size, Distance, Angle, and Color

One of the most immediate and dramatic differences in different light sources is the light’s hardness or softness. In coming to understand the qualities of a light, a good starting point is to figure out the light’s make and model and train your eye to distinguish the quality of the shadow the light fixture produces. Are the shadows dark with sharp edges? Then it’s a hard light. Are the shadows gray with soft edges? That’s a soft light.

Typical hard light sources are the sun, a clear glass light bulb, a candle, or light fixtures like spotlights. Hard lights are used in film and video production to create a strong statement. Because a hard light casts such sharp and defined shadows, most three-dimensional details, such as textures or engravings in an object or even skin imperfections, all become much more noticeable. When overused, hard lights could create an extreme, full-contrast look, almost as though the image is a duotone comic book with lots of dimensionality in the frame.

On the other hand, soft light sources include an overcast day, a light that bounces off any reflective or light-colored surfaces, a Chinese lantern, or light fixtures such as zip lights. Soft lights are used in film and video production to light large areas of a set, allowing the actors to move more freely across it. They create a natural look and more subtle statement than hard lights. Because soft lights cast gentle and soft shadows, most three-dimensional details become less noticeable. The light wraps around the three-dimensional object, creating a soft, even, and less dramatic look. The drawback to soft lights is that they are harder to control than hard lights. That’s why they are often used in conjunction with flags, which keep light off areas where it’s not wanted. When overused, soft lights can create a flat, even look, without much dimensionality in the frame.

On a set, the quality of a light depends on the following:

Functions of Lights

When lighting a set, lights (regardless of their make and model) have a designated name based on their function. One classic lighting scheme is three-point lighting. It consists of a key light, a fill light, and a backlight:

Emotive Lighting

By orchestrating a set of light fixtures, which fill particular functions and possess specific qualities, we obtain a lighting style. Lighting styles are inevitably responsible for suggesting moods and evoking emotions and psychological states dictated by the content of a scene. Two common lighting styles are high key and low key. These styles are not to be confused with hard and soft lights, although they play fundamental roles.

A low-key lighting scheme is dominated by deep shadows, and the few illuminated areas are well exposed or sometimes overexposed. To achieve this lighting scheme, hard light sources are often used in conjunction with minimal or no soft lights. The contrast ratio between bright and dark areas of the scene is high; sometimes parts of the talent’s faces or parts of the set are obscured and dark. Visually, high contrast ratios add depth and dimensionality to the frame. Emotionally, they evoke urgency and high stakes. It’s no surprise that low-key lighting was used at the beginning of the century in German Expressionist films, then later adopted and heavily utilized for the film noir of the 1940s and 1950s. Today, low-key lighting is usually associated with crime, horror, mystery, and psychological films.

A high-key lighting scheme is characterized by an overall brightness. The majority of the frame is well (sometimes overly) lit, with very few shadows. This lighting scheme presents a low contrast ratio between the key and fill lights. The fill light’s intensity, in fact, is raised to one similar to the key light so that it creates an overall bright, flat, and even look, without casting any major shadows on the characters or on the set. This low-contrast look evokes upbeat moods and focuses on nuances rather than making a hard statement. High-key lighting is usually associated with the look and feel of musicals and comedies.

Similarly to the mise-en-scene decisions of what you’d like to compose in the frame or not, deciding what to light and what not to light can have a profound effect on and evoke different emotions in the audience.

A good exercise that will quickly train your eye to lighting is to observe and analyze paintings and even photographs. Try to pay attention to the light source(s), the effect of light on skin tones and objects, and the kind of shadows they cast. Can you identify the position and angle of the key light and even the fill, kicker, or background light? Are they a soft or a hard source? Does the composition present low-key or high-key lighting? Being able to recognize at a glance the effects produced by different lighting setups will inform and educate the way you approach lighting in your own title sequence.

Computer-Generated Lighting

Now that you know about film lighting in the real world, understanding how most of the industry-standard software programs deal with lighting will be easy. Similar to real-world lights, CG lights need a bit of artistry in their arrangements. In a way, you have fewer limitations and less setup time. You don’t have to put lights on stands or rig them to an overhead grid. You can simply place any light wherever you’d like in your composition, using 3D coordinates and manipulating a few parameters.

On the other hand, adding lights to your project might increase your render time and sometimes even your screen preview. As with real-world lighting, a good way to start is to add one light at a time, find its desired type of light, position, and point of interest (where the light is aimed), and then add all the additional lights. If you think you have overdone it, turn all the lights off, then turn them on one at a time. Verify that each one is effective, see how they work together, and modify them if necessary.

One major difference to keep in mind when working with CG lights is that their position in the 3D environment does not affect the lights’ intensity as it does in the real world. In CG, you can move a light closer or farther away from the subject, but the intensity will remain the same. If you want to affect the intensity of CG lights, you need to change their intensity value (as we discuss shortly).

Just as with lighting in the real world, start by roughing in a key light, then a fill light, and then you can further articulate the set by adding a backlight. Depending on the software you are using, you might need to explore and modify the light’s properties to obtain the lighting style you want.

In Adobe After Effects you can add a light to your composition by selecting Layer | New | Light. A pop-up window displays the light’s options. To begin with, you can pick one of four types of lights:

Figure 4.28 After Effect’s Point Light.

Figure 4.29 After Effect’s Ambient Light.

To see your lighting setup in action, you might want to import or create other elements in your composition. You might start with a simple solid. Make sure that you turn any elements that you want to illuminate with a light into a 3D layer by clicking its 3D layer icon (the one that looks like a cube).

Figure 4.30 After Effect’s 3D Layer Icon.

Each light has a variety of options to modify according to your own taste or project necessity:

A few notes of advice:

Figure 4.32 Lights in After Effects use the RGB additive color system.

In Apple Motion there are four types of lights, very similar to the ones in After Effects but with different parameters. In Motion you can add a light to your composition by selecting Object | New Light (or by the keyboard shortcut Shift + Command + L). A new light is automatically created and added to your canvas. If you currently don’t have any 3D group in your project, a dialog window will be displayed, asking you whether you want to keep your groups as 2D or change them to 3D. Lights only affect 3D groups. The default light is spot, but in the heads-up display (HUD) you can change it to ambient, directional (similar to the parallel light in After Effects), or point.

Figure 4.33 Motion’s Spot Light.

Figure 4.34 Motion’s Directional Light.

Figure 4.35 Motion’s Point Light.

Figure 4.36 Motion’s Ambient Light.

Each light has different properties than the ones in After Effects. In Motion, all lights can be modified by changing their color and intensity. Point lights and spotlights can be changed by modifying their:

Figure 4.37 Motion’s Spot Light’s HUD (Heads-Up Display).

Using Photoshop Layer Styles with Type

With the variety of potential colors and shapes in a background, whether animated, footage, or even a solid color, you will need to employ a number of additional effects on type to keep it readable. Additionally, type effects will help add that level of professional slickness necessary to help your titles stand out and be memorable.

Photoshop’s live-editable layer styles are useful on a number of levels. First, as a design effect, they are quite useful in easily recreating a wide variety of light, shadow, glow, texture, and depth effects that come from the real world. Second, layer styles now comfortably integrate with Adobe After Effects to make integrating them in animation much easier than before.

Figure 4.38

Adding and Adjusting Layer Styles

To add a layer style, highlight the layer you want to apply it to and click the icon. You’ll choose an effect, and now below your layer you’ll see a heading for Effects, and then below that you can find the name of the effect applied. If you want to delete it, you can drag it to the Trash like a layer. To duplicate the effect with the same setting on another later, Option-click and drag it to the layer that you’d like to apply it to.

Figure 4.39

Whenever you apply a layer style, the dialog box specific to that layer style will open.

The Layer Styles

Now let’s go through what each layer style does and the options for each.

Using Global Light

Figure 4.40

Drop Shadow, Inner Shadow, and Bevel and Emboss use an artificial light source that can be synced across all the layer styles that use a light source. It’s called Use Global Light, and you’ll see a checkbox to the left of it to turn it on. Below you’ll see the three effects we’ve mentioned, with a synced Global Light and the same effect.

In this example the layer styles’ light sources are synced with Use Global Light.

Figure 4.41

In this example the layer styles’ light sources are switched off and at varying angles.

Figure 4.42

Contour

Drop Shadow, Inner Shadow, Outer and Inner Glow, Bevel and Emboss, and Satin all have Contour settings controlling the shape of the shading. Each of these is controlled with a Bezier curve. You have 12 contour presets, as pictured, and you can click on the contour and create a custom shape.

Figure 4.43

Figure 4.44

Click directly on the line to create a breakpoint and then drag it where you want. The following show the Bevel and Emboss effect with the same settings and two different contour curves.

This title has a standard linear contour.

Figure 4.45

Figure 4.46

Here’s the same layer with a custom contour.

Figure 4.47

Figure 4.48

Figure 4.49

Drop Shadow

A drop shadow takes the content of the layer and creates a fake shadow based on the shape of the layer behind it. Drop shadows are a common effect throughout the history of graphic design; they are highly useful for title sequences because they can take a title that is over a background and create a sense of depth and distance from the image below it. There’s a Blend Mode control to adjust how the layer style blends with the background, an Opacity setting, an Angle control for the light source, Distance that will control the offset of the shadow, Spread that will control the size of that mask being cut for the shadow from the layer content (the higher you set it, the softer the mask’s edge will be), and Size that is the how large the shadow is. There’s also the Contour control, as discussed previously, and a Noise setting that will introduce a random distribution of static to the shadow.

Figure 4.50

Inner Shadow

Inner Shadow will basically take the effect of a drop shadow and turn it inward. It creates an inner texture and impression of depth. You will encounter many of the same controls for drop shadow in an inner shadow with a notable exception: Instead of a Spread setting, there’s a Choke setting for controlling the mask being generated, which will control how the mask moves inward instead of outward.

Outer Glow

Outer Glow will still use the shape of the layer to create an effect, but rather than create a shadow, Outer Glow creates a light that will emanate from the layer.

In the Structure section, you have controls for the way the glow will interact with the background, so there’s Blend Mode, Opacity, and Noise settings as well as a choice for the color of your glow, or you can choose a gradient.

Figure 4.51

Figure 4.52

In the Elements section, you can choose a Technique (your choices are between a sharper Precise mask or a feathered edge Softer technique) and slider settings for Spread and Size. Spread and Size have the same functionality as they did for Drop Shadow.

Finally, under Quality, you have Contour controls, with an additional Range control that will adjust the amount of effect that the Contour will have on the glow, and a Jitter control for adding a natural randomness to the gradient in a glow.

Inner Glow

At first, it might be unclear what the difference is between Inner Glow and Inner Shadow, but as you go through the controls, you’ll see that this effect has a more additive lighting effect, which is easier to use with subtlety than an Inner Shadow.

Figure 4.53

The controls will almost exactly resemble Outer Glow, with the exception of the Spread being replaced by a Choke control, for the same reasons as mentioned earlier, when we were comparing the controls of Drop and Inner Shadow

Bevel and Emboss

Although many of the layer styles are used to add a bit of depth to layers, Bevel and Emboss does an excellent job recreating many effects of sculptural type you have seen in countless places. A bevel adds shading to the edges of the layer to either push it forward or back; an emboss will do the same thing by adding shading from the outside of the layer to push it forward or back.

Figure 4.54

The first setting you choose is the Style; the bevels will work along the edge of the layer, and the embosses will work from the area immediately around the letters.

Figure 4.55

After you have chosen a style, the next setting is for Technique, which gives you choices (Chisel Hard, Chisel Soft, or Smooth) of varying strength for how the chosen style will be achieved. You have a slider for the amount of depth, which will control the strength of the shading; a choice of direction (up or down); a slider for size, which controls the strength of the bevel; and a slider for softness, to add fine control of the Technique choice.

Since this is a depth effect, you have Angle and Altitude controls for the light source in the Shading section. There’s a Gloss Contour control for adjusting the curve of the shading. Finally you have the ability to control the blend for the Highlight Mode and Shadow Mode as well as the opacity of each.

Figure 4.58

Bevel and Emboss is quite possibly the most complex layer style, because it has two substyles (I’m not sure what Adobe would call them, but I think substyle is applicable) to add a contour and a texture to the bevel. The Contour controls are familiar by now, so let’s address the Texture controls.

Figure 4.59

With Texture, you first choose a Pattern tile with an image that will be used to set the look of the texture of the bevel. Scale will allow you to adjust the size of the tile; the lower the scale, the more the tile will be repeated. Depth is the strength of the visibility of the texture. The texture here is used only with the bevel; to get a texture throughout the layer, you should use the Pattern Overlay layer style.

Satin

Satin will feel similar to Inner Shadow by adding interior shading to the layer. Satin is designed to have a glossy effect. Unlike the Inner Shadow style, it won’t use the shape of the layer; instead it relies more heavily on the Contour setting. The settings for Blend Mode, Color, Opacity, Angle, Distance, Size, and Contour will all work in the same ways, as discussed in the previous layer styles.

Figure 4.60

Color Overlay

Fairly simply, the Color Overlay style will change the color of the layer. It gives you Blend Mode, Color, and Opacity, for adding an additional color over the existing layer content. The best argument for using this effect over the idea of simply changing the base color is when it is used as a subtle blend or in addition to the layer, rather just using it to change the color overall.

Figure 4.61

Gradient Overlay

Just like the Color Overlay, a Gradient Overlay will place a gradient over the existing color of the layer. The controls for this layer style are very similar to Satin, with the addition of a picker for the gradient, where you may choose from the preset gradients or set your own. The controls here are the same as for the Gradient tool. The Style section will give you control over which of Photoshop’s five different gradient styles you’d like to use (Linear, Radial, Reflected, Angle, or Diamond).

Figure 4.62

Pattern Overlay

The Pattern Overlay layer style is for adding an overlaying tiled texture to the layer content. You’ll notice that the controls are almost exactly the same as the Texture substyle for Bevel and Emboss. Your first two choices are the familiar Blend Mode and Opacity settings. Most important, however, is the following section, where you choose Pattern, a tile with an image that will be used to set the look of the overlying pattern. Next is a Scale setting that will allow you to adjust the size of the tile; the lower the scale, the more the tile will be repeated.

Figure 4.63

Stroke

The final layer style, Stroke, is extremely useful to movie title designers. Stroke will add an outline to the inside, outside, or center of your layer. You begin by setting the size, position, Blend Mode, and opacity of your layer style. The section below that is where you will choose a fill type, though in most cases you will want to stick with Color (Gradient and Texture are rarely desirable when using Stroke). The last setting will change based on the choice you made for the fill type, with familiar settings for each.

Figure 4.64

Choosing Between Raster and Vector for Motion Titles

When you’re planning a title sequence that involves computer graphics, inevitably you come to kind of crossroads: raster or vector? First, we’ll review the difference between raster and vector. Second, we’ll address the criteria for deciding which to use.

What Is a Raster Image?

A raster image is a digital image in which the pixels are specifically assigned to exact locations in a grid. Since each pixel can be any of millions of colors, having the pixels specifically assigned to exact locations in a grid means that they are capable of a photographic image quality. However, it has a major limitation in that it will become distorted with enlargement, so when you use raster images, knowing the sizing is crucial.

Figure 4.65

Film and video are media that rely on photographic images; therefore, in most cases we should be working with raster engines and raster files. The same is true for type. Since type in most cases only needs to be graphic and not photographic, it is optimal for us to have type in a vector format, where size changes will not reduce quality. Photoshop and After Effects use continuous rasterization for type, so the type is sourced to the software as vector imagery and continuously rasterized to maintain maximum quality.

Figure 4.66

Photoshop is the world’s most popular raster image editor. However, the type engine is vector information that is continuously updated and referenced by the software, so there is no quality loss from resizing. Unfortunately, if you want to use many of Photoshop’s effects, you will have to go ahead and perform a full rasterizing of type layers, thus converting them to standard graphics layers and limiting your text’s size. Throughout this book I’ll demonstrate ways you can take advantage of After Effects to avoid ever having to rasterize the type in Photoshop. When using raster effects with type, you can get photographic textures and effects to work with your type. But nearly every raster effect can be achieved without having to rasterize the type graphics permanently.

Figure 4.67

What Is a Vector Image?

A vector image avoids the entire issue of quality loss by not specifically assigning pixels to their locations; rather, vector images use Bezier paths to map out the shape of the image and reassign pixels as the path size changes. This leads to cleaner edges, and though they will never look like photographs, in most cases for type we either won’t need photographic-styled imagery or we can find a workaround using masks, or some other combination of effects.

In short, it’s totally acceptable to perform the typesetting part of your title work in animation software such as After Effects or Motion. If you need to typeset using Photoshop, you can, but avoid using Photoshop’s effects, since there’s likely an equivalent in After Effects that will not detract from the quality of your image.

Figure 4.68

Tutorial: Using Stencil Alpha to Cut Out a Texture

1 One issue that often comes up is wanting to do a photographic texture for type. The problem is, of course, our recurring issue of needing to avoid rasterizing, and the way we can do that here is to use a blend mode called Stencil Alpha. In After Effects, create a new composition, import the texture you’d like to use, and place a type layer above it.

2 With our text layer highlighted, go to the Modes column and choose Stencil Alpha. If you see the Switches view, you might have to go to the Toggle Switches/Modes button at the bottom of the timeline.

3 Now your type is cutting out your texture. The next thing to do is make it ready to be part of another scene. Highlight both layers and go to Layer | Pre-compose. Since the two layers rely on each other to make our effect, any more layers could create confusion or conflict, so it’s a good time to consolidate them.

4 Highlight the pre-comp and apply Effects | Perspective | Bevel Alpha. This will give it a very pleasing false depth and help it stand out from the background.

5 On your pre-comp layer, turn on the switch for Collapse Transformations. It’s the same switch as Continuous Rasterization except that when it’s applied to a pre-comp it’s called Collapse Transformations.

6 Done-To finish up this title card, I’ve added a background image. On the title pre-comp, I’ve added Effect | Perspective | Drop Shadow to it, to help make it easy to read over the background image. Now try adding in a Scale animation on the movie title pre-comp layer.

The Main Title Card Becomes the Movie Logo

If you think about your movies or the movies that have had the most cultural impact, you will often imagine the main title as you conjure up the movie name. Movies such as Pulp Fiction (1994), Jaws, Casablanca (1942), The Godfather (1972), Psycho, and Star Wars have movie logos as memorable as the movies themselves. But how did these logos come to matter so much?

Essentially it’s because the use of graphic design and the ability to stylize type to capture something that connects the title to the content of the film is what helps make for a memorable logo. Consider The Godfather, for example. The gothic appearance of the letters combined with the illustrative marionette element essentially sum up the feel and narrative of the film. Here we will examine some suggestions for how you can add illustrative elements to your movie title logo. I can’t promise you’ll be able to make a movie title logo as great as the ones I’ve mentioned, but it’s definitely worth a try.

Tutorial: Animating Layer Styles with After Effects

One method commonly used to slick up a title is to add Photoshop layer styles to your type. When you’re making a title sequence, the main title should have a special distinction; one way we can add that is through animating Photoshop layer styles. After Effects can add keyframe animation to the Photoshop layer styles. Here’s how you can take advantage of layer styles to add some animation.

1 Open the document deadringer.psd in Photoshop. You will see that the type layer has the Inner Shadow and Gradient Overlay styles applied.

2 Import the document into After Effects as a Composition Cropped Layers. When you come to the Photoshop Import window, select Editable Layer Styles and click OK.

3 Open the twirly arrow for the type layer, and you’ll see Transform and Layer Styles. Open Layer Styles and you’ll see the same layer styles we set up in Photoshop. Let’s open Gradient Overlay.

4 You will find keyframe tools for animating the same parameters that we initially set up in Photoshop. For a quick example, let’s set a stopwatch for Angle. Go to the 2 second mark and give the Angle three revolutions.

5 Done-You’ll get this ceiling fan-styled shadow movement throughout the type. Take a few minutes and try animating several different layer style parameters with After Effects.

Tutorial: Adding Animated Illustrative Elements to a Main Title Card

Using a simple, animated illustrative element can make the difference between the movie logos that people remember and ones they will forget. In the following tutorial, we’ll animate an organic plant element as part of a movie logo.

1 This scene was designed with Illustrator. Let’s begin by locking the background layer. Let’s add a new Shape layer to extend the e into a growing and ominous plant leaf.

2 We’ll use the Pen tool to create the leaf. Press G on the keyboard and then look at the new buttons that arrive on the screen. You’ll see a star icon next to a half-circle icon; choose the star, which tells After Effects that we are creating a shape and not a mask. Set the Fill to match the green of the e, which you can do by clicking on Fill and using the eyedropper from the color picker. Set the stroke to No Stroke by clicking Stroke and choosing the square with the red slash.

3 It is difficult to see the shape we are making with the background we have because by default AE uses a lavender color for Shape layers. We can change this by clicking on the color chip next to where it says Shape Layer in the timeline. I chose Red.

4 Use the Pen tool to design your shape.

5 Though it might seem a little weird, I am going to set a keyframe for the Path at the 4 second mark, where I want it to complete growing. Why? Because it is a growth animation, I know what the end should look like and I don’t know what the beginning will look like, so I start my first keyframe where I know what I want. I’ll then bring the playhead to the 0 mark.

6 At the zero mark I reshape the stem into being a believable part of the e. Notice that there is a new keyframe in the timeline.

7 Done-Shape layers make it easier to add attractive illustrative elements as part of a type layer. Now, to complete our animation add Effects | Perspective | Drop Shadow to match the effect on the original layer.

Title Sequence Workflows

To keep your title sequence projects from becoming overlong processes, it’s key that you have a solid understanding of what constitutes a good workflow. So here are some highly useful workflow techniques.

Figure 4.69

Project Management

A well-organized project is key to keeping deadlines. Project management is basically your workflow for keeping your files well organized and avoiding things like files going “offline” or missing. Here I will demonstrate the project management method that has worked extremely well for me for a long time. I learned it working at a professional postproduction house and have stuck to it, refined it, and used it for years.

Start by creating a master folder for your project, open it, and create four more folders: Original Art, Photoshop, AE Project, and AE Renders.

Working with the Graphic Design Department

The titles in your movie will often reflect the same look as the posters, invitational cards, and other print material that will be used to promote the film. In the old days, when titles were not as valued a marketing commodity as they are today, the print materials would sometimes follow the titles by some period of time, to the point where they wouldn’t match at all. Now, since these two elements can happen simultaneously, it makes it much easier to keep them in sync.

300 dpi Becomes 72 ppi

Figure 4.71

When a motion graphics artist receives material from the print department, several things will need to be changed. If the print material comes first, it must have its resolution reduced. Print usually uses 300 dots per inch (dpi) or higher. However, screens have the advantage of needing much lower resolution, 72 pixels per inch (ppi). When lowering resolution in software such as Photoshop, we must be very careful to avoid destructive processes.

Figure 4.72

When you are adjusting the scale of image in Photoshop you should be quite careful about the three check boxes above. Let’s say that we are going to shrink down a movie title logo from a poster.

1 To downsize our poster logo, first go to Image | Image Size and turn off Resample Image. Resample Image allows the software to warp the image into whatever dimensions we give it (which is something we will rarely want at this point). Leave Scale Styles and Constrain Proportions on. In most cases we will want Constrain Proportions on because that will preserve our dimensions.

2 Now, under Resolution, change it to 72. Notice that the width and height of the document have become huge. That’s because we have Constrain Proportions on but Resample Image off. Leave Constrain Proportions on, and turn on Resample Image.

3 Now you have unlocked the ability to enter in Pixel Dimensions. Under Width, enter 720. Hit OK.

4 Done-Now go to Image | Canvas Size. Change the Height to 480. You will be warned that this will crop the image, but in this case there’s nothing I want below the 480 mark so it is okay (if there was something below I would have to do some resizing). Since the logo in my example comes from the top of our document, I moved the Anchor to top center.

Setting Up in After Effects

Composition Settings

Figure 4.73

At the beginning of any motion graphics project, particularly a title sequence, it is very important for the designer to have a meeting with the producer, director, and editor to discuss what the final output will be.

Ideally, you will be able to work in the format that matches the final output, but that might not always be possible. Working with 4K footage and animated type will cripple even some fairly high-end systems, and on the ones it won’t cripple, it could make After Effects or Motion run so slowly that the movie’s production could grind to a halt. So, you can work with lower resolutions until the clients approve the piece and then output the high-resolution footage. How?

First, remember that if your type is vector, you can resize it at any point nondestructively. If you are animating elements as part of your title sequence, if they are vector, again, resizing is not a issue. With raster elements there’s room for more concern.

Figure 4.74

With the image being prepped, you will notice that the resolution is set to 180, which is more than double 72 ppi. Since video will be 72 ppi, After Effects will read the document purely from the number of pixel dimensions, and this image is 2592 × 1944, making it large enough to be part of a 2K film document later. But if we put it into a 720 × 480 document, we have to bring the Scale way down to make it work well in our lower-resolution document, but by doing this we have freed ourselves to make it larger later.

Tutorial: Making a Preset

In creating a title sequence with After Effects, there are a number of ways to do the same things, and we can take advantage of some workflow accelerators to save serious time. One of these is to make a preset for your animation so that we don’t get stuck in repetitive tasks.

1 When I am beginning a title sequence, I will usually experiment with the first title until I find something I like. In this case, I’ve settled on using CC Burn to make the text appear and a Scale that begins at 50 percent and ends at 70 percent.

Figure 4.77

2 Press the U key on the keyboard, which will bring up your animation parameters. Highlight the CC Burn and Scale tools. Drag and drop them into the Effects and Presets menu. You will be prompted to enter a name. I called it Augustus_TS.

3 Done-Now we can apply the settings throughout. So, put in your next title and drag and drop our Augustus_TS preset on it and it’ll match the previous title. What’s also pretty great about this is that if the title needs tweaking, you can change the keyframe values after they are applied. In the case of the next title in this sequence, I had to lower the Scale to between 30 and 50 percent to keep the larger title between the two columns.

Open in Editor

One of the most useful commands for working with Photoshop and Illustrator sourced documents in After Effects is Ctrl-E (or Command-E). This will open the layer in its editor, which is the program that was used to create it. So, your computer will then launch Photoshop or Illustrator, you can make your changes, and save. Jump back to After Effects, and voilà! It’s updated to accept your change.

If it hasn’t updated—and sometimes it won’t because After Effects stores a lot in your RAM and will only return to the source files if it needs to—highlight the update information in the Project window and go to File | Reload Footage.

Figure 4.78