When Tap-to-Fill Leaks: Fixing a Fill That Went Everywhere

A fill that floods the whole drawing is not a broken tool. It is a gap in the line art, and the repair takes about thirty seconds once you know where to look. The same is true of the three other ways a tap-to-fill goes wrong. What follows is a diagnostic order for all four, written for the moment you are staring at a ruined page and deciding whether to start it again.

Most coloring advice is about doing things well. Very little of it is about recovery, which is a shame, because a flooded fill is one of the most common reasons a beginner closes a piece and never reopens it.

Undo first, diagnose second

The instinct is to work out what happened before touching anything. Resist it. Undo is the only recovery that costs nothing and restores the page exactly, and every second you spend investigating is a second the wrong colour stays committed.

This is a general interface principle rather than a coloring one. The Nielsen Norman Group lists user control and freedom among its ten usability heuristics precisely because people act by mistake constantly and need a clearly marked exit that does not require an extended process. Undo is that exit. Use it, then investigate a page that looks the way it did before the mistake.

If undo is unavailable because the fill has already been committed, skip to the repair sections below. But try it first, every time.

Name the failure before you fix it

Four things go wrong with a fill, and at arm's length they look similar. They need completely different responses.

The fill escaped. You tapped inside the hair and the whole background changed colour. The region is not closed.

The fill stopped short. Your colour sits inside the shape but a thin pale line survives between it and the outline. This is anti-aliasing, not a fault.

The fill landed in the wrong region. The colour went where you tapped, but where you tapped was not the region you meant, usually because two shapes meet at a point too small to distinguish at the zoom level you were working at.

The fill covered something you wanted. You filled over an area you had already detailed by hand, and the detail is gone underneath.

Work out which one you have before reaching for a tool. The first three have cheap fixes. Only the fourth genuinely costs you work, and only when undo is gone.

A leaked fill means a gap, and the gap is tiny

A fill spreads outward from the point you touched across connected pixels that match, and halts at anything that does not. That is the whole mechanism, and it explains the failure completely: if the outline enclosing your region has a single-pixel break anywhere along its length, the spread passes through it and keeps going.

The break is almost never in the middle of a long clean line. Check these places, in this order:

1. Hair tips and the ends of tapered strokes, where the artist thinned a line to nothing and the last pixel or two fell below full opacity.
2. Fingers, ribbon ends and any narrow shape where two lines converge at a sharp angle.
3. Places where two lines nearly touch but do not, which read as closed at normal size and are visibly open at high zoom.
4. Deliberate openings, because some line art styles leave outlines broken on purpose for a lighter look.

Close the break with the brush at the smallest size that reaches across it, then fill again. The brush stroke will be invisible at viewing size. This is worth doing even if you are not going to fill that region immediately, because the gap does not heal on its own.

The mechanism behind the pale seam, and the reason a fill can leave a halo even in a perfectly closed shape, is covered in more depth in our guide to digital coloring techniques. The short version is in the next section.

The pale seam is rendering, not damage

Smooth-looking lines are drawn with partly transparent pixels along their edges so the line does not look like a staircase. The W3C's SVG specification describes this in its rendering properties: the shape-rendering property exists partly so an author can request crisp edges by turning anti-aliasing off, which tells you it is on by default nearly everywhere else.

A fill replaces pixels that match what you tapped. Those semi-transparent blend pixels do not match, so the fill stops one step short of the line and leaves a ring of the original blend colour. Against a pale fill it reads as a visible seam. Against a dark fill it is nearly invisible.

Three responses, in order of how often they are the right one:

• Leave it. At the size a phone displays the finished page, most seams disappear.
• Brush over it. Zoom in, pick the same colour, and run a small brush along the inside of the outline.
• Bias the region darker. If you know an area will show its edges, choosing a darker colour for it hides the seam without any extra work.