Chapter 17: Creating Word Balloons


Creating Word Balloons

Word balloons are an important narrative element for most motion book stories, combining text and graphics to present dialog. The Motion Book Tool offers a variety of options for creating word balloons.

Word Balloon Options

The word balloon option that works best for you depends on what you want your word balloons to look like and how flexible you want balloon resizing and text editing to be.

Importing Word Balloons With Text

The simplest way to add word balloons to a page is to create balloons and their text outside the Motion Book Tool—drawn and digitized from paper, for example, or drawn in external software such as Adobe Illustrator—then to upload each balloon file to the Madefire cloud as an image. Once uploaded, you can add each word balloon as an image layer to the pages of your motion book.

This approach can work very well for an existing comic book that you want to adapt to motion book use. The word balloons and text are already created; the story is nailed down and won’t need text corrections. Importing each word balloon with text gives you a wider variety of graphic styles to work with. You can import custom word balloons and calligraphy that you can’t create within the Motion Book Tool.

The main drawback of fully imported word balloons is that it’s very hard to make any changes, which includes even minor text edits. You have to go back to the source files, revise them, upload them, and then add them as image layers to replace the old word balloons.

Importing Word Balloons and Adding Text Layers

If you want custom word balloons that go beyond what the Motion Book Tool offers, but also want text flexibility, you can mix imported word balloons with text layers. You first create empty custom word balloons outside the Motion Book Tool, upload them to the Madefire cloud, add them to pages in image layers, add a text layer to each balloon, and then enter the text you want in the balloon. If the text doesn’t fit your balloon image, you can stretch the balloon until it’s the right size.

This approach offers easy text entry and revision within a text layer using the fonts available there. Although you can’t use hand calligraphy in a text layer, you can always upload a custom font as an asset to the Madefire cloud so that you can use your font in drawing layers.

One drawback for this approach is that you must create multiple balloon images, one for each type of tail placement and length you’ll require. Another drawback is that although you can resize empty balloon images to fit your dialog text, stretching too much distorts the word balloon, thickening its borders in some places and not others, distorting the tail, and calling attention to a coarse balloon that readers shouldn’t even be aware of.

Figure 1:    Stretching a custom word balloon imported as an image layer can distort it unacceptably.

Using Balloon Shortcuts With Text Layers

The most direct and flexible way to add word balloons to a page is to create balloons using balloon shortcuts in a drawing layer. The balloon shortcuts provide a variety of tail directions, and a single click places a balloon on the drawing layer.

Figure 2:    Balloon shortcuts in a drawing layer provide a variety of tail directions.

Once a balloon is on the drawing layer, you can stretch the balloon to any size without distorting or pixelating the border because it’s a drawn object. If the proportions are distorted, you can use the balloon’s anchors and control points to correct distortion. And if you need to extend or curve a tail, it’s easy to move the anchors and control points controlling the tail.

Figure 3:    It’s easy to modify a drawn balloon tail by moving the tail-tip anchor.

Add text to a drawn balloon using a text layer overlaying the balloon. It’s easy to enter and edit text in the text layer, and if the underlying balloon doesn’t fit the new text, you can stretch the balloon (and correct proportions if necessary) until it does.

Although balloon shortcuts and text layers make word balloons easy and flexible, they do limit you to pre-set styles and fonts. If you want a hand-drawn effect with hand calligraphy, you should consider importing balloons and text as images.

Drawn Balloon Techniques

Putting a drawn word balloon on the page combines tools from different layer types.

Adding a Balloon Shortcut and Text Layer to a Page

To create text in a word balloon using balloon shortcuts, use a drawing layer to place a balloon shortcut, then add a text child layer to the drawing layer. Enter and position the text you want to appear in the balloon. You’ll find details about drawing layers in “Using Drawing Layers” on page 94 and details about text layers in “Using Text Layers” on page 87.

To Create a Word Balloon Using a Balloon Shortcut and a Text Layer

1.      If you want to use a font for your word balloons that’s not already available in the Motion Book Tool, upload your font to the Madefire cloud as described in “Uploading Assets” on page 39.

2.      Add a new drawing layer for the word balloon: click “+” on the Add new layer button at the top of the layer stack in the page controls, then double-click Drawing in the dialog box that opens.

A new drawing layer appears on the stack and its controls appears in the layer stack.

3.      In Balloon shortcuts in the drawing layer controls, click the balloon you want to place on the page.

A drawn balloon object appears in the upper left corner of the drawing layer.

4.      Add a text child layer to the drawing layer: click New + at the bottom of the drawing layer controls, then double-click “Text” in the dialog box that opens.

5.      A new text layer appears within the drawing layer with the text centered on the page.

6.      Enter the dialog for the word balloon: double-click “text” in the middle of the text layer to select the text, choose the font, font size, color, and other formatting you want, then type the dialog.

The dialog appears in the center of the page.

7.      Squeeze the dialog into the form you want at the top left of the page over the word balloon: drag the lower right sizing handle of the text layer’s bounding box up and to the left.

The dialog probably won’t match the word balloon, so you’ll have to resize the word balloon.

8.      To resize the word balloon, select the drawing layer (click its layer box in the layer stack), click on the word balloon using the selector/resizer tool (), then drag on the sizing handles that appear until the word balloon looks like it’s the right size for the dialog.

The dialog probably won’t be centered in the word balloon, so you’ll have to drag it into place.

9.      To drag the dialog into place, select the text child layer so its bounding box appears, then drag the bounding box border until you place the dialog where you want it.

You may have to go back and forth between word balloon sizing and dialog formation and placement until you get exactly the results you want. You want enough empty space around the text so the word balloon borders don’t look crowded.

10.  Reduce the drawing layer bounding box to exactly fit the drawn balloon so the balloon and its text are easy to handle on the page: in the drawing layer controls, click “Fit to content.”

11.  Drag the drawing layer by its bounding box to place the word balloon and its contents on the page so the balloon tail points exactly where you want it.

Modifying a Drawn Word Balloon’s Tail and Proportions

When you resize a drawn balloon using the selector/resizer tool, you may change the balloon’s proportions in a way you don’t like. For example, if you stretch a balloon out sideways, the rounding on the left and right edges may become too pronounced.

You may also want to modify a drawn balloon’s tail to curve, to stretch down to a character in a panel, or to thin or fatten a tail after balloon resizing changes its proportions.

You can change all of these characteristics using the balloon’s anchor and control points with the tools described in “Using Drawing Layers” on page 94.

To Modify a Drawn Word Balloon’s Tail

1.      Select the balloon’s drawing layer by clicking on the balloon or by clicking on the balloon’s layer box in the layer stack.

2.      Click on the balloon with the anchor move tool ().

The balloon’s anchors and control points appear.

3.      To extend, contract, or curve the tail, drag the anchor at the tail’s tip.

4.      To fatten the tail, drag either of the anchors at the tail’s base away from the base.

5.      To change the curvature of the tail, drag both tail-base control points along the length of the tail.

To Square Up Overly Rounded Balloon Edges

1.      Click on the balloon with the anchor move tool ().

The balloon’s anchors and control points appear.

2.      Drag the four horizontal control points along the top and bottom of the balloon toward the left and right edges until you reduce rounding as much as you want.

Word Balloon Tips

Here are a few tips that might help your word balloons.

Balloon size

If you adapt a motion book for both the iPad and the iPhone, keep in mind that you have less canvas space on an iPhone than on an iPad, and that word balloons may have to be smaller. This means that you might have to reformat text in the balloons or change the number of balloons used to present dialog.

For more information about adapting a motion book to different reader sizes, see “Adapting a Motion Book to Different Devices” on page 189.

Font size

To keep dialog legible in the Madefire Reader, don’t’ use a font size that’s too small. We recommend a font size of 11 to 12 points for a dialog font like Blambot Pro, never anything smaller than 9 points.

Compound Balloons

Some dialog works best in compound balloons. In a motion book, each components of a compound balloon can appear in sequence as the dialog progresses.

You can create a compound balloon using a drawing layer. Use a balloon shortcut with a tail for the base of the balloon, then add a series of tailless balloons on top of the base balloon:

To open up the borders between balloons, place a small, skinny white rectangle with a white border over each desired border break:

This creates a single static compound balloon. For more flexibility, create each component balloon in its own drawing layer with its own white rectangle and text child layers. This makes it easier to match text to balloon components, and allows you to fade in each component individually as you present sequential dialog.

Thought Balloons

A thought balloon is simply a tailless balloon with a few added ellipses created using the ellipse tool:


Have more questions? Submit a request


Powered by Zendesk