Lettering Guidelines

This page is a guide and resource for volunteer letterers.

Lettering tasks are assigned to one volunteer at a time, on the assumption they will do a good job. There are no votes on alternate letterings to decide which version to use. If lettering work is unacceptable, I will either ask the volunteer to revise it or give the job to another volunteer.

Letterers must abide by the following rules:

Lettering is to be supplied as transparent images of the same size as the art, in PNG or Photoshop format.

Dialogue appears as a transparent overlay on top of the unadorned artwork. This is to allow simple switching between multiple different versions of the art, and multiple different versions of the dialogue. For maximal browser compatibility (to support IE6, in other words), we use transparent GIF images, as well as transparent PNGs. PNG supports alpha channel transparency, so this will take care of anti-aliasing. GIF does not support alpha channel partial transparency, so GIF dialogue images will necessarily not be anti-aliased. Converting from PNG/Photoshop to GIF loses information, therefore you must supply either a Photoshop or PNG file. I can do the conversion to GIF. If you design dialogue that makes deliberate use of alpha channel transparency for some visual effect beyond simple border blending, you must also create a separate GIF version so that it looks reasonable without anti-aliasing.

The lettering file you send should not include the artwork.

All I need is the lettering, in a transparent image (PNG) or layer (Photoshop).

Word balloon style is up to you.

You may use whatever graphical design you like for word balloons, as long as they are placed to avoid obscuring artwork details as much as possible.

Dialogue must be written in a suitable mixed-case lettering font.

You may use any font you like for dialogue, with the following conditions:

• It must be easily legible.
• It should be an appropriate style. Don't use Gothic Blackletter for a joke by a leading character - though you might use it for a vampire, say.
• It must be mixed case. I know many comics are traditionally lettered in all capitals, but I believe that's an outdated tradition that should be discarded.
• Do not use Comic Sans MS.

Some suitable free comic fonts are available from Blambot and daFont. Mighty Zeo 2.0 would be a good default if you have nothing you'd rather use.

Do not change the dialogue. Dialogue uses British/Australian English spellings.

You will be given dialogue that is final and correct, barring uncaught typos. You should copy and paste it into your graphics program to avoid transcription errors. Do not change British spellings to American ones. If you think something is a typo, ask for clarification.

No Comic Sans MS.

Repeat: No Comic Sans MS.

Word balloon tutorial

This tutorial is for Photoshop CS2, but I imagine it will work similarly on other recent versions of Photoshop. Other graphics programs should be able to do something similar.

This is my own process for making word balloons. You may have a different workflow or do particular steps in a different way - that's fine as long as it works.

1. Open the artwork.
2. Add a piece of dialogue text in your chosen font and size. This creates a new layer containing the text.
3. Select a contrasting colour and a shape tool (ellipse or rectangle, usually).
4. Draw the shape roughly surrounding the text - it's more important to get the size right than the position. This creates a new layer containing the shape.
5. Move the text layer above the shape layer.
6. If necessary, drag the text or shape layer to position the text in the middle of the shape. (Using the Move tool.)
7. Select both the text and shape layer (by ctrl-clicking the layers palette, or whatever method you normally use).
8. Merge the text and shape into a single layer (ctrl-E in Photoshop).
9. Drag the balloon to the best location relative to the underlying artwork.
10. Repeat the above steps for each word balloon that is needed. Leave each individual balloon as a separate layer, to allow fine tuning of positions. Tweak them if need be.
11. For each balloon: Use the pen tool to draw a shape for the arrow pointing from the balloon to the speaking character.
12. Merge all the pen shape and balloon layers. This creates a single layer with the all the speech balloons, text, and arrows in it.
13. Add a layer style to the layer, selecting the "Stroke" option. Pick a colour for the outline (usually black). I like to set it as a "Center" stroke at Size 1 pixel (2 pixels might suit a heavy lettering font). Leave the blending style as "Normal" and the Opacity as 100%. If you want different balloons to have different strokes, you can do them separately before merging the lot into one layer.
14. Save the final dialogue layer as part of the Photoshop file.
15. Select the dialogue layer only. Save as a PNG file. This saves just the dialogue layer into a transparent PNG suitable to overlay on the art.
16. If you wish, you can also save the dialogue layer as a transparent GIF.