Collage Maker User Guide
Use Auric Artisan Collage Maker to build a multi-image composition on a local canvas, manage layers, analyze coverage and export polished raster outputs without uploading source files.
Overview
Collage Maker is a local browser canvas editor for multi-image upload, drag, resize, rotate, flip, hide, duplicate, reorder, grid arrangement, snapping, center and rule-of-thirds guides, measured coverage, overlap and off-canvas area, undo/redo, PNG, JPEG, clipboard PNG, JSON session export, a layout comparison table and Library image saves.
1. Open Collage Maker
+- Tool URL: open Collage Maker.
- Default canvas: 1200 by 900 px, 4:3 aspect ratio, transparent background, 24 px padding, 8 px gap, 18 px radius and snap-to-grid enabled.
- Workspace tabs: Studio, Layout, Measure, Data, Export and Reference.
- Privacy model: images are loaded from local file input into browser image elements and rendered on a local canvas.
2. Upload and add images
+Use Drop pictures (drop files on it, or click it to choose) to load one or more local images. The file input accepts browser-supported image types such as JPG, PNG, WebP and GIF. Each file becomes a layer centered on the canvas and scaled to fit within about 40 percent of the canvas dimensions.
- Arrange in a grid: lays the visible pictures out in the grid that the Layout tab measures as covering the most canvas, using the current padding and gap. Undo puts them back.
- Clear the canvas: removes every picture and leaves the canvas settings; undo brings them back.
- Layer names: default to the uploaded filename and appear in the Layers list, top first.
3. Canvas and layout controls
+| Control | Options Or Range | Use |
|---|---|---|
| Aspect ratio | 4:3, 1:1, 3:2, 16:9, 9:16, 2:3 | Changes canvas dimensions from a 1200 px base width. |
| Export scale | 0.25x to 4x | Scales the exported file on the Export tab; the canvas keeps its base size. |
| Padding and gap | Padding 0 to 120 px, gap 0 to 80 px | Used by Arrange in a grid and the Layout comparison. |
| Canvas radius | 0 to 80 px | Rounds the canvas corners, clipping the background and the pictures. |
| Background | Transparent or white | Transparent background is on by default and shows a checkerboard on screen only; turned off, the export is painted white. |
| Snap to grid | 10 px grid | Snaps dragged pictures to a 10 px grid when enabled. |
Turn on Centre and rule-of-thirds guides to show center lines through the selected picture and the rule-of-thirds overlay for photography-style composition checks. Guides are drawn on screen only, never in the export.
4. Layer editing
+Select a layer by clicking it on the canvas or in the layer list. The selected layer controls include scale, rotation and opacity. Z-order and transform buttons provide the rest of the layer workflow.
| Action | Effect |
|---|---|
| Bring to front / Send to back | Moves the selected layer in the render stack. |
| Center | Moves the selected layer to the canvas center. |
| Duplicate | Copies selected layer metadata and offsets the duplicate slightly. |
| Hide / Show | Hides the selected layer from the canvas and the export, or shows it again. |
| Flip across / Flip down | Mirrors the selected layer horizontally or vertically. |
| Remove | Deletes the selected layer; undo brings it back. |
| Undo / Redo | Steps back or forward through up to 60 changes, including removals and Clear the canvas. |
| Layers list | Lists every layer top first with a thumbnail, size and scale; click one to select it. |
5. Keyboard and pointer shortcuts
+- Drag: move a layer on the canvas; pressing on it selects it.
- Corner handle: resize proportionally from the layer center.
- Arrow keys: with the canvas focused, move the selected layer 1 px; hold Shift for 10 px.
- Delete or Backspace: remove the selected layer.
- Ctrl+Z: undo. Ctrl+Shift+Z or Ctrl+Y: redo.
6. Composition review
+| Panel | What It Shows |
|---|---|
| Canvas covered | Share of the canvas covered by pictures, measured from the pixels the export will use. |
| Overlapping / Outside the canvas | Share of the canvas painted twice, and share of picture area hanging off the canvas and not exported. |
| History / The old readout said | Undo steps back to the start, and the old sum-of-picture-areas figure kept for comparison. |
The figures redraw with layout changes and layer edits. The Measure tab explains what each figure reads and what the old readouts got wrong.
7. Exports and sessions
+| Action | Output Or Behavior |
|---|---|
| Save the PNG | Downloads collage.png from the full canvas at the export scale. |
| Save a JPEG | Downloads collage.jpg using the JPEG quality slider. |
| Copy to the clipboard | Uses the Async Clipboard API when browser support is available. |
| Save the session | Downloads collage-session.json with canvas config and layer transforms.
|
| Save the reading | Downloads collage-reading.json with the measured coverage, overlap and off-canvas figures. |
| Load a session | Reads a session file, applies its canvas settings and applies the stored transforms to the loaded pictures in list order. Source image pixels are not embedded. |
| Export table | Shows the size of each encoded file, measured before it is offered. |
| Scale / JPEG quality | Export scale from 0.25x to 4x and JPEG quality from 0.1 to 1 (default 0.92). |
8. Layout comparison and measurement
+- Layout tab: lays the current pictures out in every column count, measures each arrangement on the real canvas, and lists cell size, coverage, overlap and off-canvas area. Choose Fit inside the cell or Fill the cell, crop, and apply any arrangement as one undoable step.
- Measure tab: shows what coverage, overlap and off-canvas area are read from, and why the old bootstrap interval and batch coverage table were withdrawn.
- Data and Reference tabs: list where each number comes from and the sources and formulas behind them.
Use the Layout tab to compare grid density, padding, gap and aspect choices before building a final collage.
9. Library saves
+Library registers this route as collage-maker, category Creative, asset
type image. A save captures the same clean render that Save the PNG writes, without
the selection box, handles or guides, and stores the aspect, padding, gap, radius, background,
dimensions and picture count. With no pictures on the canvas it saves a Collage layout preset
instead.
Restoring a save sets the aspect, padding, gap, radius and transparent background through the studio's own controls, so undo can take it back. The pictures are local files and are not stored, so re-upload them to rebuild the layers.
10. Recommended workflows
+- Social square: choose 1:1, upload 4 to 9 images, run Arrange in a grid, tune gap and export PNG.
- Story poster: choose 9:16, use a transparent or white background, place one hero layer and supporting smaller layers.
- Wide banner: choose 16:9, enable the rule-of-thirds guides, align the main subject on a third and export JPEG at high quality.
- Reusable layout: save session JSON after arranging layers, then re-upload the same source images and load the session later.
- Layout research: compare arrangements on the Layout tab for several padding/gap values before final placement.
11. Limits and good practice
+- Session JSON stores transforms, not source image pixels. Keep source files available for future edits.
- Canvas 2D rendering uses browser sRGB behavior and is not a full ICC-managed publishing workflow.
- Very large export scales and many high-resolution layers can increase browser memory use.
- Clipboard PNG export depends on browser support for
ClipboardItem. - JPEG does not preserve transparency; use PNG for transparent backgrounds.
For implementation details, see the Collage Measurement Developer Reference.