Grit Designer

Grit Designer turns an image or video into a pixelated, dithered or retro-styled render. It has 56 dithering algorithms, 75 preset color palettes plus your own, pixel shapes including ASCII characters, CRT and VHS effects, print textures, decorative overlays and animated glitch effects. Everything runs in your browser.

Open it from the Pixel Studio home page, or go to pixelstudio.oddomens.com/grit-studio/.

Load an image or video

1. Drag a file onto Upload Source Content, or click Upload File and pick one.
2. The canvas shows the result, and the status bar shows the file name and size.

To switch to a different file later, click the upload button at the top of the left panel.

Type	Formats
Images	Any image format your browser can open, such as PNG, JPEG, WebP and GIF (first frame).
Videos	MP4, WebM and MOV, if your browser can play them. Video plays muted.

When a file loads, Grit Designer picks a starting PIXEL BLOCK SIZE that keeps the preview responsive. Images wider than 1,280 pixels start with a smaller block size.

The workspace

• Left panel: the logo, the action buttons, and the CANVAS & LAYOUT, DITHER SETTINGS, PIXELATE SETTINGS and COLOR CONTROLS sections.
• Center: the canvas, with a toolbar on top and a status bar below.
• Right panel, EFFECTS & OUTPUT: decorative elements, gradient map, alpha keying, effects, warp, analog, texture, glow and motion sections.

Action buttons

Button	What it does
Upload	Opens a new image or video.
Randomize	Picks a random algorithm, palette, resampling method, pixel shape, pixel gap, levels and gamma.
Save Preset / Load Preset	Opens Manage Presets. See Presets.
Export	Exports the result. See Export.
Export as .TXT	Appears when PIXEL SHAPE is ASCII Characters. Downloads the ASCII art as a text file.
Settings	Opens Settings.

Canvas toolbar

Control	What it does
Undo / Redo	Steps back or forward through your changes.
+ / -	Zooms in or out.
100%	Resets zoom and position.
Before / After	Splits the canvas into the original (BEFORE) and the result (AFTER). Drag the divider to compare.

You can also scroll to zoom (10% to 800%). Hold Space and drag, or drag with the middle mouse button, to move around the canvas. Dragging with the left mouse button moves your image inside the canvas.

Working with sections

Each section has a checkbox in its title to turn it on or off, and a reset button that returns all of its controls to their defaults. Double-click any slider to reset just that slider.

Canvas & Layout

Control	Options
CANVAS SIZE	Match Media (Auto), 1080 × 1080 (Square), 1080 × 1350 (Portrait), 1080 × 1920 (Story/Reels) or 1920 × 1080 (Landscape).
MEDIA SCALE	10–500%.
PAN X / PAN Y	Moves the image inside the canvas, -2000 to 2000 px.
FIT / FILL / CENTER	Fits the whole image in the canvas, fills the canvas, or centers the image. FIT and FILL apply to the fixed canvas sizes.

Dither Settings

Dithering only applies when COLOR CONTROLS is turned on, because it needs a palette to dither to. COLOR CONTROLS is off by default.

Control	Options
ALGORITHM	56 algorithms in five groups, listed below. Default: Floyd-Steinberg (Balanced).
DITHER ANGLE	0–360°. Shown for ordered, pattern and halftone algorithms.
HALFTONE SHAPE	Circular Dots, Engraved Lines (Scanlines) or Hatched Crosses. Shown for Halftone Dot Screen and CMYK Offset Pop-Art Halftone.

Group	Algorithms
Error Diffusion (Standard)	Floyd-Steinberg, False Floyd-Steinberg, Stucki, Stucki Lite, Atkinson, Burkes, Jarvis-Judice-Ninke, JJN Lite, Sierra-3, Sierra Two-Row, Sierra Lite, Fan, Shiau-Fan 1, Shiau-Fan 2, Steinberg Simple
Error Diffusion (Serpentine)	Serpentine versions of all 15 above, which alternate direction on each row
Ordered & Custom Matrices	Bayer 2x2, 3x3, 4x4, 8x8, 16x16 and 32x32; Clustered Dot 4x4, 8x8 and 16x16; Diagonal Ordered 4x4 and 8x8; Horizontal Scanlines 4x4; Vertical Scanlines 4x4; Crosshatch Grid 4x4; Circular Spiral 8x8; Blue Noise
Specialty & Screen Halftones	Halftone Dot Screen, Halftone Line Screen, Halftone Square Screen, CMYK Offset Pop-Art Halftone, Glitch Scanlines Dither
Noise & Standard Thresholds	Interleaved Gradient Noise (IGN), Uniform White Noise, Gaussian White Noise, Randomized Coordinate Jitter, Posterize (No Dither)

Pixelate Settings

Control	Options
PIXEL BLOCK SIZE (px)	1–64. The size of each pixel block. Larger blocks give a chunkier look and render faster.
RESAMPLING METHOD	Nearest Neighbor keeps edges crisp. Bilinear (Smooth) blends them.
PIXEL SHAPE	Standard Squares, Round Circles, Diamond Grids, Triangle Grids, Horizontal Lines, Vertical Lines, Hatched Crosses, Checkerboard Grid, Romantic Hearts, ASCII Characters, Lego Block, Honeycomb Hexagons or Twinkling Stars.
ASCII CHARACTER RAMP	For ASCII Characters. The characters to use, from darkest to brightest. Default: .:-=+*%@#.
PIXEL SPACING / GAP	0–95%. Space between blocks. Not used for ASCII.
CORNER RADIUS	0–50%. Rounds the corners of Standard Squares.
GAP BACKGROUND	The color shown in the gaps.
SOLID BACKGROUND LAYER	Fills the background with BACKGROUND COLOR.

Color Controls

Turn on COLOR CONTROLS to reduce the image to a palette and apply dithering.

Control	Options
PALETTE COLOR SWATCHES	The colors in the current palette.
COLOR PALETTE	The palette to use. See the list below. Default: Monochrome (1-bit B&W).
INDEXED COLORS LIMIT	2 up to the number of colors in the palette. Uses only the first colors of the palette.
DITHER SPREAD	0–150. How strongly dithering spreads.
HUE SHIFT	-180 to 180.
SATURATION ADJUST	-100 to 100.
CONTRAST	-100 to 100.
INVERT COLOR CHANNELS	Inverts the colors.

Palettes

Group	Palettes
Dynamic Tools	Extract from Image (K-Means): builds a 16-color palette from your image and opens it in the custom palette builder. Custom Palette: your own colors.
Monochrome & Grayscale	Monochrome (1-bit B&W), Grayscale (4 levels), Grayscale (8 levels)
Nintendo Handhelds & Consoles	Gameboy Classic DMG, Gameboy Pocket, Gameboy Light, Gameboy Color, NES, SNES
Sega & Retro Consoles	Sega Master System, Sega Game Gear, Sega Genesis / Mega Drive, Atari 2600, ColecoVision, Intellivision
Classic 8-bit & 16-bit Computers	Commodore 64, Commodore 64 Peachy, VIC-20, Apple II, Macintosh OS System 16, Amiga OCS, ZX Spectrum, MSX, BBC Micro, Amstrad CPC 464, SAM Coupé
IBM PC & VGA Standards	CGA Mode 4 (High), CGA Mode 4 (Low), CGA Cyan & Red, EGA Standard 16, Windows 95 Standard VGA
Modern Pixel Art Systems	PICO-8, PICO-8 Deluxe, Sweetie 16, DawnBringer DB16, DawnBringer DB32, ENDESGA 16, TIC-80, Aurora 32, Bubblegum 16, Forest Moss
Aesthetic & Designer Themes	Cyberpunk Sunset, Toxic Cyber, Vaporwave Sunset, Vaporwave Dream, Dracula, Nord, Gruvbox, Solarized Dark, Solarized Light, Monokai Pro, Autumn Bronze, Cool Glacier, Retro Phosphor CRT, Retro Amber CRT
New Aesthetic Palettes	Synthwave 8, Nintendo DS, Macintosh LC, CGA Warm, Commodore Plus/4, EGA Vibrant, Lospec 500, Oil 6, Resurrect 64, Zughy 32, Dreamscape 8, Midnight City, Copper Rust, Emerald Lake, Candy Apple, Retro Neon, Sepia Tones, Arctic Frost, Dusk Purple, Velvet Rose
My Saved Palettes	Palettes you've saved.
Custom Palette Builder	[ Custom Palette Builder ]

Build your own palette

1. Choose [ Custom Palette Builder ] in COLOR PALETTE.
2. Click a swatch to change its color.
3. Click + (or press +) to add a swatch. Select a swatch and click - (or press Delete) to remove it. A palette needs at least 2 colors.
4. Drag swatches to reorder them.
5. Click the save button (Save this palette theme) and enter a name. It appears under My Saved Palettes.

To delete a saved palette, select it and click the trash button (Delete this saved palette).

Dragging swatches in a built-in palette copies it into the custom palette builder first. Clicking a swatch in a built-in palette changes that color until you reload the page.

Import a palette file

Before you load an image, drag a palette file onto Upload Source Content:

• A GIMP palette (.gpl).
• A .hex file with one hex color per line.
• A PNG with "palette" in its file name. Each distinct color becomes a swatch.

Grit Designer reads up to 256 colors and adds the palette under Imported. Imported palettes last until you reload the page. Save one with the save button to keep it.

Effects & Output

Decorative Elements

Scatters graphic elements over the canvas.

Control	Options
ELEMENT STYLE	60 styles, including Abstract Geometry, Tech Wireframes, Halftone Accents, Faux UI / Code, Stars & Sparkles, Barcodes, Circuit Boards, Windows 95 UI, Isometric Cubes, Topographic Lines, Kanji Glitch, Tetris Blocks and UFO Saucers.
DENSITY	1–100%.
SCALE	10–300%.
LAYOUT SEED	1–1000. Each number gives a different arrangement.
ELEMENT COLOR	The color of the elements.
ELEMENT MOTION	Static (None), Drift Float, Spin Rotation, Pulse Scaling, Corrupt Jitter, Orbit Path or Sine Wave Float.
RENDER ABOVE EFFECTS (BYPASS)	Draws the elements on top, unaffected by dithering and effects.

Pre-Gradient Map

Maps the image's shadows, midtones and highlights to three colors before dithering.

Alpha Keying

Makes one color transparent. Set the KEY COLOR and a TOLERANCE (0–100%). Export a PNG to keep the transparency.

Effect Controls

Control	Range
LEVELS (BLACK/WHITE)	Black point 0–60%, white point 40–100%.
MIDTONE GAMMA	0.2–3.0.
SHARPEN STRENGTH	0–100. Default 15.
DENOISE / BLUR	0–10.
DITHER BLEND STRENGTH	0–100%. Blends the dithered result with the original.
TEMPORAL MOTION BLEND	0–100%. For video, blends each frame with the previous one to reduce flicker.

Warp & Lens

Control	Options
NOISE WARP STRENGTH	0–80.
CRT BARREL DISTORTION	0–100%. Curves the image like a CRT screen.
WARP SCALE (SMOOTHNESS)	1–100.
VIGNETTE STRENGTH	0–100%.
LIGHT LEAK STRENGTH	0–100%, with LEAK CORNER and LEAK COLOR.

Analog Effects

Control	Options
CHROMATIC ABERRATION	0–15.
CRT SCANLINES	0–100%.
SUBPIXEL PHOSPHOR MASK	None, Aperture Grille (Trinitron), Shadow Mask (Triad) or Slot Mask (Staggered), with MASK OPACITY.
VHS CHROMA BLEED (Y/C)	0–100%.
VHS TRACKING NOISE	0–100%.
PHOSPHOR BLEED	0–100%.
NOISE TYPE	Analog TV Static, Toner Speckles (Print), Paper Fiber Grain or Porous Ink Bleed, with NOISE & TEXTURE STRENGTH.

Texture & Print

Control	Options
BIT CRUSH DEPTH	1–8 bits per channel.
PIXEL GRID STYLE	None, LCD Screen Grid, CRT Aperture Grille, LED Matrix Cells or Dot Matrix Print, with GRID CELL SIZE (2–32 px) and GRID OPACITY.
DUOTONE / RISOGRAPH	Two-ink print look, with SHADOW INK and HIGHLIGHT INK colors.

Glow Effects

RETRO GLOW STRENGTH (0–100%) and GLOW SIZE (1–40 px) add a bloom around bright areas.

Motion Effects

Animated glitch and distortion effects. This section appears once you've loaded a file. Tick its checkbox to start the effect.

Control	Options
EFFECT	37 effects in groups: VHS / Analog, Glitch, Datamosh, Warp / Distort, Extreme, Cascade / Ripple, Wildcard, Advanced Weird / Glitch and Extreme Data Mosh (New). Examples: Row Smear (VHS), RGB Channel Shred, Pixel Sort, Datamosh (P-Frame Drift), Melt Drip, Matrix Digital Rain, Shockwave Ripple, Kaleidoscope Fractal and Cyberpunk Glitch Storm.
INTENSITY	1–100.
SPEED	1–10.
DURATION	2–20 seconds. The length of the exported video for still images.

Video

When you load a video, controls appear over the canvas: play/pause, the timeline (drag to scrub), the current time and length, and a loop toggle. Every setting applies to each frame as it plays. On slower computers the preview drops frames to keep up.

Export

Click the export button. What you get depends on what's loaded and your DEFAULT EXPORT FORMAT in Settings:

You've loaded	What's exported
An image, without motion effects	A PNG, or an SVG if the default export format is SVG Vector Image.
An image, with MOTION EFFECTS on	You're asked to choose. OK records a video for the motion DURATION. Cancel saves the current frame as a PNG.
A video	You're asked to choose. OK records the whole video from the start. Cancel saves the current frame as a PNG.

• PNG is the canvas at full resolution, with transparency if you used alpha keying.
• SVG draws each pixel block as a vector shape: circles for Round Circles, characters for ASCII Characters, rounded squares when you set a corner radius, and squares for every other shape.
• TXT (from Export as .TXT) is the ASCII art as plain text, one line per row of blocks.
• Video is recorded in real time at 30 frames per second, so it takes as long as the clip. A progress overlay shows while it records. Click CANCEL EXPORT to stop. Videos have no sound.

Videos are MP4 when your default format is MP4 Video Loop and your browser can record MP4. Otherwise they're WebM. GIF export isn't available in the web version, so choosing GIF Loop gives you a WebM video.

Presets

A preset saves all of your settings, including a custom palette if you're using one.

Click Save Preset or Load Preset to open Manage Presets:

• Save Current Settings As Preset: type a name and click Save. Saving with an existing name replaces that preset.
• Saved Presets: each preset has buttons to load it, export it as a .json file, or delete it.
• Export All Presets downloads all of your presets in one .json file.
• Import Presets loads presets from one or more .json files. Presets with a name you already have are skipped.

Presets and saved palettes are stored in your browser. Export them to keep a copy or move them to another browser.

Settings

Click the settings button.

General:

Setting	Options
SIDEBAR LAYOUT	Standard (All Expanded), Sticky Headers (section titles stay in view as you scroll) or Accordion Panels (click a section title to collapse or expand it).
INTERFACE ACCENT COLOR	Monochrome White (Default), Retro Amber Phosphor, CRT Terminal Green, Cyberpunk Pink & Cyan or Arctic Ice Slate Blue.
DEFAULT EXPORT FORMAT	MP4 Video Loop, GIF Loop, PNG Still Image or SVG Vector Image. See Export.

These settings are remembered in your browser. User Guide has a short guide to the main controls.

Keyboard shortcuts

Shortcut	Action
Cmd+Z / Ctrl+Z	Undo
Cmd+Shift+Z / Ctrl+Y	Redo
Scroll wheel	Zoom
Space + drag	Move around the canvas
+	Add a swatch (custom palettes)
Delete or Backspace	Remove the selected swatch (custom palettes)