The Makeshift Miracle
Tutorials

Making Word Balloons In Photoshop

A lot of people think of the text and word balloons as the last step in creating their web comic. It's easy to just want to get the text down and move on to the next panel. But, it's not difficult to create word balloons in Photoshop, and a good set of word balloons can make your stuff look extra spiffy.

Photoshop allows you a lot of flexibility to create word balloons and orient them well to present your dialogue. Although I'm using Photoshop 6 for this example, 4 and 5 have nearly everything I'm talking about here, and should work just fine.

Make sure you plan out your dialogue beforehand. It's really frustrating doing up a nice panel and realizing that the words you wanted to put into the panel don't fit. Ideally, all your text should stay the same size, unless characters are yelling or something, so plan ahead and save yourself some problems later on.

Type out your dialogue and leave that on a separate layer above the artwork (for a run through of how layers work, check HERE).


A - Raw Panel

B - Balloon Build

C - Borders & White

D - Finished

A - Raw Panel: Here's the panel with the art before I add the word balloons. Notice that there's a LOT of space for dialogue. I knew that Blake would be saying quite a bit, so I planned the space for that. I type out the dialogue and center it, checking for spelling errors and that it flows well. The nice thing about Photoshop 6 is that you can always go back and rework the lettering without having to retype it all.

B - Balloon Build: Using the Circle Selection tool , I create an ellipse that surrounds the dialogue completely. Leave a nice bit of extra space on the sides so that the lettering doesn't jam up against the edges of your balloons. So many amateurs (and some pros) have text jammed up against the sides of the balloon, and it just looks cramped and ugly.

Now, with the ellipse selection still there, choose the Polygonal Lasso Selection tool . Holding down SHIFT, you'll notice that a tiny '+' sign appears. That means that we're adding to the selection we've already made with the Circle Tool. If you click and drag three times, you can create a triangle-like shape that emerges from the circle and creates the 'tail' for the dialogue balloon.

As long as you're holding down SHIFT, you'll have both selected at once. If you're having trouble connecting the end of the polygonal selection to the start to complete it, just double-click and it'll hook up from where ever it is at to the start. It may sound complicated here in text, but try it out and it should make more sense. After you've got the selection the way you'd like it, color it in black with a fill tool or big brush. It'll obscure your text once you've covered it, just like in the B picture above.

C - Borders & White: Here's the trick for making nice borders on those dialogue balloons. With the area you've just filled in black still selected, go to the menus and click on Select - Modify - Contract. It'll pop up a box asking you how many pixels you wish to contract. I use 2 pixels personally, but you can make it more if you want a thicker outline. The selection will now shrink inwards 2 pixels. Color in the area that's still selected with white and you've got your word balloon! Make sure your text is above your Balloon layer and that your artwork is underneath both. Tah dah!

You can also use the Rectangular Selection tool the same way to create narration boxes or panels of any shape you want.

D - Finished: I've done a few more selections and created some more balloons for this panel to show how you can get a bit fancier with it. It can be good to break up a big chunk of dialogue over two balloons like this so that it's easier to read. Look at all sorts of comics to see how they use dialogue balloons to guide the viewer through panels or create interplay in dialogue.


Great writing can make a comic incredibly appealing, but only if people can read what you've created. Spend a little time improving your word balloons and it may improve the readability of your comics.



Home / Archive / About / History / Tutorials / Praise

The Makeshift Miracle is hosted on Keenspace, a free webhosting and site automation service for webcomics.