Two to five hours.

If you have a good pen-hand, do handletter your comics! The main advantage with handlettering is that it almost always harmonizes better with your art than any typeface can.

Digital lettering gives better control of the entire process, and it allows you to draw all the actual art of the comic. A compromise is to create a font from your own handletters, like the artist Paul Taylor did with his comic Wapsi Square.

Think about it. What do people look at when reading your comic?
1. Your drawings.
2. The typeface you've chosen.

So the font rather not compete with your art for the attention in being special. That's one thing. It's not recommendable to have a generic, ugly font either. Here's an example of the latter. Whenever I encounter comics lettered with the common font
Comic Sans MS

-- I can't continue reading (unless everything else is brilliant, as in the comic Misfile). It's important you never use this font. Please, do not consider lettering your comic with Comic Sans. I'll quickly list its pros and cons. Cons:

1. Appearance: Ugly, particularly in UPPERCASE. Unfortunately, most cartoonists who use Comic Sans letter in uppercase. The font is easily recognizeable, which is only a drawback. Fonts seen everywhere, such as this one, provide an added trivial appearance.

2. Expression: The font has a childish expression with its round shapes and sickening friendliness. Also, because it graces everything from logos to restaurant menus to official documents (ie. everybody uses it), it removes the idea of your comic as something professional, much in the same way a fly removes your appetite if you find it floating in your soup.

3. Distribution: Comic Sans is, as mentioned above, found wherever you turn your head as soon as you step out your door. It is abused and utilized to shreds.

Pros:
1. Its name has 'comic' in it.

Again I mention the importance of selecting a good lettering font. If you look at a beautiful comic and just can't place what's so wrong about it, then perhaps the font is bothering you. In nine out of ten such cases, the artist has probably chosen Comic Sans MS.

Read more on the Ban Comic Sans website.

Here is as list of what qualities I think a lettering font should possess.

1. Appearance: The lettering font should first and foremost be one hundred percent readable, and flow smoothly with your art.

For a general black-and-white traditional comic like HELLOMUFFIN!, I found a nice font whose text looks handlettered. Another example of art-and-font concordance is the low-resolution comic Our Home Planet, which is set with the font Arial.

2. Expression: A comic font is better off without expressing anything on its own. Unless, that is, it's describing the character who speaks the text.

3. Features: Comic fonts made particularly for the sake of comic lettering usually have a couple neat features. Some comic fonts, for example, don't have a lowercase at all; all characters are identical in lowercase and uppercase except the letter i (described below).

Examples of other features with lettering fonts: a. A much more expressionate boldface. b. The letter I (capital i) is provided in two versions: With and without serifs. Comics are often lettered in a way that capital i is seriffed only if standing alone. Look it up in a comic once; you'll see it's true! c. The more-or-less useless characters '{' and '}' are replaced with symbolic brackets indicating sounds words.

So where to hunt these specific fonts? As far as I know, only one website provides them for free: Blambot Comic Fonts & Lettering. You can buy professional fonts from there, too. I got the one I letter HELLOMUFFIN! with from Blambot; it's free and called Mighty Zeo Caps.

I use other fonts than Mighty Zeo for sound words and some other bits. Most of them came from Blambot. All the fonts I use in HELLOMUFFIN! can be downloaded at the bottom of this article.

We are in Photoshop. We have a comic which is finished, except for its lack of text.

The first thing I do is to create a new layer on top and fill it with a bright color using the paint bucket. Remember that the color mode must be set back to RGB first (Image -> Mode -> RGB Color). Photoshop will ask something about flattening the image in this process: do not flatten the image at this point. I set the Opacity of the new layer to around 60% in the Layers box.

I'll delete this layer as soon as I'm finished lettering. For now I'll be able to perceive the comic and place the text and bubbles accurately at the same time, the contrasts of the arts not disturbing me in the process. Here's what things looks like at this stage.



I proceed to make preliminary placements of the text.



I try my best to break the lines so that the batches of dialogue shape themselves as ellipses. It can be a challenge! I never use another alignment of the text than Center.

There are plenty of things you can do to format the text efficiently and thus make best use of your space. Below you see the Character and Paragraph Palette. You can access it from the Properties bar of the text tool.

The box saying Mighty Zeo 2.0 is where you select font family.

The box saying Regular gives the options of text styles, such as Bold, Italic, Light, Narrow, whatever the font can do.

The box saying 18 pt determines your font size.

The box saying 19 pt determines the leading distance. This is the distance between lines.

Too many people are unaware that you can (and should) override the default leading when lettering a comic. I usually play around with the leading until I find the best distance. Using Mighty Zeo Caps I also have to consider how the text changes when I apply boldface style to it.

The box below the leading, saying 0, is the tracking distance. Tracking is the space between characters. I change this on three occasions only. 1. If I feel the font I'm using has too large tracking by default (ie. the Blambot font CreativeBlock), I select the entire text set in that font and choose a negative value from the drop-down list. 2. If I notice a strange tracking between two characters after having performed point 1., I can select one character and change the tracking for that character only. 3. I can select a line of text and dimish the tracking if there's little space.

It's no good to diminish tracking distance too much in body text to make up space! It's ugly, less readable, and easily noticeable.

The boxes with percentage values are no-food. I've never been able to produce acceptable results with the usage of these modulators. The rightmost one can certainly not replace the tracking function. Perhaps they can work in combination.

The box saying Smooth tells Photoshop how to make the text appear. Play around with it (and the rest of the modulators) to get familiar with the palette.

Moving on: Sometimes you want special effects on the text. In Photoshop, when the text tool is selected, there's a button in the properties bar which looks like a T on a bent arrow. Select some text, click the button, and you'll see the Warp Text box, which allows you to distort the text you selected.



I never put effects on body text (the Mighty Zeo Caps text). I use other fonts for this purpose.

I draw speech bubbles using vector tools only; mainly the ellipse tool. I edit the ellipses and create pointers using the add anchor point tool. Here's how the ellipse properties should be set.



Here's a list of the procedure. (I use another example in the figures to illustrate better.)

1. I (roughly) draw the ellipses to cover the text.



2. I edit the ellipses with the add anchor point tool.
a. I add new anchor points at strategic places, as indicated below.

b. I move the other anchor points accordingly to give the bubble its correct shape. This can be done with the same versatile tool. See below for the example.

Note: When creating paths and adding new anchor points to them, the old anchor points adjust to the new ones. This provides possibilities for shaping ellipses quickly and efficiently.

c. Pointers: Refer to the picture below for how I go about to create pointers in all sizes and shapes. I use the add anchor point tool only.

Important tip: Don't add more anchor points than necessary, and try to maintain symmetry!

Note: Within one path, you can always select several anchor points at the same time and move them together, if you want.

Note: You can move paths and anchor points one pixel at a time if you select and nudge them using your keyboard arrows.

Note: If you hold down Shift while moving paths or anchor points, they'll move in a straight line along the x-axis or the y-axis, or 45 degrees between the x- and y-axes.

Note: If you click on an anchor point, two smaller control points will appear attached to the anchor point through a line. Play with them to figure out what they do -- but try and avoid using them. From my experience they just create asymmetry, unless you know exactly how to work them.



3. I create a new layer below the text layers, and on top of the see-through colored layer, which I call BUBBLES.

4. I take the path selection tool and make sure to select all the paths in the document.

5. Making sure the BUBBLES layer is selected in the Layers box, I go to Edit -> Fill... and have all the paths filled with white. Notice that you have the choice of making the fill transparent.

At this point I can select whichever vector tool and press Esc; this causes all the paths to go away. They have served their purpose.

6. In the Layers box, I right-click on the thumbnail of the BUBBLES layer and choose Select Layer Transparency from the drop-down list. This will make a selection around every pixel present on the BUBBLES layer, which now contains all the newly filled paths.

7. I go to Edit -> Stroke... to place a black line around the white. For the Location parameter I always choose Center; otherwise the pointers won't appear right. Play with it to determine what pixel thickness you want to stroke your bubbles with.

Note: I always draw the paths extending outside the panels and over the gutters. When the paths are filled and stroked, however, I go over the entire document with the marquee tool and clear (erase by pressing Delete) everything that dares traverse the gutters. The advantage is now that all the bubble-hassle is on a separate layer, so that whatever I do now will affect the speech bubbles only.

One last thing I do is to hunt down all the text layers which lie outside speech bubbles, such as the sounds words. I select them all and stroke them in white on the BUBBLES layer.

I select these text layers by right-clicking their thumbnails in the Layers box, choosing Select Layer Transparency. (Note: To add up all these selections I must hold the Shift button while selecting.)

In the Stroke... dialogue, I select Outside in the Location box and put in whichever pixel width that appears nicer. I play around with it.

When finished with the speech bubbles, I delete the colored layer.

This is how it turns out.



And the comic is in essence done! What's left are the following details:

1. To number the comic. I add the number of the comic someplace in the first or second panel, using the same font.

2. To frame it. I select the Background layer by hitting Select All (Ctrl+A) and go to Edit -> Stroke... to put a hairthin black frame on the entire comic.

3. I make a final save of the .PSD document to keep the layers.

4. I flatten the document, Ctrl+Shift+E. To flatten is to merge all layers into one. This must be done in order to save the comic as a .JPG file. Note: Always flatten a picture before you resize it. If not, Photoshop will mess things up for you.

5. I resize. Image -> Image Size... The strip is 400px wide.

6. I convert the comic into grayscale: Image -> Mode -> Grayscale. This saves some disk space.

7. Eventually I Save As... and save the comic as a .JPG.

The finished result of the strips seen in these articles can be seen here and here.

This is a list of all fonts, some with families, seen in the HELLOMUFFIN! comic and site. All are PC TTF fonts. To download them, right-click the links and click Save Target As...
Mighty Zeo family, .ZIP
Futura family, .RAR
CreativeBlock family, .ZIP
Midnight Snack font, .TTF
BigBloke font, .TTF
ConfuseBox font, .TTF
Twelve Ton Goldfish font, .TTF
Manga Temple family, .ZIP
Jugend font, .TTF
Mutlu Ornamental font, .TTF


Part I | Part II | Part III | Part IV | Part V

This comic will never break the fourth wall.
Everything on this site is under Copyright © 2005 unless otherwise noted. All rights reserved.

Index | People | Background | Graphics and Arts | Extras | Archives | Comments | Mayor | Commissions | Links