Illustmaker User Manual

A guide to using Illustmaker — a free, browser-based vector illustration tool.
From basic operations to practical techniques.

Quick start

A quick run-through for first-time users — from making your first shape to exporting it.

1. Open the editor

Click the "Try it now" button on the home page, or go directly to /illustmaker/app/. On first launch you'll be asked to pick a canvas size.

2. Draw a shape

Pick Rectangle (R) from the toolbar on the left and drag on the canvas. Hold Shift while dragging for a square.

3. Change the color

With the shape selected, click "Fill" or "Stroke" in the right panel and pick a color.

4. Export

From File → Export, or the SVG Export button on the toolbar, choose SVG / PNG / JPEG / PDF and save.

Tools

Select tools from the left toolbar. The letter in parentheses is the keyboard shortcut.

Shortcuts

File operations

Editing

View

Arrange & align

Layers

Manage layers from the right panel's "Layers" tab. You can toggle visibility, lock, and assign color tags.

• Visibility — click the visibility icon
• Lock — click the lock icon to prevent accidental edits
• Reorder — drag the layer row up or down
• Folder — multi-select and click the "Folder" button to group
• Color tag — click the left square to assign a color for visual sorting

Color & gradient

Solid fill

In the right panel pick "Fill" → "Solid" and choose a color via the color picker. HEX input and Adobe-style palettes are supported.

Gradient

Press G or pick "Fill" → "Gradient".

• Toggle between linear and radial
• Add / remove / drag gradient stops
• Adjust angle with the drag handle

Save color palettes

Use the "+" button in the color picker to save the current color. Maintain per-project palettes of your go-to colors.

Text

Point text & area text

• Click — single-line point text
• Drag — flowing area text within the box

Fonts

Comes with 1500+ Google Fonts. Adobe Fonts and local files (.ttf / .otf / .woff / .woff2) are also supported.

Text on path

Select a path → in the right panel choose "Text" → "Place on path" to flow text along the curve.

Export

Print prepress

The recommended workflow for submitting Illustmaker output to a print shop.

1. Pre-submission checklist

• Final size, trim marks, bleed — match the print shop's template (bleed usually 3mm)
• Resolution — embedded images at 300dpi or higher at final size
• Outline fonts — always do this (see below)
• Color space — print is CMYK; conversion from web RGB required (see below)
• Transparency & blend modes — some print shops don't support them; confirm beforehand

2. Outlining fonts

Convert text into vector paths so the printer can reproduce it even without the font installed.

• Method A — from the tool menu, "Text → Outline"
• Method B — MCP API illust.outline_text outlines every text in the session at once

After outlining, text becomes non-editable. Keep a copy of the source data.

3. CMYK conversion (important)

Illustmaker works in RGB. For CMYK-required print jobs, convert the final file in one of:

• Open in Adobe Illustrator → File → Document Color Mode → CMYK
• Adobe Acrobat Pro "Print Production → Convert Colors"
• Paste into InDesign and export with CMYK output

Vivid neon-style blues and greens shift significantly in CMYK — verify with a proof print.

4. Recommended PDF export settings

5. .ai-compat export and re-editing

The .ai compat format is SVG with Illustrator's namespace, so Adobe Illustrator can open it. The recipient can perform CMYK conversion, add trim marks, and finalize.

It's Illustrator-readable SVG, not full .ai binary, so a few special effects (complex patterns, gradient meshes) may be lost.

6. Print-submission PDF (v3.0 feature)

Export PDF with trim marks and bleed directly, ready to submit to commercial print shops. Available from the editor or via AI/MCP through illust.export_print_pdf.

• Trim marks — 4 corners + 4 center + bleed guides automatically added
• Bleed — 3–20mm configurable
• Registration marks — 4-color support (optional)
• Preflight check — illust.preflight_check returns a 0–10 score with missing bleed, un-outlined text, and RGB→CMYK warnings

Variable-data print

Generate hundreds to thousands of business cards / labels / tickets / name badges in bulk from CSV. Dedicated page: /illustmaker/batch/

1. Pick a template — business card / logo / flyer / card / coupon / banner, or upload your own project JSON
2. CSV input — header row contains variable names (name, title, phone), data rows contain values. Drag-and-drop, paste, or auto-generated samples.
3. Preview — first 6 entries rendered as SVG immediately
4. Bulk export — SVG ZIP / PNG ZIP / PDF imposition (A4/A3/Letter, configurable columns/rows/margin)

Templates can use {{name}}-style placeholders; matching CSV headers substitute the values. Also available via MCP illust.batch_render for AI use.

Templates & parts library

High-quality parts and templates are kept server-side and searchable by AI.

MCP tools: illust.library_search / illust.library_use / illust.template_list / illust.template_render

Logo factory

MCP tools specialized for batch logo production.

• Color variations (illust.logo_variations) — 8 presets: mono / inverse / gray / orange / blue / red / green / gold. Each variant becomes a new session.
• Multi-size export kit (illust.logo_export_kit) — 9 sizes zipped: favicon-16/32, apple-touch-180, PWA-192/512, Twitter card 1200×630, Instagram 1080, master SVG, master-print SVG

Live trace (raster → vector)

Convert raster image objects to vector paths via potrace. Use it for vectorizing hand-drawn sketches into logos, or AI-generated images.

Parameters: binarization threshold / denoise / optimization tolerance / fill color / replace original.

MCP tool: illust.live_trace

Image gen / AI Vision critique (BYOK)

BYOK = Bring Your Own Key. Use your own API keys for image generation and AI critique. Our servers never store your keys — they act as a transparent proxy.

• Image generation (illust.generate_image) — Call OpenAI DALL-E / Recraft and place the result as an image object.
• AI Vision critique (illust.critique) — Render the session as PNG, ask Claude/GPT Vision for a structured critique (score 0–10 / issues / suggested fixes / strengths).

Useful for a "draw → AI self-evaluate → revise" loop.

Gradient mesh

Bilinear interpolation across 4 corners or N×M grid colors produces a smooth 2D color gradient (576–3,600 polygons).

• Via GUI — editor "AI" menu → "Gradient mesh" (position / size / corner colors / detail).
• MCP tool: illust.add_mesh_gradient — {session, x, y, w, h, cols?, rows?, detail?, corners?, colors?}
• detail (8–60) controls smoothness. corners takes [tl, tr, bl, br], or colors for the full N×M grid.

Brand kits

Save palette / fonts / asset URLs together as a brand kit. Stored under anonymous owner_fp (ip+ua hash), so no login is required and you can manage multiple kits.

• Editor "File" menu → "Brand kit" for save / load / delete.
• MCP tools: illust.brand_save / illust.brand_list / illust.brand_delete
• Contents: {name, palette[], fonts[], assets[]} (pass kit_id to overwrite)

Live share (read-only URL)

Share an in-progress session with a 30-day URL. Viewers visit /illustmaker/live/{token} and see near-real-time updates via 3-second polling. Perfect for internal review, client work-in-progress demos, and live teaching.

• Editor "File" menu → "Live share" to issue / copy URL / revoke.
• MCP tools: illust.share_create / illust.share_list / illust.share_delete / illust.share_view
• No WebSocket — HTTP polling, friendly with firewalls and corporate proxies.
• Auto-expires after 30 days. Can also be revoked manually via illust.share_delete.

Viewer comments (v4.1 add-on, mode='comment' only)

Issue a share link with mode='comment' and viewers can post spatial comments in the live viewer. Clicking the canvas anchors a pin; post a body. The owner can resolve or delete comments.

• MCP tools: illust.share_comment_post / illust.share_comment_list / illust.share_comment_resolve / illust.share_comment_delete
• Rate limit: 20 comments / hour / viewer (ip+ua hash).
• HTTP polling: 5s for comments.

Real-time collaboration (v5.0 / mode='edit')

Issue a share link with mode='edit' and multiple users can join /illustmaker/live/{token} to draw, move, and delete simultaneously — the Figma-style multi-user experience, browser-only.

• HTTP long-polling (25s) + LWW (Last-Write-Wins) conflict resolution. No WebSocket; survives firewalls/proxies.
• Per-object edit locks — protect objects being moved/edited for 5 seconds (auto-released).
• Live cursors / selections — see where others look and what they have selected (cursor broadcast ~80ms).
• Participant list — header avatars + sidebar with colors.
• Lightweight MVP toolset: Select / Rect / Ellipse / Text / Line. Pen, pathfinder, etc. coming soon.
• MCP tools: illust.collab_join / illust.collab_leave / illust.collab_op_submit / illust.collab_poll / illust.collab_status

Use cases: multi-designer brainstorms, internal workshops, team MTG idea boards, classroom group exercises.

Version history & session comments

Save named versions of a session and restore them later (up to 30). Spatial comments and annotations are also supported.

• Save version — illust.session_snapshot with a label.
• Restore version — illust.session_restore. Auto-snaps the current state before restoring.
• Session comments — illust.session_comment (action=add/list/resolve/delete). Position-aware, object-anchored, with resolve marking.

Macros (save and replay action sequences)

Save chains of MCP calls as macros and re-run them with variable substitution. Combine "add 3 logo parts → align → group" into a single command.

• illust.macro_save saves a step array (with {{var}} substitution support).
• illust.macro_list lists macros within a session.
• illust.macro_run runs one.

Security: macro methods are whitelisted. BYOK (image gen / AI critique) and network (URL fetch) methods are not callable from macros.

Gallery (community)

Publish works to /illustmaker/gallery/. Anonymous, no registration.

• Editor "File" menu → "Submit to gallery"
• Remix — load other users' works to re-edit (project JSON is public)
• Comments, likes, and reports (3+ reports auto-hide the work)
• Categories (icon/logo/illustration/character/ui/pattern/other), tags, new/popular/trending sort
• From AI: gallery.submit / gallery.list / gallery.get / gallery.remix / gallery.comment / gallery.list_comments

MCP API (AI integration, 102 methods)

We expose a Model Context Protocol server so AI agents (Claude Desktop / Cursor / Cline, etc.) can drive the editor directly.

• npm: @illustmaker/mcp (86 tools)
• HTTP API: https://asi.co.jp/illustmaker/api/mcp.php (102 methods)
• Full reference: MCP docs
• llms.txt: /illustmaker/llms.txt (concise reference for AI agents)

Session creation, shape add, pathfinder, alignment, masks, text editing, print-PDF export, template rendering, image generation, AI critique, macros, gallery publishing — all callable from AI.

Compatibility matrix

What this tool can and cannot do — a reference for evaluating pro use.

Supported features

Japanese fonts & licensing

• Bundled Google Fonts (Noto Sans JP, M PLUS series, Zen series, etc.) — SIL Open Font License. Commercial use OK.
• Adobe Fonts (requires a Creative Cloud subscription) — subject to Adobe's terms.
• Custom fonts (.ttf / .otf / .woff / .woff2) — registered locally on your device only, not transmitted. Confirm each font's license for commercial use.

Outlining text on the Japanese side avoids font-on-printer issues.

Scale & performance

Because this is a browser-based tool, there are practical upper limits on object count.

Recommended guidelines

Recommended flow for mass production

1. One file = one design
2. Feed CSV data through illust.batch_render
3. Output: pdf-imposition / png-zip / svg-zip
4. Up to 1,000 entries per request

Embedded image size guidelines

• Per image: ≤ 5 MB recommended (also the cap for import_from_url)
• Per session total: ≤ 5 MB
• Compress / resize large images beforehand

Techniques

1. Alt+drag to duplicate while moving

With the select tool, hold Alt (Option on Mac) while dragging to duplicate the shape as you move it. Great for repeated copies.

2. Shift for 15° rotation snaps

Drag the rotation handle while holding Shift to snap to 15° increments. Useful for precise tilts.

3. Smart guides for auto-align

Turn on Smart guides in the top bar. Moving a shape shows guide lines toward nearby shapes for easy alignment.

4. Numbered text in one go

Stack text vertically, group it, then apply "Align / distribute evenly" — menu lists and price tables tidy up instantly.

5. Lasso to grab distant shapes

For large drawings with far-apart shapes, use Q (lasso) to enclose and bulk-select. Shift adds to selection.

6. Eyedropper for style consistency

Found a shape whose fill / stroke you like? Press I to eyedrop and apply the same style elsewhere instantly.

7. Joining & splitting paths

Select two paths → right-click "Join paths" to merge into one. Reverse: split at anchor points.

8. Drawing guides

Drag from the ruler (⌘R) to create horizontal / vertical guides. ⌘; toggles guides as a whole.

9. Color-tag your layers

Sorting logo proposals A / B / C by layer color makes switching between them obvious at a glance — great for team reviews.

10. Auto-save peace of mind

Every edit auto-saves to your browser's localStorage. Closing the tab is safe — it restores on reopen.

FAQ

Can I use it commercially?

Yes, free for commercial use. Your works belong entirely to you.

Does it work on mobile?

Designed for desktop browsers. Mobile gets a warning — only PC is officially supported.

Is my data stored in the cloud?

No. It's saved in browser localStorage; never transmitted. Manage your exports yourself.

Can I open Adobe Illustrator files?

Files exported as SVG, yes. We also export .ai-compatible SVG so you can round-trip with Illustrator.

I want AI to operate it

The MCP API supports this — see the AI agent manual.

I'm new — will I be okay?

If you've used Illustrator, the controls will feel natural. New users can follow the Quick Start section and be exporting shapes in 5 minutes.

How do I contact you?

Please reach out via ASI Studio contact.