Advertisement
Comics

The Mechanics of Comics

by

A few times a each month we revisit some of our reader’s favorite posts from throughout the history of Vectortuts+. This tutorial by Ian Yates was first published on March 17th 2009.

As an audience we accept comics for what they are; a medium, conveyors of information. What we less often realize is the technicality and process of how that information has been communicated to us. This is a good thing. When the artist gets it right, the comic book reader becomes immersed in what's being told - not how.

Introduction

I should begin by saying that my reference to comics covers a much broader definition than just comics. More accurately we would refer to Sequential Art, comics being just one member of the club. So what I'm really referring to are comics, comic strips, graphic novels, story boards and so on. This is something discussed at length by Scott McCloud in his book Understanding Comics. His definition serves to ensure that all appropriate media (even Egyptian hieroglyphs) are included, but carefully excludes art forms such as animation and the written word.

What's this all about?

Well, while we're discussing definitions, it should also be pointed out that what you're reading is more an article than a tutorial. Don't worry, towards the end you will be rewarded with some useful techniques for comic book creators using Adobe Illustrator, but this article takes a more theoretical approach. We're looking at the decisions which you, as comic book artist, will need to make when designing. More specifically, we'll look at three essential building blocks of a comic book, starting with..

..The Page

We all know comics strips. The format is familiar and logical. More often than not a short series of frames read from left to right, beginning to end. This is certainly the case in Western culture where newspapers pushed comics into mainstream from early on in the last century. Their restrictive format arguably moved the comic strip towards the genre we know today.

You'll be presented with more options (and therefore decisions) regarding page layout as the strips become larger, but what is the purpose of these decisions? The ultimate goal for sequential art is to communicate effectively and engage the reader for long enough to do so. The impact a page composition can have on this goal is not to be underestimated!

Page composition is something which you'll need to face, just as composing your illustrations. General aesthetic (not to be confused with General Anesthetic) is crucial, but as mentioned, keeping the readers' interest in the story is key.

Unless monotony and regularity are a deliberate part of the scene you're setting, variety in your page layout will keep things mixed up nicely. Panel size and position, color and panel type can all be varied. An open panel punctuating others with borders, or components of your drawing breaking free of the fourth wall are typical methods for adding dynamism to the page.

For greatest effect however, these techniques should be used where appropriate and not dominate the page. Aside from losing the resonance of the intended effect, too much variation could likely ruin the page flow.

Don't Make Me Think! - the phrase coined by Steve Krug upon which he based his book, actually refers to web usability. People expect certain things to behave in certain ways. Often, when their automated process is interrupted by having to stop and wonder what to do next, their interest wanes and whatever they were doing has lost them as an audience. Steve Krug of course is focusing on how users encounter web sites, but the principle remains the same for comic books. As I've mentioned, Western readers will assume a left-to-right, top-to-bottom flow. This represents the passage of time as is familiar to us, giving chronology to the sequence:

This is a logical first example, demonstrating flow at it's simplest. The following example flows equally well, but adds an element of interest by breaking up the composition to engage the reader a little more:

This third example however, is less successful. The flow is interrupted by an illogical panel layout, forcing the reader to stop and think:

With the page composition drafted, the image layout fresh in your mind, your attention will move closer to...

..The Panel

A panel, or frame, focuses the readers attention. It dictates what should be read at any given time and helps prevent the readers eye from wandering aimlessly across the page. Panels also control one of the most important aspects of sequential art............................. tempo. Where written prose has punctuation, comics have panels. The way in which panels dictate timing is as much responsible for atmosphere and mood as the content itself.

Take the following example of someone first considering, then taking a bite from his sandwich:

Now let's look again:

A subtle difference in the length of the introductory panel in the second example forces the reader to take longer over the sequence. Ours may not be the most complex ever written, but the plot has taken on a more contemplative mood. Our man is literally taking longer to think before eating. The extra space has also reduced any restrictive feeling of claustrophobia, adding a certain calmness to the sequence.

Japanese Manga comics in particular often explore the passage of time within and across panels. A common technique uses what Scott McCloud describes as Aspect to Aspect transitions. This is one of six transition types recognized by McCloud when moving from panel to panel. Aspect to Aspect refers to frames which show different aspects of the same moment in time. By exploring several aspects of one moment, time passes more slowly.

Action to Action is another of McClouds six transition types and moves the plot along more swiftly. Take this for example:

The reader is left to make quick conclusions and assumptions, keeping the story-line tempo high. These two key moments of a narrative have been chosen for their effectiveness in communicating the plot - in just two small panels we've been quickly told what's happening and now we can move on. Mind you, what exactly have these two panels communicated? We know our subject was perfectly happy to begin with, then something happened within the gutter (the space between panels) and he finished up soaking wet.

Perhaps the preceding story-line prepared us for it - if we know his background situation and environment we might know exactly what happened. Otherwise we're left to draw from common experience and make an educated guess as to what happened. When neither is possible it's up to the story teller to make sure we know what happened. An additional panel between these two could illustrate the action of our friend getting wet, more effectively, a third panel could clarify any doubts we had whilst serving to take the plot further..

The role of the readers' imagination in filling in the blanks is referred to as closure and is key in comic story telling. A clever artist will suggest what's necessary then leave the crucial details to the mercy of the readers' creativity.

Stimulating the reader's mind keeps participation high and keeps the pages turning..

..The Text

Lastly, we come to the text. Comics are a mixture of words and pictures and the two should be mutually complimentary, neither should dominate the other. As a comic book artist, staring at a blank panel with the prospect of having to communicate something, you'll be presented with a words vs. pictures decision. How heavily are you going to rely on words to put your point across? Could pictures portray what you want more efficiently?

As Scott McCloud again points out in Making Comics, there is no right or wrong. You should keep the word count in mind; heavy word density kind of misses the point of comics and isn't what your reader is looking for. However, by relying on words to convey a plot, your pictures are granted more freedom to play.

Let's look at our damp friend again. The following two panels communicate the same point, one relying on pictures, the other on words:

A lack of text in the first gives emphasis to the drawing; we observe our man in angry, solitary silence. The second panel uses text to tell us what's going on, giving the imagery scope to explore other aspects of the scenario. A combination may bring out the best of both, reinforcing the message:

Purists may tell you that imagery is the real strength behind comics - certainly, a comics strength lies in its total visual impact. As such, the words vs. pictures conundrum is up to you to resolve.

So why handwriting? It's true, handwriting is often used for lettering in comics and this more than likely stems from its visual connection to the illustrations themselves. Of course, the handwriting is usually digitally created, giving consistency and legibility, but it remains inconspicuous - it doesn't distract. We're back to that do not disturb the reader again. Text which suits the drawing style and conveys its message clearly is unlikely to pull attention away from the story telling. It is as much a part of the image as the illustration.

For this reason, text, as an element of a graphic image, can also be graphically manipulated. This luxury belonging to text as part of an illustration, can be used to further emphasize, suggest and persuade. Emboldening and enlarging for example, gives resonance to the words, adding sound to what Will Eisner refers to as the readers ear. Implying sound through displaying text graphically is yet another tool in the comic book artists box for telling a story.

The text balloon is a familiar vehicle for delivering text and, again, differences in style influence the way the story is told. We, as readers, interpret them almost subconsciously. Try yourself; which of these examples is thought, rather than said? Which is emitted from a radio or TV set? Which is being typed as we read it?

Of course, the content and typeface give us a clue, but the point is that a message is communicated through the combination of text, image and the power of suggestion. Now it's time to get your hands dirty.

Speech Balloon Live Effect

OK, you've been patient enough. It's time for a bit of practical tutorial knowledge, here we go..

Adobe Illustrator is a useful application for building comics owing to its layout and text features as well as all the illustrative bells and whistles it has. Whilst it may not be the most appropriate tool for laying out an entire graphic novel, Illustrator can help your comic book creation in a number of ways; copying and pasting, path and stroke effects, resizing and so on. Live effects are particularly useful and the following steps will demonstrate how such an effect can transform any lump of text into a comic book Speech Balloon such as I've been using for quotes within this article.

Step 1: Text

Place some text on your Artboard - it doesn't matter what, or how much - once we've made the effect you'll be able to apply it to any text. Align the text centrally as shown:

Step 2: Font

It's time to choose your font. Should you need them, here are a few quality free fonts ideally suited for comic body text.

Clementine

VTC letterer

Laffayette

Alternatively, the font used by Scott McCloud throughout his work and based on his own handwriting is available at a reasonable price from www.comicbookfonts.com.

ScottMcCloud

Once you've decided on your font, download it, install it on your system and apply it to the text on your Artboard. I've opted for the Italic Clementine and increased the tracking for legibility. I've also added a pale grey rectangle to the background and locked it (Command + 2). This will improve visibility while we're working.

Step 3: Appearance

Now's where it starts to get interesting. With your text selected, remove any fill color it may have then refer to the appearance panel. Open the Appearance panel menu and choose to Add New Fill. You'll see it added to the Appearance panel, mine is 90% Black and this will be the main color of my text.

Step 4: Second Fill

Repeat the Add New Fill steps to make a second one. Color this fill white and ensure that it's placed beneath the first fill in the Appearance panel. You won't see any difference in your text yet.

Step 5: Convert to Shape

With the white fill selected in the Appearance panel, go to Effect > Convert to Shape > Ellipse. In the Convert to Shape dialogue choose relative extra width and height of 9px. This will create a balloon 9px wider and taller than the text. Should our text size increase or decrease, so will the balloon.

Step 6: Bulge

We've made quite a thin balloon around our text, now let's refine the shape a touch. Keep the white fill selected in the Appearance panel and go to Effect > Warp > Bulge... Apply a vertical bulge of -50% to squash the sides of our balloon in slightly. Click OK.

Step 7: Duplicate

The Appearance panel now clearly shows your Type object comprised of two fills, the second of which has a series of effects applied. Now we're going to add a third fill which will act as our outline, so duplicate the white fill using the Duplicate Selected Item button. Again, you won't see any difference in the text yet.

Step 8: Offset Path

Okay, let's start editing our third and final fill. Begin by changing the color (mine is 90% Black, just as the text) and then go to Effect > Path > Offset Path. The amount to which you offset the path of this fill effectively determines the stroke around your balloon. I've chosen 2px.

Step 9: Tail

To finish off the look of our balloon, let's add a simple tail. Three clicks of the Pen Tool will give you an open path in a V shape. Fill it white and give its stroke the same color and width as the stroke around your balloon (in this case 90% Black and 2px). Place the tail overlapping the balloon somewhere and your effect is complete.

Conclusion

Of course, this is a live effect and can be applied to any text. It will resize and scale seamlessly:

By double-clicking any of the effects in the Appearance panel, their settings can be edited. This could be useful for differing balloons in your project.

In order to save your effect for future use, open the Graphic Styles panel (Window > Graphic Styles) and whilst your finished text balloon is selected, click the New Graphic Style button. Select your new style from this panel whenever you want other text to become a speech balloon.

Thirsty for more?

The subject of how and why comics do what they do is HUGE, I've only just scraped the surface with this article. If you're interested in more (and wish it to be told by the masters) there are one or two books you should definitely read. I've quoted Scott McCloud and Will Eisner on a number of occasions and with good reason. Will Eisner is credited as being the pioneer of Graphic Novels after publishing his acclaimed A Contract with God and few people have studied comics as a discipline like Scott McCloud. Even the non-comic fans amongst you will likely have seen his work after his recent promotional piece for Google Chrome - who said comics couldn't be taken seriously?! In any case, here are a few of their teaching publications which can be highly recommended:

Subscribe to the Vectortuts+ RSS Feed to stay up to date with the latest vector tutorials and articles.

Related Posts