Overlay System
Text over image needs a reading surface. The gradient is the standard tool: digital as a semi-transparent gradient, print as an opaque solid block.
Semi-transparent gradient from opaque to transparent. Three stops, one direction. The image remains visible.
Gradient as Reading Surface
HEADLINE TEXT
Subline directly on image
Color Logic
| Image character | Overlay color | Text color |
|---|---|---|
| Dark image | No overlay | White |
| Standard | #181818 → Transparent | White |
| Light image | #FFFFFF → Transparent | Black (#181818) |
Gradient (3 Stops)
Overlay Width
Fade Zones: No-Gos
- Fade zone must not cover faces
- Fade zone must not cut through product logos
- Fade zone must not emphasize hard image edges
- Always place fade in calmer image areas, when in doubt, make the overlay wider
Edge Darkening on Full-Bleed Images
A second variant of the overlay system, independent from the readability gradient above: a weak, soft gradient at the top and/or bottom edge of a full-bleed image. It should not stand out, it only keeps edge elements such as the wordmark, lockup, sender line or fine print legible. The image remains the carrier, no bar, no solid block, no cropping of the motif in favor of a flat area.
Distinction from the Readability Gradient
| Feature | Readability Gradient | Edge Darkening |
|---|---|---|
| Purpose | Readable area for headline and subline | Keep edge elements legible |
| Direction | horizontal, from the text side into the image | vertical, from the page edge into the image |
| Effect | visible, part of the composition | as invisible as possible, image looks untouched |
| Opacity | fully opaque in the text area | weak, see guideline values |
| Structure | 3 stops with hold zone | continuous curve without hold zone, no visible edge |
Guideline Values
Start low: opacity at the page edge 0.40 to 0.50 (TP Black #181818), only increase if the measured contrast of the edge elements is not enough.
Upper limit at the edge about 0.85. Above that the gradient reads as a bar.
Height per edge about one third of the image height, the sum of both gradients clearly below the image height. An untouched zone of the image must remain.
Symmetry: change both edges together and keep them at a similar level at their edge. Opening one edge alone reads as an error.
Color: black on medium and dark images, white (#FFFFFF) on very light images. Never yellow.
Check before delivery: measure the contrast of the edge elements, do not estimate, and review the result at original size.
For print, the edge darkening is baked into the image: image and gradient are flattened into a single pixel layer, the print PDF contains no transparency objects. Test print before rollout, because weak gradients are more likely to get lost in print than on screen.