User Manual

Complete guide to using the Layerize.it halftone generator

The manual is available in English only

Quick Start: Your First Halftone

Get your first result in three simple steps:

  1. Upload: Drag and drop an image file (JPG, PNG, or WEBP) onto the main upload area. The app will automatically process it with default settings. High-contrast images work best to start.
  2. Adjust: Use the sidebar controls on the left to customize the look. Try changing Pattern Settings > Pattern Type and watch the preview update automatically in real-time. Settings auto-save as you work.
  3. Download: Scroll to the bottom footer and click "All Channels (SVG)" to download separate SVG files for each color layer (downloads sequentially), or "Download Combined (SVG)" for a single file with all layers merged.

The Interface at a Glance

  • Sidebar (Left): Your control center. All settings to customize your halftone are here, organized into collapsible accordion sections (Pattern Settings, Color Settings, Shading, etc.). Adjustments trigger automatic reprocessing.
  • Main View (Center/Right): Displays your halftone result with a live preview.
    • Header area: Contains layer visibility toggles (colored buttons to show/hide each color channel), shading toggles, and view mode switcher (Result vs. Compare side-by-side).
    • Footer area: Shows estimated plotting time, settings saved indicator, and the main export buttons (All Channels and Download Combined).
  • Reset Button: Top right of the results view - click to clear everything and start over with a new image.

Core Concepts: How It Works

This tool re-interprets your image using shapes, lines, or patterns. Instead of smooth gradients, it uses density and size of the chosen pattern to represent light and dark areas. It also separates the image into different color channels (like CMYK printing) so you can plot each color with a different pen.

Detailed Feature Breakdown

Uploading Your Image

Simply drag and drop a JPG, PNG, or WEBP file onto the main "Upload Area". The application will process it and generate an initial preview.

Pattern Settings

This is the heart of the generator. It controls the fundamental look of your halftone.

  • Pattern Type: Choose from over a dozen different patterns.
    • Classic Patterns:
      • Circle - Traditional circular halftone dots. Best for photographic images and CMYK prints. Dots scale from tiny to full size based on tonal values.
      • Square - Square-shaped dots for a geometric, modern look. Creates a grid-like structure.
      • Diamond - Diamond shapes rotated 45°. Similar to circles but with sharper corners, good for technical illustrations.
      • Line - Parallel lines varying in thickness. Creates a striped effect, excellent for directional emphasis.
      • Crosshatch - Perpendicular lines creating a woven mesh pattern. Classic pen-and-ink illustration style.
      • Stipple - Fixed small dots with random distribution. Creates organic, hand-drawn pointillist effects. Pattern Size control is disabled for this mode.
      • Stochastic - Random dot placement with variable size. Eliminates moiré patterns, creates texture like spray paint or airbrush.
    • Advanced Patterns:
      • Concentric - Concentric circles radiating from intensity centers. Creates hypnotic, target-like patterns that follow image contours.
      • Spiral - Spirals flowing outward from intensity centers. Organic, flowing patterns perfect for abstract or psychedelic effects.
      • Hexagonal - Honeycomb hexagonal grid. Efficient packing, unique geometric aesthetic, minimizes white space.
      • Wave - Undulating wave lines. Creates a flowing, water-like effect with adjustable angle and amplitude.
      • Flow Field - Dynamic curves following image gradients. Lines flow around contours creating elegant, contemporary artwork.
  • Pattern Size: (Not available for Stipple) Controls the maximum size of the individual shapes or line thickness in millimeters.
    • Range: 0.1mm to 5mm.
    • Effect: Larger values create bolder patterns with more visible individual elements. Smaller values produce finer, more detailed halftones. For line-based patterns (Line, Crosshatch, Wave), this controls the maximum line width. Typical values: 1-2mm for detailed work, 3-4mm for bold designs.
  • Spacing: The distance between the centers of the pattern elements in millimeters. This fundamentally controls the resolution and density of your halftone.
    • Range: 0.1mm to 10mm.
    • Effect: Smaller spacing = more pattern elements = finer detail and longer plotting time. Larger spacing = fewer elements = faster plotting but coarser detail. Think of this as the "dots per inch" of your halftone. Typical values: 2-3mm for high detail, 4-6mm for medium detail, 7-10mm for fast/bold work.
  • Contrast: Increases or decreases the range between the smallest and largest pattern elements.
    • Range: 50% to 200%.
    • Effect: Values below 100% compress the tonal range, making shadows lighter and highlights darker (lower contrast). Values above 100% expand the tonal range, making blacks deeper and whites purer (higher contrast). At 200%, you get maximum differentiation between light and dark areas.
  • Line Angle: (For Line, Crosshatch, Wave) Sets the angle of the lines in the pattern.
    • Range: 0° to 180°.
    • Effect: Changes the directional emphasis of the pattern. 0° is horizontal, 45° is diagonal, 90° is vertical. For artistic effect, try matching the angle to the main lines or flow in your image.
  • Randomness: (For Stochastic, Stipple) Controls the amount of positional chaos in dot placement.
    • Range: 0% to 100%.
    • Effect: 0% creates a regular grid (defeats the purpose of stochastic). Higher values increase randomness, eliminating moiré patterns and creating organic textures. 50-80% is ideal for most uses.
  • Density: (For Concentric, Spiral) Determines how many rings or spiral turns are generated per element.
    • Range: 1 to 20.
    • Effect: Low values (1-5) create simple, bold patterns. High values (15-20) create intricate, detailed spirals/circles. More density = longer plotting time.
  • Add Circle Outline: (For Spiral) Adds a circular border around each spiral pattern.
    • Effect: Creates a contained, medallion-like appearance for each spiral. Useful for preventing spirals from visually merging together.

Color Settings

Manage the color separation and palette for your artwork.

  • Color Mode:
    • Monochrome - Single black channel. Classic black-and-white halftones, fastest processing, simplest output.
    • Duotone - Two colors creating shadows and highlights. Popular for artistic prints, posters, and screen printing. Often uses one dark and one light color.
    • Tritone - Three colors for shadows, midtones, and highlights. Adds depth and richness beyond duotone. Commonly used in fine art prints.
    • CMYK - Four color channels (Cyan, Magenta, Yellow, Black) matching commercial printing standards. Produces full-color output that can be sent directly to print shops. Requires "Use Standard Screen Angles" to avoid moiré patterns.
    • Custom - Use 1-10 colors with full control. Perfect for multi-color screen printing, artistic experiments, or matching specific brand palettes.
  • Initial Channel Count: (Custom Mode only) Sets how many color channels to start with (1-10) when switching to Custom Color Mode.
  • Separation Method: (Custom Mode only) The algorithm used to divide the image into your chosen colors. Each method creates dramatically different artistic effects:
    • Luminosity Bands - Divides image by brightness levels into N equal bands. Channel 1 captures the darkest shadows, and the final channel captures the brightest highlights. Creates layered, posterized effects similar to screen printing. Best for: High-contrast images, portraits, screen printing workflows, or when you want clear tonal separation.
    • Hue Segments - Splits the color wheel into N equal segments starting from pure red (0°). For 6 channels, you get: Red (0°), Yellow (60°), Green (120°), Cyan (180°), Blue (240°), and Magenta (300°). Each channel captures pixels matching that hue range. Best for: Colorful source images, abstract art, rainbow gradients, or when source image has distinct color regions. Requires saturated colors in the source image to work well.
    • Saturation Levels - Separates by color intensity from grayscale to vibrant. Channel 1 gets desaturated/gray areas, final channel gets highly saturated vivid colors. Intermediate channels capture progressively more intense colors. Best for: Images with varying color intensity, artistic effects, or separating neutral tones from vibrant accents.
    • Color Match (Realistic) - Analyzes each pixel and assigns it to the closest color in your palette based on color distance. Works like real printing color separation. Most realistic reproduction of the original image. Best for: Photographs, realistic color reproduction, matching specific brand colors, or when you want the most faithful representation of your source image.
  • Color Presets: (Custom Mode only) Curated color palettes that work harmoniously together. Presets change based on your channel count. Great starting points for artistic color schemes. Examples include vintage film palettes, neon colors, earth tones, and more.
  • Colors:
    • Click any color swatch to open a color picker and choose your own color.
    • Each channel will plot its halftone pattern in the selected color.
    • Channel Info: Each channel shows its name, semantic label (e.g., "Shadows", "Midtones", "Red Hues"), assigned screen angle, and color swatch.
    • Add/Remove Channel: (Custom Mode) Click the + button to add a new color layer (up to 10) or the trash icon next to a channel to remove it. Minimum 1 channel required.
    • Rename Channel: (Custom Mode) Click the pencil icon or directly on a channel name to give it a custom label (e.g., "Sky Blue", "Deep Shadow", "Skin Tones").
    • Channel Width Control: (For Luminosity, Hue, and Saturation separation methods) Each channel has a "Width" slider (0.1-3.0) that controls how much of the tonal/hue/saturation range that channel covers.
      • Range: 0.1 to 3.0 (default varies by channel and method).
      • Effect: Lower values (0.1-0.5) create narrow, focused bands with sharp transitions between channels. Higher values (1.5-3.0) create wide, overlapping bands with smooth, gradual transitions. Default of 0.8 works well for most cases. Width of 1.8 is automatically applied to the first channel (shadows) for luminosity separation to extend shadow coverage into near-black areas.
      • Use Case: Increase width to smooth transitions between channels and avoid banding. Decrease width to create more distinct, poster-like separation. Experiment with asymmetric widths (e.g., wide shadows, narrow highlights) for creative effects.
    • Action Buttons:
      • Pipette icon (Custom Mode): Automatically samples colors from your uploaded image. For Hue separation, it extracts colors from hue segments and aligns them to pure color wheel positions (Red, Yellow, Green, Cyan, Blue, Magenta). For Luminosity and Saturation, it sorts by brightness or color intensity. For Color Match, it uses luminosity-sorted colors from the image. This is the fastest way to get started with realistic colors.
      • Palette icon: Generates a new programmatic palette with good color harmony based on hue wheel distribution. Click multiple times to explore different options. Works best for artistic/experimental work.
      • RotateCcw icon: Resets all colors to their default values for the current mode.

Shading

This powerful feature adds an extra layer of continuous line hatching to the darkest areas of your image, similar to pen-and-ink illustration techniques. It creates depth and richness by filling large tonal regions with parallel lines, drawn beneath the main halftone pattern.

  • Enable Shading: Checkbox to turn the entire shading system on or off.
  • Show Shading Mask: A debug visualization showing which parts of the image qualify for shading (white = shaded, black = not shaded). Useful for tuning your threshold values.
  • Channel Selection & Custom Colors: Choose which specific color channels receive shading and customize their colors independently.
    • Each channel shows a checkbox to enable/disable shading for that channel
    • A color picker allows you to set a custom shading color different from the main pattern color
    • The label shows whether the channel uses "Image color" (default) or "Custom color"
    • Click the reset button (circular arrow icon) to revert a channel back to its original image color
    • Use Cases: You might want shading only on the black channel in CMYK, use a lighter shade of the same color for subtle shading, or create special effects by using contrasting shading colors
  • Darkness Thresholds: Per-channel control (0-100%) determining how dark a region must be to receive shading.
    • Effect: Higher values = only the very darkest areas get shading. Lower values = more of the image gets shading. Think of this as "shade everything darker than X%". Start with 30-40% and adjust to taste.
  • Quality & Filtering: Tools to refine the shading mask and remove artifacts.
    • Blur Radius (0-20px): Applies Gaussian blur to the shading mask before generating lines. Creates smoother, more organic transitions between shaded and non-shaded areas. Recommended: 2-5px for natural results.
    • Morphology Operation: Mathematical operations to clean up the binary shading mask.
      • None: No processing, use the raw thresholded mask.
      • Erode: Shrinks shaded regions. Removes small protrusions and isolated specks. Use to clean up noisy masks.
      • Dilate: Expands shaded regions. Fills small gaps and holes. Use to connect nearby shaded areas.
      • Open: Erode then dilate. Removes small noise spots while preserving overall shape. Recommended for cleaning up pepper noise.
      • Close: Dilate then erode. Fills gaps and connects nearby regions while preserving overall shape. Recommended for filling holes and joining separated shadows.
    • Morphology Radius (1-10px): Size of the structuring element for morphology operations. Larger = stronger effect. Start with 2px.
    • Minimum Region Area (0-100mm²): Removes any shaded regions smaller than this area. Excellent for eliminating tiny specks and noise. Recommended: 5-20mm² depending on your design complexity.
  • Line Properties: Controls for the shading lines themselves.
    • Line Density (0.1-2 lines/mm): Spacing between parallel shading lines. Higher = tighter spacing = darker shading. 0.5-0.8 is typical. Too high can cause plotting issues and excessive ink.
    • Angle (0-180°): Direction of shading lines. Traditional illustration often uses 45° or 135°. Consider using a different angle than your main pattern to create visual separation.
    • Connection Gap (0-10mm): Maximum distance to connect separate line segments in the same row. Creates longer, more continuous lines instead of broken segments. 0 = no connection, 3-6mm is good for organic feel.
    • Minimum Length (0-20mm): Removes shading lines shorter than this length. Cleans up tiny line fragments. 0 = keep all lines. Try 2-5mm to remove noise.
    • Length Variation (0-50%): Randomly varies line lengths by this percentage. Creates hand-drawn, organic feel. 0% = uniform length, 10-20% adds subtle variation.
    • Angle Variation (0-10°): Randomly varies each line's angle by this amount. Mimics hand-drawing imperfection. 0° = perfectly parallel, 0.5-2° adds subtle organic feel without looking messy.
  • Appearance: Visual styling of the shading lines.
    • Opacity (0.1-1.0): Transparency of shading lines. 1.0 = solid, lower values create lighter shading. Use 0.5-0.8 for subtle shading beneath the main pattern.
    • Stroke Width (0.1-2mm): Thickness of each shading line in millimeters. Thicker = bolder, darker shading. 0.3-0.5mm is typical. Very thick lines (>1mm) can look heavy-handed.

Adaptive Sizing

This intelligent feature automatically varies the pattern element size based on local image detail. Areas with fine details (edges, textures, faces) get smaller patterns to preserve clarity, while smooth areas (sky, backgrounds) get larger patterns for artistic effect. This creates dynamic, visually interesting results that guide the eye.

  • Enable Adaptive Sizing: Checkbox to activate the adaptive system.
  • Sensitivity (0-100%): How aggressively the algorithm responds to detail detection.
    • Effect: Low values (20-40%) = subtle size variation, high values (60-90%) = dramatic size changes. Higher sensitivity creates more contrast between detailed and smooth areas. Start with 50% and adjust based on your image.
  • Min Dot Size (0.2x-1.0x): Size multiplier applied to the most detailed image regions.
    • Effect: 0.5x means detailed areas use half the base Pattern Size. Lower values preserve fine details better but can become too small to plot clearly. 0.5x is recommended for most uses.
  • Max Dot Size (1.0x-3.0x): Size multiplier applied to the smoothest image regions.
    • Effect: 2.0x means smooth areas use double the base Pattern Size. Creates bold, eye-catching contrast. Values above 2.5x can look exaggerated. 1.5x-2.0x is recommended.
  • Transition Smoothing (0-20px): Blur radius applied to the detail map, softening transitions between size zones.
    • Effect: 0px = abrupt size changes, 20px = very gradual transitions. 5-10px creates natural-looking results. Too low can look pixelated, too high can blur the effect.
  • Show Detail Map: Debug visualization displaying the detail detection map. Hot colors (red/yellow) = detailed areas that will get small patterns. Cool colors (blue/purple) = smooth areas that will get large patterns. Useful for understanding and tuning sensitivity.

Frame Effects

Apply edge treatments to fade or frame your halftone image. These effects modify the source image before halftone processing, creating elegant vignettes or custom shapes.

  • Frame Effect:
    • None - No frame treatment, full bleed to edges.
    • Vignette (Circular) - Classic circular vignette fading from center to edges. Creates an old-photo or spotlight effect. Fade is radial and smooth.
    • Soft Edge - Gentle linear fade from all four edges inward. Subtler than vignette, good for eliminating harsh edge artifacts or creating a dreamy look.
    • Hard Edge - Sharp, defined border with steep gradient. Creates a clean rectangular frame with soft edges.
    • Custom Mask - Use your own grayscale PNG/JPG as an alpha mask. White = fully visible, black = completely removed, gray = partially visible. Enables complex shapes, text cutouts, or artistic masking.
  • Frame Size (5-50%): (For Vignette, Soft Edge, Hard Edge) Controls how much of the image is affected by the fade.
    • Effect: 5% = fade only at extreme edges, 50% = fade reaches halfway to center. 20-30% is typical for subtle vignettes.
  • Mask Manager: (When Custom Mask is selected)
    • Upload Masks: Click to upload PNG/JPG files. Upload multiple masks to build a library. Each mask is saved in browser storage.
    • Select Mask: Choose which uploaded mask to apply from the gallery.
    • Mask Contrast (0-200%): Adjusts the strength of the mask effect. 100% = use mask as-is, >100% = intensify (expand whites), <100% = soften (compress range). Useful for fine-tuning mask effects without re-uploading.

Output Settings

Configure the canvas size and layout of your exported SVG files.

Important: All outputs are rendered to paper size using millimeter measurements for precision.

  • Paper Size: Set the document dimensions for your SVG output. Your image will be scaled to fit within the selected paper size.
    • A4 - 210 × 297 mm, standard international paper size. This is the default.
    • A3 - 297 × 420 mm, double the area of A4. Great for larger prints and posters.
    • Letter - 215.9 × 279.4 mm (8.5 × 11 inches), standard US paper size.
    • Tabloid - 279.4 × 431.8 mm (11 × 17 inches), double the area of Letter, US equivalent to A3.
    • Custom Sizes - Any custom paper dimensions you've created appear here in the dropdown (e.g., "Square 300mm (300 × 300mm)").
  • Orientation: Choose how your image is placed on the paper.
    • Portrait - Vertical orientation (height > width). Standard for documents and portraits.
    • Landscape - Horizontal orientation (width > height). Better for wide images and landscapes.
    • Effect: Your image will be scaled to fit within the selected paper size while maintaining aspect ratio. Choosing the orientation that matches your image's aspect ratio results in the largest scaling.
  • Margins (0-50mm): Adds a printable border/margin around your artwork.
    • Effect: Image is scaled down to fit within the paper minus margins. 10mm is typical for framing, 20mm+ for wide mats or binding. 0mm creates full-bleed output.

Custom Paper Sizes

Create and manage custom paper dimensions for specialized plotting needs. Perfect for non-standard paper sizes, square formats, long banners, or custom plotting surfaces.

  • Add Size: Click to create a new custom paper size.
    • Enter a descriptive name (e.g., "Square 300mm", "Banner 1000x200", "Custom Plotter")
    • Specify width and height in millimeters (0.1mm precision)
    • Maximum dimensions: 10,000mm (10 meters)
    • Once saved, the custom size appears in the Paper Size dropdown
  • Edit Size: Click the pencil icon on any custom size to modify its name or dimensions.
  • Delete Size: Click the trash icon to remove a custom paper size from your library.
    • If the deleted size is currently selected, paper size resets to A4
  • Select Size: Click any custom size card to instantly apply it to your output settings.
  • Import/Export:
    • Import: Load custom paper sizes from a JSON file. Share sizes with colleagues or restore from backup.
    • Export All Sizes: Download your entire custom paper size library as a JSON file for backup or sharing.
    • File format is compatible across all users
  • Storage: Custom paper sizes are stored locally in your browser and persist across sessions.

Use Cases for Custom Sizes:

  • Square Formats: Create perfect squares for Instagram prints, coasters, or tiles (e.g., 300 × 300mm)
  • Plotter Limits: Match your specific plotter's maximum dimensions (e.g., 432 × 594mm for A2)
  • Banners: Long, narrow formats for banner printing (e.g., 1000 × 200mm)
  • Non-Standard Media: Specialty papers, fabrics, or surfaces (e.g., 500 × 700mm canvas)
  • Architectural Scales: Custom dimensions for scaled drawings and blueprints

Advanced Settings

Fine-tune the SVG output for optimal pen plotter performance and visual quality.

  • Stroke Width (0.1-2mm): The thickness of all path strokes in the final SVG, measured in millimeters.
    • Effect: This is the physical line weight your pen will draw. 0.3-0.5mm is typical for fine liner pens. 0.6-0.8mm for standard markers. 1-2mm for thick markers or brush pens. This does NOT affect the halftone pattern design, only the final line rendering width.
  • Use Compound Paths: Merges all shapes in each color layer into a single compound SVG path object.
    • Effect: Creates cleaner, simpler SVG files that are easier to manage in design software. However, individual elements cannot be edited separately. Recommended OFF for maximum editability, ON for cleaner file structure.
  • Optimize for Pen Plotters: Applies traveling salesman problem optimization to reorder all paths, minimizing pen-up travel distance.
    • Effect: Can reduce plotting time by 30-70% on complex images! Processing takes 10-60 seconds depending on complexity. The plotter will draw more efficiently with less "air time" between strokes. Highly recommended for final plots. Disable during testing for faster exports.
  • Use Standard Screen Angles: Automatically applies traditional print industry screen angles to each color channel.
    • Effect: Critical for multi-color (CMYK, Duotone, Tritone) prints! Each channel gets a specific rotation (C=15°, M=75°, Y=0°, K=45°) that prevents moiré patterns (ugly interference fringes). When OFF, all channels use the same angle which can create distracting patterns when overlaid. Always enable for CMYK.
  • Custom Channel Angles: (When "Use Standard Screen Angles" is OFF) Manual per-channel rotation angle control.
    • Range: 0° to 180° for each channel independently.
    • Use Case: For artistic effects or when you want specific directional emphasis per color. For multi-channel printing, ensure angles differ by 15°+ between channels to avoid moiré. Single-color prints can use any angle safely.

Preset Manager

The Preset Manager allows you to save, organize, and share your favorite processing configurations. Your presets are stored locally in your browser, making it easy to recreate looks you love or build a library of go-to settings for different project types.

  • Location: Find the "My Presets" section in the sidebar controls, typically near the bottom.

Managing Presets

  • Save Preset: Click the "Save Preset" button to save your current configuration.
    • Give your preset a descriptive name (e.g., "Classic CMYK", "Portrait Stipple", "Poster Art")
    • Optionally add a description to remember when to use it
    • Only differences from default settings are saved, keeping presets compact
  • Apply Preset: Click any saved preset card to instantly apply those settings to your current image.
    • A green checkmark appears briefly to confirm the preset was loaded
    • Your image will automatically reprocess with the new settings
  • Delete Preset: Click the trash icon on any preset card to remove it from your library.

Import/Export

  • Import Presets: Click the "Import" button to load presets from a JSON file.
    • Share preset files with colleagues or back up your library
    • Supports both legacy and encoded preset formats
    • Version compatibility checking prevents errors
    • Duplicate presets are imported as separate items
  • Export All Presets: Click "Export All Presets" to download your entire preset library as a single JSON file.
    • File is encoded for security and compactness
    • Includes all preset names, descriptions, and settings
    • Perfect for backup or sharing your collection

Tips for Presets

  • Build a Library: Create presets for common scenarios: "Quick Test", "High Detail Final", "Fast Draft", "Photo CMYK", etc.
  • Name Descriptively: Good names: "Portrait Soft Stipple", "Landscape Flow Field", "Text Heavy Crosshatch". Bad names: "Test1", "New Preset".
  • Share Your Best: Found a great look? Export your presets and share with the community!
  • URL Presets vs Saved Presets: URL-based presets (shareable links) are great for one-time shares. Saved presets are better for your personal library of favorites.

Plotter Calibration

The Plotter Calibration feature allows you to achieve accurate plot time estimates tailored to your specific plotter and pen setup. By running a simple calibration pattern and measuring the actual plot time, the app can calculate your plotter's exact drawing speed and pen lift timing.

  • Access Calibration: Look for the "Calibrate Plotter" button or link in the time estimation area (footer of results view).

Calibration Process

  1. Open Calibration Dialog: Click "Calibrate Plotter" to open the calibration modal.
  2. Download Test Pattern: Click "Download Calibration SVG" to get a standardized test pattern.
    • The pattern contains:
      • Multiple geometric shapes (circles, squares, lines)
      • Specific path length (~1000mm typical)
      • Known number of pen lifts (~50 typical)
    • Pattern metrics are displayed (path length, pen lifts, format)
    • Important: Only plot the solid black shapes. The dashed gray lines are guides and should not be plotted.
  3. Plot the Pattern: Load the SVG into your plotting software and plot it using your normal pen and speed settings.
    • Use the same pen type you'll use for actual artwork
    • Use your typical speed/acceleration settings
    • Time the plot from start to finish using a stopwatch or your phone
  4. Enter Actual Time: Input the measured plot time in seconds in the calibration dialog.
    • Accepts decimal values (e.g., 45.5 seconds)
    • Your last entered time is saved automatically
  5. Save Calibration: Click "Save Calibration" to calculate and store your plotter's calibration factors.
    • The app calculates:
      • Drawing speed (mm/second)
      • Pen lift time (seconds per lift)
    • These factors are used for all future time estimates
    • Calibration data is timestamped and stored in browser localStorage

Calibration Management

  • Reset Calibration: To reset to uncalibrated state, enter 0 or leave the field empty and click "Save Calibration".
    • Returns to default time estimates
    • Useful if you change plotters or pen types
  • Recalibration: It's recommended to recalibrate when you:
    • Switch to a different plotter or pen type
    • Significantly change your speed/acceleration settings
    • Notice time estimates becoming less accurate
    • Haven't calibrated in 30+ days (calibration expires automatically)
  • Calibration Age: The app tracks when you last calibrated and can display calibration age ("3 days ago", "just now", etc.)

Understanding Time Estimates

After calibration, the "Estimated Plotting Time" in the footer becomes much more accurate:

  • Click/Hover on the time estimate to see a detailed breakdown:
    • Time per color channel
    • Total combined time
    • Based on actual path lengths and pen lifts in your current design
  • Calibrated vs Uncalibrated:
    • Uncalibrated estimates use default values (may be off by 50%+ for your setup)
    • Calibrated estimates are typically accurate within 5-10%
  • Time estimate includes:
    • Drawing time (based on path length and your calibrated speed)
    • Pen lift time (based on number of lifts and your calibrated lift duration)
    • Does NOT include: loading time, preview time, initial positioning

Best Practices

  • Calibrate Early: Run calibration once before starting a big project
  • Realistic Conditions: Use the same pen pressure, paper, and settings you'll use for final plots
  • Measure Carefully: Use a reliable timer - accurate input = accurate estimates
  • Document Your Settings: Note which pen/speed you calibrated with in case you switch setups

The Results View

Once your image has been processed, you'll see the Results View, which has several key areas:

  • Header:

    • Result Title & Subtitle: Shows "Result" and "Live Preview".
    • Layer Toggles: A set of buttons that allows you to show or hide each color layer in the preview.
    • Shading Toggles: If shading is enabled, these buttons allow you to show or hide the shading for each layer.
    • View Mode: A segmented control to switch between Result (shows only the final halftone) and Compare (shows the original and halftone side-by-side) views.
    • Reset Button: Click this to go back to the upload screen and start over with a new image.

  • Main View:

    • This area displays the rendered preview of your halftone image. If Compare mode is selected, it will show your original image on the left and the halftone result on the right.

  • Footer:

    • Estimated Plotting Time: Provides an estimate of how long it will take to plot your artwork. Shows the total time for all layers.
      • Click or hover to open a detailed breakdown showing time per channel
      • If calibrated, estimates are based on your specific plotter's measured performance
      • If uncalibrated, uses default values (may be less accurate)
      • Calibrate Plotter button/link opens the calibration tool for accurate estimates
    • Settings Saved Indicator: A small notification that your current settings are saved in the browser's local storage.
    • Download Buttons:
      • All Channels (SVG): Downloads separate SVG files for each color layer sequentially (one file per channel plus a combined file). Your browser will download them one at a time with 500ms delays between each.
      • Download Combined (SVG): Downloads a single SVG file with all color layers merged together in one document.

Example Presets & Recipes

Click any preset URL to instantly load it in the app! These demonstrate various features and provide great starting points for your own work. Each preset includes pre-configured settings optimized for specific artistic effects and automatically loads with an example image so you can see the result immediately.

1. Classic CMYK Halftone

Traditional four-color printing - Vibrant, photorealistic halftones using standard CMYK separation with proper screen angles to prevent moiré patterns. Perfect for reproducing photographs and preparing files for commercial printers.

  • Try it now →
  • What makes it work:
    • CMYK color mode with standard screen angles (C=15°, M=75°, Y=0°, K=45°)
    • Classic circular dots for authentic halftone look
    • Moderate spacing (2mm) balances detail with plotting time

Tips for Best Results

Image Selection & Preparation

  • High Contrast Works Best: Images with clear light and dark areas produce the most readable, striking halftones. Flat, low-contrast images may look muddy.
  • Good Source Resolution: While the app works with any size, images around 1000-2000px on the longest side are ideal. The app processes at 300 DPI for precision, so resolution still matters for quality.
  • Consider Your Subject: Portraits work well with most patterns. Landscapes shine with flow fields or waves. Graphic designs love geometric patterns (hexagonal, square, diamond).
  • Pre-edit for Effect: Boost contrast, adjust saturation, or apply filters in photo editing software before upload for more dramatic results.
  • Working in Millimeters: All measurements (pattern size, spacing, margins) are in millimeters, matching professional plotter workflows. This ensures consistent results regardless of screen resolution.

Pattern & Spacing Choices

  • Understanding Millimeter Units: Pattern sizes and spacing are in millimeters for precision. This matches how plotters work and ensures consistent results regardless of image resolution. 1mm ≈ 11.8 pixels at 300 DPI. Some internal processing parameters (blur radius, morphology) remain in pixels for technical reasons.
  • Balance Detail vs. Plot Time: Smaller spacing (1.5-2.5mm) = incredible detail but hours of plotting. Larger spacing (6-10mm) = faster plots but coarser look. Sweet spot for most work: 3-5mm.
  • Pattern Size Guidelines: Start with 1.5-2mm for balanced results. Go smaller (0.5-1mm) for ultra-fine detail. Go larger (3-5mm) for bold, graphic effects.
  • Match Pattern to Content: Circular/stipple for organic subjects (faces, nature). Lines/crosshatch for architectural or technical subjects. Flow field for contemporary art.
  • Experiment with Randomness: For stochastic and stipple patterns, 50-70% randomness creates organic texture while maintaining structure. <30% looks too regular, >85% can look chaotic.

Color Separation Wisdom

  • Always Use Standard Screen Angles for CMYK: This is not optional! Multi-color prints without proper angles will have ugly moiré patterns. Always enable for CMYK, tritone, and duotone.
  • Color Mode by Use Case:
    • Single-color plotting? Monochrome is fastest.
    • Artistic print run? Duotone or Tritone creates rich results without CMYK complexity.
    • Full color reproduction? CMYK with standard angles.
    • Experimental/screen printing? Custom mode with custom separation methods.

Choosing the Right Separation Method

  • Start with Color Match for Realism: When using custom colors, begin with "Color Match (Realistic)" separation - it's most intuitive and produces results closest to the original image. Perfect for portraits, photographs, and when color accuracy matters.
  • Luminosity for Tonal Art: Best for black & white source images or when you want clear dark-to-light progression. Creates poster-like effects. Works with any source image. Try 3-4 channels for screen printing (shadows, midtones, highlights, lightest tones).
  • Hue for Colorful Images: Only use this with colorful source images that have distinct hues (rainbows, fruit, flowers, abstract art). Won't work well on monochrome or low-saturation images. 6 channels gives you full spectrum coverage (ROYGBIV). Use the Pipette tool to auto-sample colors aligned to pure hues.
  • Saturation for Selective Color: Great for images with both colorful and neutral areas (e.g., a colorful subject on a gray background). Channel 1 captures grays/neutrals, final channel captures vivid colors. Use 3-4 channels for best effect.

Mastering Channel Width Controls

  • Default Settings Work: The default width of 0.8 (with 1.8 for first luminosity channel) handles most use cases. Only adjust if you see banding or want creative effects.
  • Fix Banding with Wider Widths: If you see harsh transitions or gaps between channels, increase width to 1.2-1.5 for smoother gradients and more overlap.
  • Create Posterization with Narrow Widths: Decrease width to 0.3-0.5 for distinct, non-overlapping bands. Creates graphic, poster-like separation with sharp transitions.
  • Asymmetric Width for Drama: Try wide width (1.8-2.0) on your darkest channel and narrow width (0.5-0.7) on highlights for dramatic shadow detail with crisp highlights.
  • Hue Segments Need Adjustment: For hue separation, if colors are bleeding into each other (red channel showing orange), decrease width to 0.5-0.6. If you see gaps or missing colors, increase to 1.0-1.2.

Auto-Sampling Colors with the Pipette

  • Hue Sampling is Smart: When using Hue separation, the Pipette tool samples colors from your image but aligns them to pure color wheel positions (Red at 0°, Yellow at 60°, Green at 120°, etc.). This ensures accurate color separation without hue drift.
  • Luminosity Sampling: For Luminosity separation, colors are sampled dark-to-light from your image. Works great for getting realistic tones from your source.
  • Saturation Sampling: Colors are sampled from least-to-most saturated areas. Gives you the actual color intensity range from your image.
  • Re-sample After Changes: If you change separation method or channel count, click the Pipette again to re-sample colors appropriate for the new method.

Performance & Optimization

  • Always Optimize Final Plots: Turn on "Optimize for Pen Plotters" before downloading your final SVG. It adds processing time but can reduce plotting time by 30-70%. Worth it!
  • Disable Optimization During Testing: While experimenting with settings, keep optimization off for faster previews and exports.
  • Use Debug Views Wisely: "Show Detail Map" and "Show Shading Mask" help understand and tune your settings, but disable them for final plots.
  • Monitor Plotting Time Estimates: Check the footer for estimated plotting time. If it's too long, increase spacing or simplify your pattern.

Advanced Feature Tips

  • Adaptive Sizing Magic: Combine adaptive sizing with flow fields or concentric patterns for stunning contemporary artwork. Start with 50% sensitivity and 0.5x-1.8x range.
  • Shading for Depth: Use shading sparingly - only on the darkest channel (usually shadows or black). Too much shading on all channels can look muddy. A blur radius of 3-5px keeps transitions smooth.
  • Frame Effects: Vignettes at 25-30% size look most natural. Custom masks enable creative shapes - try text, logos, or geometric cutouts.
  • Compound Paths for Importing: If you plan to import your SVG into Illustrator or other design tools, enable "Use Compound Paths" for easier manipulation.

Workflow Best Practices

  • Settings are Auto-Saved: Your last configuration is saved in browser localStorage. You can close the tab and come back later without losing work.
  • Use the Preset Manager: Build a personal library of your favorite settings. Save presets for different project types, export them for backup, and share with collaborators.
  • Share Your Presets: Two ways to share:
    1. URL Presets: Copy the URL from your browser's address bar - it includes all current settings for quick one-time sharing
    2. Preset Files: Export your preset library as a JSON file for comprehensive sharing or backup
  • Calibrate for Accuracy: Run plotter calibration once to get accurate time estimates. Recalibrate when changing plotters, pens, or settings.
  • Start from Presets: Use saved presets or example URL presets as starting points, then tweak to taste. No need to start from scratch every time.
  • Test Before Full Processing: When trying new settings, upload a small crop of your image first to test quickly, then upload the full image once you're happy.
  • Monitor Plotting Time: Keep an eye on estimated plotting times. If too long, adjust spacing or pattern complexity before starting a plot.
  • Experiment Fearlessly: The preview updates in real-time. Try wild combinations - you might discover something amazing! The best way to learn is to play.