Knockout Text
Knockout text punches your headline straight through an overlay image, revealing the photo beneath the letterforms. It's the bold, typographic hero treatment you see on campaign banners and landing pages — and in picmagIQ you can build it in the browser and export it as a WebP ready for any CMS.
You start with a base image and lay an overlay image on top of it. Knockout text then cuts your headline out of that overlay — wherever a letter sits, the overlay is erased and the base image shows through. The type itself becomes a window onto the photo underneath.
Because the effect is rendered into the pixels and exported as a finished WebP, it isn't a font trick or a CSS blend mode that breaks across browsers. The knockout is baked into the image file — it looks identical everywhere you publish it, and it drops into any CMS media library like any other image.
Type the word or phrase you want to cut through the overlay. Short, bold headlines read best — a brand name, a campaign word, a single statement.
Scale the type up until the letterforms are large enough to reveal a meaningful slice of the image beneath them. Bigger type shows more of the photo.
Choose regular, bold, or heavy. Heavier weights open up wider letterforms, which show more of the underlying image — the heaviest weight is the strongest knockout effect.
Open or tighten the space between characters to balance how much overlay sits between letters and how the image reads across the word.
Slide the text anywhere on the canvas to line the letterforms up with the part of the image you want showing through.
Knockout text is how marketing teams give a hero image a typographic identity — a brand name filled with a product photo, a campaign word revealing a scene, a banner that reads as designed rather than dropped in. Combine it with compositing to build the underlying image from multiple subjects first, then punch your headline through the result — all in the browser, all exported as one WebP.