VectorPaint folded ribbons: show folds through stacking

English translation of the Chinese original, translated on 2026-10-26. Original publication dates, attribution, code and version notes are retained.

A ribbon can suggest depth through a few well-arranged shapes. Practise the front, folds and tails of a fictional title ribbon. Draw the paths manually rather than relying on a folding template, checking both geometry and lettering.

Break the ribbon into five parts

Use a 1000 by 500 pixel canvas with a central front, two folds and two tails. Determine the front width from the title and its insets. Start in grey values and with similar tail lengths. Test the short title before drawing so the ribbon does not force lettering into a distorted fit.

Draw the closed front shape

Draw a rectangular or gently curved closed front with no stroke initially. Keep the top and bottom curve directions compatible and use few nodes. Leave enough width at both ends for folds. Name the front and keep it above the tails, which can extend underneath to create clean overlaps.

Use darker fold faces

Add small triangular or quadrilateral fold faces behind each end, connecting the front edge to the tail. Start one value darker and inspect their direction. Keep them smaller than the front. When moving vertices, check adjacent seams and allow intentional underlap rather than using heavy outlines to hide disconnected corners.

Align tail notches with the ribbon direction

Draw closed tails with simple two-edge notches. Tilt them slightly downward if helpful while keeping their band width related to the front. Hide the front to inspect closure, then restore it and compare visible tail areas. Visual balance depends on what remains visible, not merely each path’s full bounding width.

Place editable lettering within the front

Inset a short editable title within the front. Horizontal text may be clearer than curved text; test any text-on-path version in a separate copy. Lettering does not automatically deform with the ribbon. For a longer title, edit wording or widen the front rather than stretching every component. Keep text separate for language changes or an unlettered version.

Test the folds with one colour family

Apply three values from one colour family and hide the text to judge depth. Fix fold positions and tail overlap before increasing contrast. Save the original, then inspect exported corners and seams against light and dark backgrounds. Handle background objects explicitly for transparency. Change one proportion at a time when comparing a narrower variant.

Test a longer ribbon title

Double the title length in a copy and widen only the front, moving tails to their new joins while preserving fold size. Compare that with a shortened title on the original width. Avoid distorting lettering to retain every word. For languages, inspect long words and punctuation rather than assuming equal character counts mean equal space. Preserve editable structure and text.

Fix gaps through geometry first

Inspect shared endpoints and stroke boundaries for fold gaps rather than hiding them by reducing the whole graphic. Visually centre a sinking title within the curved front, which may differ from mathematical centring. If a fold face disappears in export, adjust its width or contrast at the delivery size without rebuilding the ribbon.