Darkury Header Machine

Make your first header in about a minute:

1. Pick a size. Choose a preset under Canvas size — Twitter/X header, YouTube banner, featured image, and more — or enter a custom size.
2. Add a layout collage. Click + Layout collage, then choose a layout from the dropdown in the right panel (say, “Large left + 3 stacked right”).
3. Fill the cells. Click + Add photo(s) and select several photos at once — they fill the cells in order. Drag inside a cell to reposition its photo.
4. Add words. Use the Title and Subtitle boxes under Title, overlay & frame in the left sidebar, or add a free-floating + Add text layer.
5. Download. Choose PNG, JPG or WebP under Export image and press Download.

The Header Machine has three areas: The left sidebar holds things that apply to the whole header. The right sidebar holds everything about whichever layer you have selected. The layer’s name, order, transform, style and effects are all there.

Button	What it does
+ Photos	Adds one or more photos, each as its own layer. They fill their frame (Cover) and cascade slightly so you can see them all. Any amount.
+ Logo	Adds images at a smaller size with Contain fit, so the logo is never cropped. Transparent PNG/SVG logos keep their transparency.
+ Add text	Adds a text layer. Double-click it on the canvas to type directly on it.
+ Add pattern	Adds a procedural pattern layer (24 styles). See Patterns.
+ Layout collage	Adds a multi-photo grid layer. See Layout collage.

You can also drag and drop image files onto the Photos and Logo boxes. If you have a layout collage on the canvas, dropping files onto the canvas fills the collage cell under your cursor. Dropping several files at once fills the cells in order.

Selecting, moving, resizing, rotating

• Select a layer by clicking it on the canvas or in the Layers list.
• Move by dragging it. It snaps to the canvas center and to the centers of other layers, and a dashed guide line shows when it does.
• Resize by dragging a corner handle. (You can also type exact Width and Height in the right panel.)
• Rotate by dragging the round handle above the top edge, or use the Rotation slider.
• Multi-select with Shift + click. Selected layers then move together.

The Layers list

The top layer in the list is the front-most. Each row has an eye (show/hide), ▲ ▼ (move forward/back), a duplicate button and a ✕ (delete). You can also use the Layer order buttons in the right panel: Bring to front, Send to back, Forward, Backward.

Opacity and blend modes

Each layer has an Opacity slider and, for photos, patterns and collages, a blend mode: normal, multiply, screen, overlay, darken, lighten, color-dodge, hard-light, difference and luminosity. Try multiply for textures and screen for light leaks.

A layout collage is one layer that splits the canvas into several photo cells (up to 16), with a gap between them. Use it to make a multi-photo header quickly, and resize the cells any way you like while you design.

Create one

1. Click + Layout collage in the left sidebar. It’s added at the back of the stack.
2. With the collage selected, open the Layout dropdown at the top of the right panel and choose a layout. The number in brackets is how many cells it has.

Fill the cells

• Click a cell on the canvas, or one of the Slot 1, Slot 2 … buttons, to select it. It gets a dashed outline. A ✓ on a slot button means it already has a photo.
• + Add photo(s) fills the selected cell. Pick several files at once and they fill the cells in order from Slot 1.
• Or drop photos straight onto a cell.
• Drag inside a cell to reposition its photo. Use Zoom (1×–4×) to crop tighter.
• Reset slot puts that cell’s zoom and position back. Clear slot removes its photo. Swap next swaps the selected cell’s photo with the next cell’s.

Collage-wide settings

• Gap and Gap color — the space and color between cells.
• Rounded corners — rounds every cell.
• Empty-slot color — the color shown in cells without a photo.
• Brightness, Blur, Black & white — applied to every photo in the collage.
• Opacity, blend mode, and per-layer finishing effects work like any other layer.

Resize cells while you design

With the collage selected, small grips appear on every divider between cells. Drag a grip, or the divider line itself, to make the cells on either side bigger or smaller. The cursor turns into a resize arrow when you’re over a divider.

• A divider shared by several cells moves them all together — for example, the edge between a big cell and a whole stack of cells.
• A divider that sits inside one stack only moves within that stack.
• Cells can’t be shrunk below about 4% of the canvas.
• Each photo stays in its cell and re-crops to the new shape.
• Press Reset cell sizes to layout default to go back to the layout’s original proportions.

Build your own layout (custom recipe)

The last item in the Layout dropdown is Custom recipe…. It lets you describe any layout in one line of text. Choose a direction, then type comma-separated pieces in the form size:cells:

• Columns (default): each piece is a column. size is its relative width; cells is how many stacked cells it’s split into.
• Rows: each piece is a row. size is its relative height; cells is how many side-by-side cells it’s split into.
• cells can also be weights joined with +, like 3+1+1 — a tall cell above two short ones.
• Leave off :cells for a single cell, so 1 means 1:1. The maximum is 16 cells.

Recipe (columns)	Result
3:1, 2:4, 2:2, 1:1, 1:1, 3:1	Large cell · 4 stacked · 2 stacked · thin cell · thin cell · larger cell (10 cells)
1:3, 2:1, 1:3	3 stacked · wide center · 3 stacked (7 cells)
1:3+1, 1:1+3, 1:3+1	Three columns, each a big cell with a small one, alternating (6 cells)
1, 2, 1, 2	Four columns of different widths

For instance, the first recipe draws this:

3:1, 2:4, 2:2, 1:1, 1:1, 3:1

All 59 built-in layouts

Classic (13) More layouts (46) — mosaics, stepped stacks, strips, grids and zigzags.

The Featured-image extras panel in the left sidebar adds finished-looking text and framing over your whole design. These sit on top of every layer, and they’re off until you use them.

Section	What it does
Overlay	Darkens or tints the artwork so text reads well. Choose a color, a style (None, Gradient from bottom, Gradient from top, Flat tint) and a strength. With a collage present, the overlay sits directly over the collage and under your other layers.
Title	Big headline text. Pick a font (system fonts plus the Header Machine’s Google fonts), color, size, position (top / middle / bottom), alignment, UPPERCASE or as-typed, weight, and soft shadow, outline or both, with its own outline color. Long titles wrap automatically.
Subtitle	An optional line under the title with its own size and color.
Badge / watermark	Small text such as darkury.com pinned to any corner, with color and size.
Frame	A border around the whole image — choose a width and color.

Fit, zoom and pan

Cover crops the image to fill its box; use Zoom (100–400%) and Pan X / Pan Y to choose what shows. Contain shows the whole image without cropping — ideal for logos.

Transform

Opacity, rotation, exact width and height, Flip horizontal / vertical and blend mode.

Style

• Mask shape — Rectangle, Circle / oval, Heart, Star, Hexagon or Blob.
• Corner radius (rectangle only), plus a Make circular button.
• Border width and color, and a drop shadow toggle.

Filters

Filters apply to just that layer. Finishing effects (see below) can also be applied per layer.

Quick adjust

Double-click a photo or pattern on the canvas to open a small Quick adjust popover with the most-used tweaks: grayscale, colorize, brightness, contrast and saturation. Click ✕ or anywhere outside it to close.

Add text with + Add text. Double-click it on the canvas to type directly, or use the text box in the right panel.

Setting	Options
Font	Archivo Black, Anton, Bebas Neue, Oswald, Righteous, Bungee, Permanent Marker, Caveat, Pacifico, Dancing Script, Playfair Display, Abril Fatface, DM Serif Display, Space Mono, JetBrains Mono, Inter, Poppins, Montserrat, Special Elite, Creepster, Monoton, Press Start 2P
Size & weight	Any size; Regular, Bold or Black
Letter spacing	−4 to 30 px
Curve	−100 to 100 — bends text into an arc up or down
Color, opacity, rotation	Color picker, 0–100% opacity, −180° to 180°
Stroke	Outline with color and width
Shadow	Soft shadow with adjustable blur
Background pill	A colored box behind the text, with padding and corner radius

Pattern layers are generated, so they’re crisp at any size. Add one with + Add pattern, then choose a style: Each pattern has color and background color controls (with a transparent background option), density, thickness and angle. Gradient lets you choose linear or radial, and start and end colors. Patterns share the same transform, blend, mask, border, filter and effect controls as photos.

Keep your own textures, overlays, frames, brushes and SVGs in the Asset library. They’re saved in your browser, so they’re there next time you open the tool.

• Import folder — pick a folder; each subfolder becomes a category.
• Import files — pick files and choose a category for them. Supported: PNG, JPG, WebP and SVG.
• Click an asset to drop it onto the canvas as a normal layer.
• Hover over a thumbnail and use the small ✕ to delete it. Click a category name to collapse or expand it.

Size presets

Preset	Size (px)
Twitter / X header	1500 × 500
Tumblr header	1500 × 1500
YouTube banner	2560 × 1440
Facebook cover	820 × 312
Square	1080 × 1080
Link preview	1200 × 630
Featured image	980 × 450
16:9	1200 × 675
16:9 large	1600 × 900
3:2	1200 × 800
Portrait	1080 × 1350
Custom…	Any width and height from 50 to 6000

Background

• Canvas background color shows behind and around your layers.
• Transparent background makes the empty parts of the canvas see-through (export as PNG or WebP to keep that transparency).
• Corner radius rounds the corners of the whole canvas.

Quick arrange photos

Already added a pile of photos? Arrange as grid lays them out in the rows and columns you choose (with a gap), and Polaroid scatter tosses them down at playful angles. They’re just a starting point — every photo stays an independent layer you can adjust afterward.

Finishing effects give the whole design a cohesive look. They come in two flavors:

• Per-layer — in a selected layer’s right-hand panel.
• Global — in the left sidebar under Global finishing effects, applied over the whole flattened header, on top of any per-layer effects.

Effect	What it does
Vignette	Darkens (or tints) the edges. Adjust strength and color.
Duotone	Recolors the picture using a shadow color and a highlight color.
Color overlay	Washes a color over everything, with opacity and blend mode.
Split toning	Tints shadows and highlights different colors, with strength and balance.
Bloom / glow	A soft glow around bright areas.
Bevel / emboss	Raised, sculpted edges.
Old film	Vintage film look with grain and wear.
Glitch / RGB split	Digital glitch with separated color channels.
Outline glow	A glowing edge around shapes, with color, size and strength.
Film grain	Global only — adds grain over the whole header.

• File name — type a name for your file. The extension is added for you.
• Format — PNG (supports transparency), JPG (smaller files) or WebP (smaller files).
• Quality — a slider for JPG and WebP.
• Also export at additional sizes — tick any of the other presets to download extra versions at the same time. Extra sizes are letterboxed to fit, using the canvas background, and named with their dimensions (for example my-header-1200x630.png).
• Press Download.

Save and reopen

Save project (.json) stores everything — layers, photos, collage layouts and cell sizes, and effects — in one file. Use Load project to reopen it later and keep editing.

Undo and redo

Use the ↶ Undo and ↷ Redo buttons above the canvas, or the keyboard shortcuts. Each change is a step you can go back through.

Start over

Clear everything (at the bottom of the left sidebar) resets the canvas and removes all layers.

Shortcuts work when you’re not typing in a box. On a Mac, use ⌘ in place of Ctrl.

Keys	Action
Ctrl + Z	Undo
Ctrl + Shift + Z or Ctrl + Y	Redo
← → ↑ ↓	Nudge the selected layer(s) by 2 px
Shift + arrow	Nudge by 10 px
Delete or Backspace	Delete the selected layer(s)
Ctrl + ] / Ctrl + [	Move the selected layer forward / backward one step
Ctrl + Shift + ] / [	Bring to front / send to back
Shift + click	Add or remove a layer from the selection
Double-click text	Type directly on the canvas
Double-click photo / pattern	Open Quick adjust

I can’t see the Layout dropdown or the collage controls

Make sure the Layout collage layer is selected in the Layers list on the right. Its settings only appear when it’s selected.

My photo won’t drag inside a collage cell

If you start a drag right on a divider line, you’ll resize the cells instead. Start the drag a little further inside the cell. If a photo is already at the edge of what it can pan, zoom in a bit first.

My text uses a different font than expected

The fonts load from Google Fonts. Check your internet connection and reload the page.

My asset library is empty

The library is stored per browser. Open the tool in the same browser and profile you used before. Clearing site data removes it.

Exports look softer than the screen

The canvas is shown scaled down on screen; the file is exported at the full size you chose. Pick a larger preset or custom size for extra sharpness.

Good habits

• Save a project file before a big change, so you can always go back.
• Name your layers (the Name box in the right panel) once you have more than a few.
• Use the collage for structure, then layer patterns, text and logos on top.