grunge up your photos

Add distressed, weathered grunge texture to any image. Perfect for band flyers, zines, and streetwear graphics. Runs in your browser.

What you get

Grunge is what a design looks like when it has been through something. Photocopied at a corner shop, taped to a wall, rained on, photocopied again. The aesthetic is a reaction against surfaces that look untouched, and it works because damage carries information: a torn edge implies a hand, a blown out photocopy implies a fifth generation copy, a misregistered stamp implies speed. The failure mode is applying texture without implying any of that.

Texture has to have a cause

The difference between grunge that works and grunge that looks like a filter is whether the damage is plausible.

Real wear follows physics. Paper creases where it was folded, so the crease runs edge to edge in a straight line, not in a decorative arc across the middle. Ink fades where a hand rested. Photocopier noise clumps in the darkest regions because that is where the toner saturates. Dust collects in the corners of a scanner bed. Edges tear along the grain.

A texture overlay applied at uniform opacity across the whole canvas has no cause and reads as decoration. The same texture, masked so it concentrates at the edges and in the shadows, reads as a physical object.

The most useful discipline is to decide what happened to this piece of paper before you start, then apply only the damage consistent with that story.

The photocopier is the core move

Most of what people mean by grunge is a photocopy chain. A photocopier does three things to an image, and reproducing them gets you most of the way there.

It crushes tone. A copier has almost no midtone range, so grey areas either drop to white or fill in to black. Each successive generation crushes further, which is why fifth generation copies are all black and white with almost nothing in between.

It adds structured noise. Toner clumps, the drum leaves streaks in the feed direction, and the platen glass carries dust that reprints every time.

It loses registration. Paper skews slightly on the glass, so successive copies drift and rotate by a fraction of a degree.

In Bitgrain you build this with high contrast, a coarse dither or halftone to break the tone into hard dots, grain, and a slight rotation. Stack the chain twice and it reads as a copy of a copy.

Restraint, contrast and legibility

Grunge fails most often by being applied everywhere at once. If every element is distressed, nothing reads as distressed, because the eye recalibrates and treats the noise as the baseline.

Keep something clean. A crisp piece of type against a wrecked background works. Wrecked type against a wrecked background is illegible, and illegible is not the same as raw.

Preserve the tonal anchors. However much texture you add, the piece still needs a genuine black and a genuine white somewhere, or it collapses into a grey wash. This is the most common failure in heavily textured work, and it is why so much amateur grunge design looks muddy rather than harsh.

Type takes distress badly at small sizes. Above roughly forty points, texture reads as character. Below about fourteen points, it just fills in the counters and makes the word hard to read.

Building it in the browser

Bitgrain's grunge pipeline is a stack of deterministic effects rather than a single preset, which means you can dismantle it and rebuild it for a particular piece.

Grain adds monochrome noise at a scale you control. Halftone and dither break continuous tone into hard dots. Newsprint finish adds the ink-on-paper spread that keeps output from looking like a screenshot. Contrast and levels do the tonal crushing. Layer opacity and masks control where the damage lands.

Because every stage is deterministic, a texture treatment you build for one poster can be saved and applied to the next twelve without drifting, which is what you need if the work is a series rather than a one-off.

Common questions

Why does my grunge design look fake?

Usually because the texture is applied uniformly. Real wear concentrates at edges, folds and shadows. Mask the texture so it has a plausible cause and it stops reading as an overlay.

How do I keep type readable under heavy texture?

Keep at least one element clean, and do not distress type below about fourteen points. Texture fills in the counters of small letters and destroys legibility without adding character.

How do I get a photocopy look?

Crush the midtones with hard contrast, break the remaining tone into dots with a coarse dither or halftone, add grain, and rotate by a fraction of a degree. Run the chain twice for a copy of a copy.

Is the texture generated or is it a stock overlay?

It is generated by deterministic algorithms in your browser, so the same settings always give the same result and nothing is uploaded. That also means a treatment stays consistent across a whole series of prints.

Related tools