The only rule is that there are no rules, only the story.
— John Byrne
Chapter 10
Visual Design Rules
"I was just trying to make movies on paper."
Read More »"The 180 degree rule is broken all the time. You have these quick cuts of flashy imagery to hypnotize you into paying attention…"
Read More »"I also make a point to young artists who show me page after page of characters hitting each other that they have to learn to draw the real world…"
Read More »The filmmaker, director, storyboard or comic book artist must express, using pictures, everything that the writer cannot communicate in words. In the real world, in the movies and in comics – "seeing is believing."
The pictures the artist presents to the reader must be convincing, compelling and dynamic, and again—as explained in the previous chapters; style is not a factor. Images that are "convincing, compelling and dynamic" could be as surrealistic as Bugs Bunny and Daffy Duck (talking animals?) or as realistic as Al Pacino in Scarface. The style or medium has little to do with good visual storytelling.
When staging a scene, it must convince the viewer/reader/player that visual representation has the appearance of reality. "Appearance" as defined as "perception," because there are many scenarios written and drawn in comics, that are now captivating us on the big screen, that are virtually impossible in the "real world." Yet, these occurrences should be logical, realistic and within the framework of the written story being visually told.
When rendering scenes of a story, remember the old cliché, "a picture is worth a thousand words." If there is a need to show a man in a costume and a cape flying in the air under his own power, and while rendering the miraculous feat doesn't appear to be possible (or if it's unclear), then the audience will be in trouble and they will be lost very quickly.
The best story-telling in comics, as well as in movies, is when the audience isn't really aware of the way the story is being told. They simply get caught up in the story and the characters themselves and want to see what happens to them next. If that's the reaction the viewer has, then the story-teller has done his job well.
The best story-telling in comics, as well as in movies, is when the audience isn't really aware of the way the story is being told. They simply get caught up in the story and the characters themselves and want to see what happens to them next. If that's the reaction the viewer has, then the story-teller has done his job well.
Rule #1: Clarity
The audience, whether it's a reader, viewer or player mustn't get confused or lost in the attempt at conveying the story.
Jeff Smith, author of the successful comic book series Bone, believes that it's the artist's job to make it easy for the reader to follow the visual story. "The clarity of the story is everything," he said. "Above anything else, the visual storytelling is the key to making the reader or the audience a participant."
If those illustrations present a poor storytelling effect, it will confuse and distract the reader from the story. Many times the audience is pulled out of the immersive world by the distraction of the wires used in special effects? There are not enough words to convince the reader that the scene is really happening, if it doesn't "happen" in the artwork and/or visuals. Visual storytelling can't fake it in pictures. The reader will reject the story, and immersive experience. One of the very first things John Byrne advises young artists is "back up your camera ten feet." The vast majority of work he sees is wrong, fresh out of the box. They go in too close on all the scenes, so it's difficult to convey adequate information to tell a story efficiently, if your camera is always three feet away from the action. "There has to be times when you pull the camera back and just look," Byrne said. "Of course, I use camera metaphorically here." It is true that there is no "camera" in comics, but the concept exceeds all visual storytelling media. A visual storyteller can't express a story adequately, in any medium, if three feet away from the action.
"I always say the establishing shot doesn't have to be the first shot, but it does have to be in there somewhere, so we know where we are and who is in the scene and what's happening and why. Clarity, clarity, clarity… and pulling the camera back."
The single most important element in comics, film or interactive game production is good, clear visual storytelling. It is the task of the artist as storyteller, to communicate and convey information using sequential pictures. Clarity is the objective, from the very beginning, when figuring out composition, layout, and design. All composition and design of any scene in any visual media should be in the service of the visual storytelling - not at the expense of it. Specifically to comics, design should emphasize clarity of eye path, clarity of the action portrayed, and make clear what is being emphasized in the story. A good well designed comic story will show the readers all the information it is possible to show visually. This way the copy can be kept to a minimum and can concentrate on subtler dialogue instead of blocks of descriptive copy to explain what the art fails to show.
By mistakenly skipping the transmission of important elements to the reader/audience, there's the risk of confusion. That's the difference between why someone enjoys watching a film, playing a game or reading a comic book more than once. The visual storytelling is clear and enjoyable.
The good example of poor clarity is presented in Chapter 5, whereas the Phantom 2040 game neglects to inform the player of a very important component of the story in order to achieve the best ending. This error may not have ruined the experience completely, as getting through it is part of the fun, but without that information; the player could never completely win.
This basic foundation of rules can be called "classical structure." The classical structure was established in other mediums (theatre and creative writing) and has since carried over into the comics, films and interactive games. The definition of the classical structure differs, depending on which story guru speaking, but they all work because they mirror reality. It includes a story centered on a single active protagonist, with an external conflict in an ever changing real world that has emotional and intellectual closure at the end of the story. Although, there are other styles 1) "minimalism," which may include multiple protagonists in an insignificant world without closure, such as the films The Big Chill or Diner, or 2) "anti-structure," resembles something like Monty Python and the Holy Grail. Today, most visual storytelling work is, or aims to be, "classical" in structure.
As with any form of art, a thorough understanding of classical structure is usually needed to pull off more abstract styles, such as Pablo Picasso. In other words, clear knowledge of the basics is necessary, from which to build upon before revising, editing, or even ignoring them.
The traditional three-act structure that surfaced from theatre limits the revelations and plot points embedded within a story to keep interest. Most Hollywood films in recent years, average from six to ten major plot points per story, so only two or three plot points will simply not keep the player's attention in a film, let alone in a RPG interactive game, with 120 hours of game play.
There are three key factors to consider when presenting visual imagery to convey a written story, 1) Information – the attempt to communicate a message to the audience – what's the most articulate method of delivering that information, and 2) Emotion – in comics or interactive games, it all dependent on the artist, who needs to illustrate an emotion, and sometimes without the luxury of a close-up on a human face. The lighting, color, composition, angle, etc., all contribute to the mood of the scene, entire film or specific character, and 3) the Audience's emotion — what they should be feeling as they look upon the work.
Action Flow Direction
The "flow" between panels or scenes or shots must be consistent. The "flow" is the movement of characters from frame to frame and it must be believable and unswerving. Provide a solid path for all the characters, and avoid any unseen moves between panels or off camera that may distract from that flow. Also, as explained later in this Chapter, the 180 degree rule assures clarity by keeping characters on the same side of the frame from which they started.
If possible to do without opposing any of the aspects of good storytelling (including maintaining action flow continuity), design panels so the eye easily moves to the next panel in the sequence. This helps with the action and flow of the story, as well as with suspension of the reader's disbelief. If they have to stop and figure out where to go next, then they're lost and the story becomes just a bunch of pictures on a page or dynamic imagery on a screen..
In order of importance are typical design concerns, beyond the paramount concern of clear storytelling.
1) There should be clear eye flow. The audience, whether it is a movie viewer, game player or comic book reader should always be able to tell what is going on in a scene, and know what it is that he/she should be looking at. If there's a character punching or shooting, it should be clear who is punching and who is getting hit.
2) The clear eye path flow, in comic books or in storyboards, from one panel to the next panel in the sequence. Keep in mind that a reader will subconsciously follow the eye path into the next panel on the page. Make sure the design does not confuse the reader and send them looking into the wrong panel in a sequence.
3) Clear eye path from panel to panel in an extended sequence should flow fairly well over the whole page. Even with fancy layout and design, a reader should always know what order to read the panels of a page in. And it can lead a reader's eye off to the next page, which can help the flow of the story as well.
Determining how to establish a successful composition comes from A) Observation from other visual media and real life; seeing things in a compositional and design oriented way. B) Experience – the things learned by actually having done them. C) Theory from the books and schooling, and 4) Intuition - gut feelings are very important. This is the unique flare can spring static images to life!
Designing movement is important, more so in comic books and the printed page, than the dynamic media. The artist can show where the object is moving to and from, by adding certain shapes, lighting and panel design. If showing an object moving beyond the panel border, make sure it's to the next panel in the sequence. By using figure/object movement and panel action, this will help lead a reader's eye path into the story, panel-to-panel.
In the Mat Nasto film Bite Me, Fanboy! (BMF), these same elements were followed successfully, for the most part, as there were a few, painful exceptions where either space/physical limitations or lack of time became an obstacle. Ray, the main antagonist of the film, always enters from the right, which is the classic villain entrance. His entrances are always flowing against the established movement or action of the scene he's in, and prove a great counterpoint to it.
Even in the final sequence, the confrontation between Nick/Ray/Rachel, he follows the same pattern. Ray and Rachel, the film's antagonists, enter from the right, against Nick's (our hero) left entrance and movement. Ray stays physically between the former couple, in a visual representation of the rift that has come between Nick and Rachel throughout the movie. At the end of the sequence, Ray moves off-screen to the left, completing his right to left motion, ending the opposing flow of the movie, while Rachel changes direction and heads to the right and into the next scene of the move (moving the story towards its finale).
Rachel is also a force in the visual momentum of the movie. Her first two sequences involve fairly intense right-to-left movement that halts the forward/upbeat/positive flow of the movie. This is particularly felt in her second entrance/exit from Nick's place, in that there is a strong left to right movement for Nick in the shot prior, and her exit in the car and confrontation sequence are all very strong right to left. The movement/flow changed to be against a viewer's eye path/natural tendency to help slow down and intensify the emotion of the scene. In Rachel's first two sequences, she moves exclusively right to left, establishing her immediately as an antagonist for the movie.
Rachel's entrance at Nick's place switches from her right-to-left motion to left to right to enhance the action by moving it to fit the viewer's eye path. Nick's left to right facing in the "Stop Talking About Comics" sequence, helps to move the audience into the story.
During the middle of the Ray confrontation scene at the beginning, Ray is in the center of the screen (between Nick and Jared) to balance out the shot, and to give Ray the ability to bounce back and forth between the two good guys. Notice that Ray's close-ups are always left facing to reinforce and reconfirm his antagonist role.
In the geek out sequence, Jared is on the far right of the screen since he has the most dominant role. During his monologue, we switched him to left facing to enhance the action of his speech, and to allow the other characters to face right to left towards him to enhance his action.
Establishing the Scene
One of the first steps in either statically or dynamically illustrating a story is by establishing the scene, its characters, objects and mood, or setting the stage. As an artist or filmmaker there should always be an "establishing scene," which in one brief glance, gives the reader enough information to know who, and where they are about to travel. This is where placement of characters in relation to each other, within the designated environment sets a stage for the story.
The 180 Degree Rule
The 180-degree rule is becoming a lost concept in both comics and film. Once the character's direction is established within the environment and in relation to the panel frame, maintain it in the following panels until the character changes his course within his or her environment. Arbitrary exceptions confuse the readers, even if only subconsciously and again, makes for a different or confusing entertainment experience. This concept taken to the extreme would be when moving the story forward, the protagonist always moves left to right, which follows natural eye direction. This offers and natural reading experience and the story flows comfortably. On the other hand, moving the protagonist in the opposite direction when being beaten back, with the antagonists also moving against eye direction can create a feeling of chaos unleashed! Remember, this is a bit extreme, but provides an example of the power of thoughtful visual storytelling.
In the comic shop sequence in the film Bite Me, Fanboy!, prior to the protagonist's [Nick] date with Wendy, where the four friends discuss Nick's love problems. This scene shows an example of what NOT to do, because of the physical limitations of the comic store, the 180-degree rule was broken in order to obtain the coverage footage that we needed to complete the scene. Normally, the footage would've been flipped to make it work correctly (as in the third date sequence with Trina later in the film), but the large amount of printed material around the actors made this undoable, but a little more pre-planning would have solved this glaring error. In the Trina date we had a similar problem, but were able to flip the footage in order to get the actors on the appropriate side of the screen.
The camera angle should change every time the camera is moved. It is necessary to know when to change angles, and how. There are many examples in various media these days where the characters seem to be jumping around from place to place, with backgrounds suddenly appearing and disappearing for no apparent reason. In comic books, this happens because the artist had no idea where his camera was place in any of the shots.
The camera is not always stationary. In a scene where the angle is reversed by moving the camera, the 180-degree rule should still be followed. A character should remain on the same side of the scene even if the angle and point of view is reversed, in order to make it easy for the audience to follow the focus of the story, without having to work at following the characters.
Unless there is a very specific reason or effect in mind, never allow characters to jump across the 180-degree line, and switch sides of the panel.
A character should remain on the same side of the scene even if the angle and point of view is reversed, in order to make it easy for the audience to follow the focus of the story, without having to work at following the characters.
Set up and Pay off
Always set up items early in a scene, if they may be used or focused on prominently later in the story. For example, if a woman in the story is going to use a flashlight from her bedside table as a weapon against a prowler, at some point in the story, make sure that the flashlight is seen on the table when the stage is first set. It can be as subtle or as blatant as desired, but it should be there.
Action/Reaction
It's best to present as much information within each shot, expressing the action and then reaction, unless needed for a specific pacing effect. This is preferred instead of lots of small shots, each with only a small bit of information, making for less exciting scenes and less clarity of the world around them. Of course, in film, or in interactive game cut scenes (see Chapter 9), there's the advantage of dynamic motion, which can make up for quick cuts of bits of information and so an "action" scene and a "reaction" scene are usually separate frames, while in comics
Remember the basics when working with design; people shouldn't be jumping around the room from shot to shot or panel to panel, and they shouldn't even change the sides of the stage without reason. If focused on drawing comics, remember that whoever looks at the page has no idea what's supposed to be drawn; only what they see. If unsure or unclear about whether or not the storytelling is clear, hand the page to a friend or family member and ask them what they think is going on, generally. No need for specifics such as names, places and motivations; they should come up with a fairly accurate summary of the plot of the story unfolding on the page, whether it be for comics or as a storyboard; the foundation for other visual media.
Rule #2: Realiism
The American publishers of the RPG game SepterraCore were so delighted by Maya's (the main character's) popularity, the reviews and quality of the game, that they began discussing a sequel with creator Brian BMAN Babendererde. BMAN said he laughed when he recalled the mortified look on the publisher's face. "You can't kill the main character!" they said.
BMAN disagreed. In Shakespeare, everyone dies at the end. In the films Gladiator and Braveheart, they die at the end. "It's epic," said BMAN. "It's drama. It's reality—people don't live forever like iconic characters. People die in real life." The creation of the "tragedy" in early theatre was (and still is) an attempt at portraying realism- a necessary ingredient in the art of creating an immersive world. "What about the spin off sales and sequels and dolls and stuff?" Here, the story was more important that the ancillary rights and profits. "I believe the fans really see that in the game; they love the story. Isn't that what it's all about?"
The Reality Rule is about creating a sense of realism, which goes as far back as early theatre, where the nature of "realism" became a movement. The more realistic the sets, costumes, people and even the dialogue, the more believable the story. It all contributes to creating a world as real as possible, even on a flat two-dimensional surface (screen or page). This realism provides the foundation necessary to create outlandish imagery and characters and it all seems real. In the film, The Exorcist, when a possessed twelve-year-old girl (played by Linda Blair) starts spinning her head around 360 degrees; it appeared very real, because of the set realism of the environment. The movie wouldn't have been half as scary if it were a surrealistic demonic fantasy set in the burning inferno of hell; it was in a young girl's bedroom, in the real world. It's a very important immersive point, to portray a sense of reality so that the reader, viewer or player falls into the story.
There have been recent films that are associated with the nature of reality itself — Dark City, The Truman Show and The Matrix. All of these films portray elements of a world we can understand, that we can associate with, in order to compel us to believe the outlandish concepts and imagery.
Furthermore, the reality rule has nothing to do with style or photographic imagery. When reading a Spiderman comic book, the reader believes that this guy in skin-tight leotards is spinning a spider's web and swinging from building to building. It doesn't need to be photographic, and as a matter of fact, with the photographic or three-dimensional image, there are the limitations of the laws of physics or three-dimensional modeling software. The comic book artist can expound on reality, in order to convey the desire effect.
From the beginnings of modern theatre, to the advent of comics and film, when a humanistic approach was achieved, the audience related to the story unfolding and this contributed to drawing the audience inside; creating a relationship between the characters and the audience. Stan Lee, the creator of Spiderman and Fantastic Four was quoted as saying that he took the superhero concept popularized by Superman and Batman at DC Comics, and made them more "real" or more "human." Peter Parker, Spiderman's alter-ego was a teenage nerd with hang-ups and nemesis bully.
If Spiderman lived in a doomed city on the dark side of the moon, people wouldn't be as impressed with his feats, because it wouldn't have any real cohesiveness. The sense of immersion comes from Spiderman swinging through realistic New York City; that sense of creating and maintaining a reality, particularly as a set for outlandish characters or deeds, successfully creates a sense of real, without a photographic image.
Stan Lee states in his 1974 book Origin of Marvel Comics, "I would create a team of superheroes, if that's what the market required, but it would be a team such as comicdom had never known. For just this once, I would do the type of story I myself would enjoy reading if I were a comic book reader. And the characters would be the kind of characters I could personally relate to; they'd be flesh and blood, they'd have their faults and foibles, they'd be fallible and feisty, and – most important of all – inside their colorful, costumed booties they'd still have feet of clay."
Depth of Field
All genre's of every visual media maintain a two dimensional medium, attempting to convey the illusion of three dimensions, whether on a printed page or a screen. There are three set planes that can create this type of illusion, the foreground, middle ground, and background. The artist usually wants to differentiate the three planes from each other to create the feeling of depth. This can be easily achieved by using contrasts in lighting, texture, rendering density, color, and the density of black areas. Sometimes the artist will want to merge the planes for effect or mood. For example, an artist drawing the DC Comics' Batman will blend the black on Batman's costume into the black of his surroundings. This establishes him as a creature of the night, which can surreptitiously travel in the shadows, making him a frightening character.
As an artist, whether in film, games or comic books, try to convey reality through the use of depth. If there's a dark object in the foreground, then make the background light and visa versa. The same holds true for a detailed foreground. This also works with a fore-, middle-, and background - if the middle ground is light/dark then the fore and backgrounds should always be the opposite.
Technological tools provide a means of using other methods of showing depth, as depicted in the image below, where the blurred background give it an elusion of depth, even on a two dimensional surface.
In interactive gaming, they use what's referred to as "motion capture" to achieve more realism in 3-D modeling. Motion capture is the process of tracking and recording real life movement in 3D space. Motion capture is more cost effective than key frame animation, with over possible 300 motions produced in a week, which would be impossible for a key frame animator to accomplish. Motion Capture can shave months off of a schedule for the average computer game or animated film while providing much more realistic movement than any animator could do by hand. "Essentially, we're tracing real life," said Maggie Bohlen, Producer at Red Eye Studios, a motion capture facility in Hoffman Estates, IL. "You can get a much higher volume of motions and the quality is going to be there right away. You have also the advantage of motion capture picking up subtlety of motion, and then you're only limited by your actor."