Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

GridMethod: Reference Construction Lines

A powerful browser-based tool for artists to overlay reference lines and prepare images for printing.

This webpage allows you to upload a picture, preview it in standard paper formats (like A4, A3, etc.), add various grid and line overlays, and download a high-resolution, print-ready copy for use as a drawing or painting reference.

Key Features

  • Modern UI: A clean, responsive, card-based layout that guides the user through the workflow.
  • Print Format Previews: Choose from standard paper sizes (A5, A4, A3, A2, A1) to see how your image will fit.
  • Orientation Control: Select Portrait or Landscape orientation. The tool intelligently suggests a default based on your image's shape.
  • High-Resolution Export: Downloads a 300 DPI PNG file, perfect for high-quality printing.
  • Multiple Line Overlays: Add simple grids, diagonals, and complex diamond patterns.
  • Custom CM Grid: Create a grid with line spacing defined in centimeters, based on the image's physical dimensions.
  • Dynamic Filenames: Downloaded files are automatically named with their format and settings (e.g., image-A4-portrait-2cm_grid.png).

How to Use

  1. Select a file: Upload your source image.
  2. Choose an Output Format:
    • Use the dropdown menu to select a paper size (e.g., A4). The preview will show how your image fits in that aspect ratio.
    • If the format is not "Original", orientation controls (Portrait/Landscape) will appear, allowing you to choose how the image is framed.
  3. Add Reference Lines:
    • Click the image buttons to add pre-defined grids or diamond patterns.
    • To add a custom grid, enter a value in centimeters into the "Grid spacing (cm)" field and click "Apply Grid".
  4. Download Your Image:
    • Click the "Download Image" button.
    • The tool will generate a high-resolution 300 DPI file in the background and start the download. If the process is slow, the button will display "Generating..." to provide feedback.

Changelog

v 0.6

  • Complete UI/UX Overhaul: The interface has been rebuilt from the ground up with a modern, responsive, two-column layout.
  • Workflow-Based Controls: Controls are now grouped into logical cards (Image, Lines, Grid, Finalize) to guide the user through the process.
  • Improved Styling: All buttons, inputs, and selectors have been restyled for a professional and cohesive look and feel.
  • Bug Fixes: Resolved critical JavaScript loading and event listener errors for improved stability.

v 0.5

  • Output Formatting: Added ability to select A-series paper sizes and orientation.
  • High-Resolution Export: Download now generates a 300 DPI print-quality PNG.
  • State Management: Users can now stack multiple line commands (e.g., a grid and a diamond).
  • Dynamic Filenames: Files are downloaded with descriptive names.

v 0.4b

  • retrieval of the image physical dimensions by calculating the conversion pixels to cms
  • Added the option to create a regular grid with each line separated by user-input cms
  • Fixes and Improvements

Sample Images

New Interface (v0.6)

The application has been redesigned with a clean, modern, and responsive user interface.

New Interface

Output Formatting

This feature allows you to see how an image fits within a standard paper size before printing.

Portrait Preview

A square image previewed in an A4 Portrait format.

A4 Portrait Preview

Landscape Preview

A square image previewed in an A4 Landscape format.

A4 Landscape Preview

Grid Overlays

Grid 4x4

4x4 Grid

Grid 8x8

8x8 Grid

Grid 16x16

16x16 Grid

Grid 32x32

32x32 Grid

Diamond Overlays

Basic Diamond

Diamond

Diamond 4

Diamond

Diamond 8

Diamond

Diamond 16

Diamond

Custom Grid

1cm apart

1cm

2cm apart

2cm

3cm apart

3cm

About

Tool that sets a grid overlay on top of an uploaded image

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages