For those who don’t know the tool: Levels is a free browser utility for quick grayscale map prep that can feed any DCC or engine, with code hosted on GitHub by artofpilgrim.
A small tool for the most common annoyance
Levels positions itself as a texture alpha studio in the browser. You drop in an image, dial in a black and white channel mix, adjust brightness and contrast, shape the result with a levels curve, then finish with a perspective or rectangular crop. After that, you copy to clipboard or download a PNG. This kind of workflow hits daily production reality, especially when you need a quick mask for foliage, decals, grime breakup, or anything else that starts life as a photo and ends up as a grayscale control map for shading. It also pairs neatly with a texture painting pass later, when a rough mask graduates into something worth polishing.
Channel mixing, then levels, then stop touching it
The channel mixer in Levels offers six color sliders: reds, yellows, greens, cyans, blues, and magentas. It includes presets for Default, High contrast, Dark sky, Infrared, Red filter, and Stark grunge. The goal stays simple: separate subject from background quickly, then lock in contrast.
Brightness and contrast sit as a linear legacy Photoshop pre-stage applied before Levels. The levels panel shows a histogram and gives input shadow, midtone, and highlight handles plus output black and white handles. Keyboard navigation covers Tab to focus a handle, arrow keys to nudge, and Shift plus arrow for bigger steps.
If you need to keep colour instead of converting to black and white, colour mode bypasses the conversion and applies Levels, brightness and contrast per channel. Invert sits there too, because every mask workflow eventually asks you to flip it and see if your brain calms down.
Crop tools that fix your reference photo lies
Rectangular crop supports free or locked aspect ratios: 1:1, 4:5, 5:4, 16:9, 9:16, 3:2, and 2:3. Holding Shift while dragging forces 1:1. Perspective crop lets you drag four corners of a quad to deskew a region into a rectangle. It uses bilinear sampling, includes a rule of thirds alignment grid, shows live output size, and supports 1 pixel and 10 pixel keyboard nudging. It also composes with rectangular crop, and Reset preserves the pre perspective crop.
That combination makes Levels useful beyond the obvious leaf cutout. It is a quick way to extract alhpa style grayscale sources from angled reference shots that you would otherwise fix in a heavier editor, then stash into a texture library for reuse.
Shortcuts and export that respect your time
Levels supports a real time preview. Hold Space to compare against the original image before processing, after any crop or perspective. Inputs can arrive via drag and drop, paste from clipboard, or open from disk. Exports can go straight to clipboard or to a PNG download. Exports render from the current settings even when the preview defers for responsiveness.
Shortcuts include Space for compare, I to toggle invert, Ctrl or Command plus C to copy, and Ctrl or Command plus S to download PNG. Enter and Escape apply or cancel inside crop or perspective mode. Double click resets a slider to default.
The repository also states that inputs over 4096 pixels on the long edge get downscaled with a toast notice. That limit matters if you expect full resolution scan handling, so treat it as a deliberate constraint, not a surprise feature.
Under the hood, it stays refreshingly unprecious
The GitHub repository describes a no-build step setup. It loads React 18 and ReactDOM from a CDN, and keeps the rest as plain JavaScript split into three ordered script tags.
The file layout is a index.html as shell that links CSS and the three JS files, styles.css for styles, image.js for image processing functions and presets, components.js for UI components, and app.js for the app component and DOM boot. The three JS files communicate via a window.Levels namespace with image.js populating math and data first, then components.js reading it and adding panels, then app.js rendering.
Running locally opens index.html in a modern browser, with the file protocol working for sibling script files. For touch pointer and clipboard testing, serving over HTTP using python -m http.server from the repo root is advisable
This is the part that makes it easier to keep a known good utility around. The tool does not demand a build chain just to exist, which is exactly what you want from a graysacle helper app that should still run when the rest of your stack changes.
Thomas Pilgrim Butters released Levels this week, and describes it as a simpler alternative to opening Adobe Photoshop for alpha textures, with support for alpha masks, height or roughness maps, and stylised monochrome plates from photo references. Thomas Pilgrim Butters is Lead Weapon and Prop Artist at Facepunch and an instructor at Gnomon.
https://artofpilgrim.github.io/levels/
https://github.com/artofpilgrim/levels
