User Manual

Complete guide to using the Layerize.it halftone generator

The manual is available in English only

Quick Start

  1. Upload: Drag and drop an image file (JPG, PNG, or WEBP) onto the upload area.
  2. Adjust: Modify settings in the sidebar. Changes trigger automatic reprocessing.
  3. Download: Click "All Channels (SVG)" for separate files per color layer, or "Download Combined (SVG)" for a single merged file.

Interface Overview

  • Sidebar (Left): Control panel with collapsible sections for all settings. Changes trigger automatic reprocessing.
  • Main View (Center/Right): Live preview display.
    • Header: Layer visibility toggles, shading toggles, view mode switcher (Result or Compare).
    • Footer: Estimated plotting time, settings status, export buttons.
  • Reset Button: Clears current session and returns to upload screen.

Core Concepts

The application converts images into halftone patterns using shapes, lines, or dots. Tonal values are represented by pattern density and element size. Images are separated into color channels for multi-color plotting.

Feature Reference

Uploading Images

Drag and drop JPG, PNG, or WEBP files onto the upload area.

Pattern Settings

  • Pattern Type: Pattern algorithm selection.
    • Shapes:
      • Circles - Circular dots scaling with tonal values.
      • Squares - Square-shaped dots in grid structure.
      • Diamonds - Diamond shapes rotated 45°.
      • Hexagons - Hexagonal grid pattern.
    • Lines:
      • Line Screen - Parallel lines with variable thickness.
      • Crosshatch - Perpendicular intersecting lines.
    • Fills:
      • Concentric Circles - Concentric rings radiating from intensity centers.
      • Spirals - Spiral curves flowing from intensity centers.
    • Generative:
      • Stipple - Dot placement algorithm. Classic (Fast): layer-based deterministic placement, fixed 3px dots. Weighted Voronoi (Organic): organic distribution, 2-3x slower processing.
      • Stochastic - Random dot placement with variable sizing.
    • Experimental:
      • Wave Pattern - Undulating wave lines.
      • Flow Field - Curves following image gradients.
  • Pattern Size: Maximum element size or line thickness. (Not available for Stipple)
    • Range: 0.1mm to 5mm.
    • Effect: Controls individual element dimensions. Larger values increase element visibility, smaller values increase detail resolution.
  • Spacing: Distance between pattern element centers.
    • Range: 0.1mm to 10mm.
    • Effect: Controls pattern density and resolution. Smaller spacing increases detail and plotting time. Larger spacing reduces both.
  • Line Angle: Line orientation angle. (For Line, Crosshatch, Wave)
    • Range: 0° to 180°.
    • Effect: 0° = horizontal, 90° = vertical, 45° = diagonal.
  • Randomness: Positional randomness amount. (For Stochastic)
    • Range: 0% to 100%.
    • Effect: 0% = regular grid, higher values increase randomness.
  • Density: Ring/spiral count per element. (For Concentric Circles, Spirals)
    • Range: 1 to 20.
    • Effect: Higher values increase pattern complexity and plotting time.
  • Add Circle Outline: Circular border toggle. (For Spirals)
    • Effect: Adds circular boundary around spiral elements.

Stipple Mode Settings

  • Stipple Mode: Algorithm selection for stipple pattern.
    • Classic (Fast) - Layer-based deterministic placement. Fixed 3px dots.
      • Spacing (0.1-10mm): Distance between stipple dots.
      • Contrast (50-200%): Tonal range adjustment.
    • Weighted Voronoi (Organic) - Organic distribution algorithm. 2-3x slower processing.
      • Quality (Iterations) (3-10): Lloyd relaxation iteration count. Higher values increase dot distribution uniformity and processing time.
      • Dot Density (0.5×-2.0×): Dot quantity multiplier. 0.5× = sparse, 1.0× = balanced, 2.0× = dense.
      • Note: Weighted Voronoi uses intensity-based weighted sampling.

Color Settings

  • Color Mode: Color separation mode selection.
    • Monochrome - Single black channel.
    • Duotone - Two color channels.
    • Tritone - Three color channels.
    • CMYK - Four color channels (Cyan, Magenta, Yellow, Black).
    • Custom - 1-10 configurable color channels.
  • Initial Channel Count: (Custom Mode) Initial channel count (1-10) when switching to Custom Color Mode.
  • Separation Method: (Custom Mode) Algorithm for color channel separation.
    • Luminosity Bands - Divides image by brightness into N equal bands. Channel 1 = darkest, final channel = brightest.
    • Hue Segments - Splits color wheel into N equal segments starting from red (0°). Example 6 channels: Red (0°), Yellow (60°), Green (120°), Cyan (180°), Blue (240°), Magenta (300°).
    • Saturation Levels - Separates by color intensity. Channel 1 = desaturated/gray, final channel = highly saturated.
    • Color Match (Realistic) - Assigns pixels to nearest palette color by color distance.
  • Color Presets: (Custom Mode) Preset color palette selection. Varies by channel count.
  • Colors:
    • Click color swatch to open color picker.
    • Channel Info: Displays name, semantic label, screen angle, and color swatch.
    • Add/Remove Channel: (Custom Mode) + button adds channel (max 10), trash icon removes channel (min 1).
    • Rename Channel: (Custom Mode) Click pencil icon or channel name to edit label.
    • Channel Width Control: (Luminosity, Hue, Saturation methods) Controls range coverage for each channel.
      • Range: 0.1 to 3.0.
      • Effect: Lower values (0.1-0.5) create narrow bands with sharp transitions. Higher values (1.5-3.0) create wide overlapping bands with smooth transitions. Default: 0.8 (1.8 for first luminosity channel).
    • Action Buttons:
      • Pipette icon (Custom Mode): Auto-samples colors from image. Hue separation aligns to pure color wheel positions. Luminosity/Saturation sorts by brightness/intensity. Color Match uses luminosity-sorted colors.
      • Palette icon: Generates programmatic palette based on hue wheel distribution.
      • RotateCcw icon: Resets colors to defaults.

Image Processing

Preprocessing filters applied before pattern generation.

Photo Enhancement

  • Bilateral Filter: Edge-preserving noise reduction.

    • Enable Bilateral Filter: Toggle bilateral filtering.
    • Spatial Radius (5-15px, default: 9px): Smoothing area size. Higher values = larger smoothing regions.
    • Color Sigma (10-50, default: 25): Edge sensitivity. Lower values preserve more edges.
    • Quality (Iterations) (1-3, default: 2): Filter pass count. Higher values increase quality and processing time.

  • Pre-Blur: Gaussian blur filter.

    • Enable Pre-Blur: Toggle pre-blur.
    • Blur Radius (2-10px, default: 4px): Blur strength.

  • Midtone Boost: Midtone brightness compensation for dot gain.

    • Enable Midtone Boost: Toggle midtone compensation.
    • Boost Amount (0-20%, default: 10%): Midtone lightening percentage.

  • Posterization: Tonal level reduction.

    • Enable Posterization: Toggle posterization.
    • Tonal Levels (4-8, default: 6): Distinct gray level count.

Per-Channel Contrast

  • Channel-Specific Sliders: Individual contrast control per color channel.
    • Range: 50% to 200% (100% = normal)
    • Effect: Below 100% compresses tonal range. Above 100% expands tonal range.
    • Applied during color separation after global preprocessing, before pattern generation.

Compare Mode

  • Access: View mode switcher in results header. Toggle between Result (halftone only) and Compare (original vs halftone).

Shading

Adds continuous line hatching to dark image areas, drawn beneath halftone pattern.

  • Enable Shading: Toggle shading system.
  • Show Shading Mask: Debug visualization. White = shaded, black = not shaded.
  • Channel Selection & Custom Colors: Per-channel shading configuration.
    • Checkbox: Enable/disable shading per channel.
    • Color picker: Set custom shading color (independent of pattern color).
    • Label: Shows "Image color" or "Custom color".
    • Reset button: Reverts to original image color.
  • Darkness Thresholds: Per-channel threshold (0-100%). Determines minimum darkness for shading application.
  • Quality & Filtering: Mask refinement controls.
    • Blur Radius (0-20px): Gaussian blur applied to shading mask. Higher values = smoother transitions.
    • Morphology Operation: Binary mask processing.
      • None: No processing.
      • Erode: Shrinks shaded regions.
      • Dilate: Expands shaded regions.
      • Open: Erode then dilate. Removes noise while preserving shape.
      • Close: Dilate then erode. Fills gaps while preserving shape.
    • Morphology Radius (1-10px): Structuring element size. Higher values = stronger effect.
    • Minimum Region Area (0-100mm²): Removes shaded regions below area threshold.
  • Line Properties: Shading line configuration.
    • Line Density (0.1-2 lines/mm): Spacing between parallel lines. Higher = tighter spacing.
    • Angle (0-180°): Shading line direction.
    • Connection Gap (0-10mm): Maximum distance to connect line segments in same row. 0 = no connection.
    • Minimum Length (0-20mm): Removes lines shorter than threshold. 0 = keep all.
    • Length Variation (0-50%): Random line length variation percentage. 0% = uniform.
    • Angle Variation (0-10°): Random angle variation per line. 0° = perfectly parallel.
  • Appearance: Visual styling.
    • Opacity (0.1-1.0): Line transparency. 1.0 = solid.
    • Stroke Width (0.1-2mm): Line thickness.

Adaptive Sizing

Varies pattern element size based on local image detail. Detailed areas receive smaller patterns, smooth areas receive larger patterns.

  • Enable Adaptive Sizing: Toggle adaptive sizing.
  • Sensitivity (0-100%): Detail detection response strength. Higher values = greater size variation.
  • Min Dot Size (0.2x-1.0x): Size multiplier for detailed regions. Applied to base Pattern Size.
  • Max Dot Size (1.0x-3.0x): Size multiplier for smooth regions. Applied to base Pattern Size.
  • Transition Smoothing (0-20px): Blur radius for detail map. Higher values = gradual transitions.
  • Show Detail Map: Debug visualization. Hot colors (red/yellow) = detailed areas. Cool colors (blue/purple) = smooth areas.

Frame Effects

Edge treatments applied to source image before halftone processing.

  • Frame Effect:
    • None - No frame treatment.
    • Vignette (Circular) - Circular radial fade from center to edges.
    • Soft Edge - Linear fade from all edges inward.
    • Hard Edge - Defined border with steep gradient.
    • Custom Mask - Grayscale PNG/JPG alpha mask. White = visible, black = removed, gray = partial.
  • Frame Size (5-50%): (Vignette, Soft Edge, Hard Edge) Controls fade extent. 5% = edge only, 50% = halfway to center.
  • Mask Manager: (Custom Mask)
    • Upload Masks: Upload PNG/JPG files. Saved in browser storage.
    • Select Mask: Choose mask from gallery.
    • Mask Contrast (0-200%): Mask effect strength. 100% = as-is, >100% = intensify, <100% = soften.

Output Settings

SVG export configuration. All measurements in millimeters.

  • Paper Size: Document dimensions. Image scaled to fit.
    • A4 - 210 × 297 mm (default)
    • A3 - 297 × 420 mm
    • Letter - 215.9 × 279.4 mm (8.5 × 11 inches)
    • Tabloid - 279.4 × 431.8 mm (11 × 17 inches)
    • Custom Sizes - User-created dimensions
  • Orientation: Image placement.
    • Portrait - Vertical (height > width)
    • Landscape - Horizontal (width > height)
    • Image scaled to fit paper size while maintaining aspect ratio.
  • Margins (0-50mm): Border around artwork. Image scaled to fit within paper minus margins.

Custom Paper Sizes

  • Add Size: Create custom paper size.
    • Name, width, height in millimeters (0.1mm precision)
    • Maximum: 10,000mm
    • Appears in Paper Size dropdown when saved
  • Edit Size: Pencil icon modifies name or dimensions.
  • Delete Size: Trash icon removes size. Resets to A4 if currently selected.
  • Select Size: Click card to apply.
  • Import/Export:
    • Import: Load from JSON file.
    • Export All Sizes: Download library as JSON.
  • Storage: Stored locally in browser. Persists across sessions.

Advanced Settings

  • Stroke Width (0.1-2mm): SVG path stroke thickness. Physical line weight rendered by plotter.
  • Use Compound Paths: Merges shapes per layer into single compound path. Cleaner files but reduced editability.
  • Optimize for Pen Plotters: TSP optimization to minimize pen-up travel distance. Reduces plotting time, increases processing time (10-60 seconds).
  • Visualize Path Order: (Requires optimization enabled) Color-coded visualization of draw sequence. Blue = start, green = middle, red = end. Debug feature.
  • Use Standard Screen Angles: Applies print industry screen angles per channel. C=15°, M=75°, Y=0°, K=45°. Prevents moiré patterns in multi-color prints.
  • Custom Channel Angles: (When standard angles disabled) Manual rotation angle per channel.
    • Range: 0° to 180° per channel.

Preset Manager

Save, organize, and share processing configurations. Stored locally in browser.

Managing Presets

  • Save Preset: Saves current configuration.
    • Name and optional description fields.
    • Stores only differences from defaults.
  • Apply Preset: Click card to apply settings. Triggers automatic reprocessing.
  • Delete Preset: Trash icon removes preset.

Import/Export

  • Import Presets: Load from JSON file.
    • Supports legacy and encoded formats.
    • Version compatibility checking.
    • Duplicate presets imported as separate items.
  • Export All Presets: Download library as JSON file. Encoded format includes names, descriptions, settings.

Plotter Calibration

Calculates plotter-specific drawing speed and pen lift timing for accurate time estimates.

  • Access: "Calibrate Plotter" button in footer time estimation area.

Calibration Process

  1. Open Dialog: Click "Calibrate Plotter".
  2. Download Test Pattern: Click "Download Calibration SVG".
    • Contains geometric shapes with known path length (1000mm) and pen lifts (50).
    • Pattern metrics displayed.
    • Plot solid black shapes only (gray dashed lines are guides).
  3. Plot Pattern: Load SVG into plotting software. Use normal pen and speed settings. Time from start to finish.
  4. Enter Time: Input measured plot time in seconds (decimal values accepted). Auto-saved.
  5. Save Calibration: Click "Save Calibration". Calculates and stores:
    • Drawing speed (mm/second)
    • Pen lift time (seconds per lift)
    • Timestamped in browser localStorage

Calibration Management

  • Reset: Enter 0 or leave empty, then click "Save Calibration". Returns to default estimates.
  • Recalibration: Required when changing plotter/pen, speed/acceleration settings, or after 30+ days (auto-expires).
  • Calibration Age: Displays time since last calibration.

Time Estimates

  • Click/Hover: Shows breakdown (time per channel, total, based on path lengths and pen lifts).
  • Calibrated vs Uncalibrated: Uncalibrated uses defaults. Calibrated typically accurate within 5-10%.
  • Includes: Drawing time, pen lift time. Excludes: Loading, preview, initial positioning.

Results View

  • Header:

    • Layer Toggles: Show/hide buttons for each color layer.
    • Shading Toggles: Show/hide buttons for shading per layer (if enabled).
    • View Mode: Switch between Result (halftone only) and Compare (original vs halftone side-by-side).
    • Reset Button: Returns to upload screen.

  • Main View:

    • Displays rendered halftone preview. Compare mode shows original (left) and halftone (right).

  • Footer:

    • Estimated Plotting Time: Total time for all layers.
      • Click/hover for breakdown per channel.
      • Calibrated: based on measured plotter performance.
      • Uncalibrated: uses defaults.
      • Calibrate Plotter button opens calibration tool.
    • Settings Saved Indicator: Confirms settings stored in localStorage.
    • Download Buttons:
      • All Channels (SVG): Separate files per layer (sequential download, 500ms delays).
      • Download Combined (SVG): Single merged file.