Lightweight drawing overlay tool

tetorica deskel

A simple overlay tool for artists. Display grids and guides on top of your screen to measure proportions, align drawings, trace references, and check balance and composition.

Works with any app (Clip Studio, browser, PDF, etc.)

Transparent overlay Measure stick Color analysis Simple draw Multi monitor
Download from Itch.io Browser App Demo View on GitHub Download from Github
tetorica deskel demo
tetorica deskel icon

What is this?

tetorica deskel is a drawing overlay tool for PC and Web((limited functionality)).
It runs on Windows and macOS. It works on top of other windows.
It offers a design scale, measuring lines, color analysis, drawing guides, and palette creation.

Japanese:
Tetorica Deskel は PC向けのデスケルアプリです。Windows と Mac と Web (一部の機能が使えません)で動作します。他のウィンドウに重ねて利用できます。
デザインスケール、はかり棒、色相分析、補助線、パレット作成などの機能を備えています。

  • Measure proportions
  • Align drawings
  • Trace references
  • Check balance and composition

Features

  • Transparent overlay window
  • Grid (adjustable spacing)
  • Center cross
  • Custom color / opacity / line width
  • Click-through mode (interact with apps behind)
  • Always-on-top toggle (pin)
  • Global shortcut support
  • Rotate grid screen
  • Screenshot with grid
  • Multi monitor support
  • Export Procreate format, PNG and CSV
  • Contrast Analysis

Tested with OBS and Indirect Display Driver (IDD) Sample on GitHub. Also tested with MacBook Air and USB-C monitor.

TODO: Calibration Screen Capture

Measure stick

measure stick demo

Color analysis

color analysis demo

Simple draw

simple draw demo

Chain measure stick

chain measure stick demo

Perspective Ruler

perspective ruler demo

Contrast analysis (1)

contrast analysis demo

Contrast analysis (2)

contrast analysis demo

Protan / Deutan / Tritan preview

Protan / Deutan / Tritan preview

WEB 01

web

WEB 02

web

Shortcuts

Action Shortcut
Toggle click-through Cmd/Ctrl + Shift + J

Use Cases

  • Drawing practice (デッサン)
  • Manga / illustration layout
  • Proportion checking
  • Tracing reference images
  • UI / design alignment

Concept

Most existing tools:

  • require importing images
  • modify the original image
  • are not designed for real-time drawing

tetorica deskel is different:

It does nothing but overlay guides on your screen.

No saving. No editing. No friction. Just open and draw.

Tech

  • Tauri
  • TypeScript
  • Canvas API

Build

npm install
npm run tauri dev
npm run tauri build

Roadmap

  • Image overlay (reference mode)
  • PWA
  • iOS/Android App
  • Vector Search
  • Save Copy&Paste Color Palette
  • Calibration for Screen Capture
  • Contrast Analysis
  • Support RYB base (now HSV)

License

MIT

References

Toggle button

tailwindflex.com/@anonymous/toggle-me-animated-switch

Generated icon

design.com

Demo Image

I used these artworks for the demo. Thank you.

Great artwork really enhances the visuals.

Project Page