Illustmaker User Manual
Illustmaker is a free vector illustration tool that runs entirely in your browser.
From the basics through to advanced techniques, in one place.
| Requirements | A modern desktop browser (latest Chrome / Safari / Firefox / Edge) |
|---|---|
| Sign-up | None. Just open the page |
| Saving | Auto-saved in the browser. Export to file at any time |
| Price | Completely free. Commercial use OK |
Quick start
A whirlwind tour from opening the editor to exporting your first shape.
1. Open the editor
Click the "Try Now" button on the home page, or visit /illustmaker/app/en/ directly. On first launch, a dialog asks for canvas dimensions.
2. Draw a shape
Pick Rectangle (R) from the left toolbar and drag on the canvas. Hold Shift while dragging to constrain to a square.
3. Change the color
With the shape selected, click "Fill" or "Stroke" in the right panel to open the color picker.
4. Export
Use File → Export in the top menu, or click SVG Export in the toolbar to save as SVG / PNG / JPEG / PDF.
Tools
Available from the left toolbar. Shortcut key in parentheses.
V | Select | Pick shapes by click or marquee drag. Shift to add, Alt+drag to duplicate. |
A | Direct Select | Edit individual anchor points. Reshape paths precisely. |
Q | Lasso | Freeform lasso selection across many shapes at once. |
P | Pen (Bezier) | Click for corner points, drag for smooth curves. Pro-grade drawing. |
R | Rectangle | Drag for rectangle. Shift = square. Alt = from center. |
O | Ellipse | Drag for ellipse. Shift = perfect circle. |
| — | Polygon / Star | Hover to access sides / inner-radius options. |
L | Line | Two-point line. Shift snaps to 15° angles. |
T | Text | Click for point text, drag for area text. 1500+ fonts. |
I | Eyedropper | Sample fill / stroke style from another shape. |
G | Gradient | Apply linear or radial gradients. |
N | Pencil | Freehand strokes smoothed via Schneider curve fitting. |
B | Brush | Paint directly on an image layer. |
E | Eraser | Carve away path or pixel-erase images. |
H / Space | Hand | Pan the canvas. Space temporarily switches to Hand. |
Keyboard shortcuts
File
| New document | ⌘N |
|---|---|
| Export SVG | ⌘E |
| Save as | ⌘S |
| Open | ⌘O |
Edit
| Undo | ⌘Z |
|---|---|
| Redo | ⌘⇧Z or ⌘Y |
| Cut / Copy / Paste | ⌘X / ⌘C / ⌘V |
| Duplicate | ⌘D |
| Select all / deselect | ⌘A / ⌘⇧A |
| Delete | Delete or Backspace |
View
| Zoom in / out | ⌘+ / ⌘- |
|---|---|
| Fit to screen | ⌘0 |
| 100% | ⌘1 |
| Toggle grid | ⌘' |
| Toggle ruler | ⌘R |
Arrange
| Forward / backward | ⌘] / ⌘[ |
|---|---|
| Front / back | ⌘⇧] / ⌘⇧[ |
| Group / ungroup | ⌘G / ⌘⇧G |
| Lock / unlock | ⌘2 / ⌘⌥2 |
Layers
Manage layers from the "Layers" tab on the right panel.
- Visibility — click the 👁 icon
- Lock — click the 🔒 icon to prevent edits
- Reorder — drag a layer row up or down
- Group — select multiple layers and click "Folder"
- Color tags — click the small square at the left edge to color-code layers
Color & gradients
Solid fill
"Fill" → "Solid" in the right panel. Pick a HEX value, Adobe-style palette, or sampled color.
Gradients
Press G or "Fill" → "Gradient".
- Switch between linear / radial
- Add / remove / drag gradient stops
- Adjust angle via drag handle
Saving palettes
Click the "+" inside the color picker to save the current color. Project-level palettes let you keep a consistent look across files.
Text
Point vs. area text
- Click — single-line point text
- Drag — area text that flows inside a box
Fonts
1500+ Google Fonts are built in. Adobe Fonts and local files (.ttf / .otf / .woff / .woff2) can be loaded too.
Text on a path
Select a path, then choose "Text on path" in the right panel to flow text along a curve.
Export
SVG | Vector | Editable SVG. Web & print friendly |
SVG optimized | Vector | Stripped & minified SVG |
PNG | Raster | Transparent. Scale 1x / 2x / 3x |
JPEG | Raster | Opaque. Quality adjustable |
PDF | Vector | True vector PDF (via TCPDF). Print-ready |
.ai-compatible | Vector | SVG that Illustrator can open |
.json | Project | Full editor state for backup |
Techniques
1. Alt+drag to duplicate while moving
Hold Alt (Option on Mac) while dragging with the Select tool to clone the shape as you move. Great for repeating patterns.
2. Shift for 15° rotation snaps
Hold Shift while dragging the rotation handle to snap to 15° increments. Perfect for precise tilts.
3. Smart guides for auto-alignment
Toggle "Smart guides" in the topbar. Moving a shape near another shows guide lines so things snap perfectly.
4. Quick numbered text grids
Stack text vertically, group them, then "Align → distribute" to spread evenly. Menus and price lists snap into shape.
5. Lasso for scattered shapes
Use Q (lasso) to draw freeform around shapes far apart on the canvas. Shift to add to existing selection.
6. Eyedropper for instant style
Press I on any shape, then click another to apply the same fill / stroke / opacity instantly.
7. Combine / split paths
Select two paths, right-click → "Combine paths" to merge. Split paths back at any anchor point.
8. Pull rulers for guides
Show rulers with ⌘R, then drag from the ruler to create horizontal / vertical guide lines. Toggle guides with ⌘;.
9. Color-tag layers for variations
Color-code "Logo A / B / C" with layer tags to flip between options visually. Great for team reviews.
10. Auto-save peace of mind
Every edit is persisted to browser localStorage. Close the tab and reopen — your work is right where you left it.
FAQ
Can I use it commercially?
Yes. Illustmaker is free for personal and commercial work. You own the artwork you create.
Is it mobile-ready?
Not yet. Illustmaker is built for desktop browsers; you'll see a warning on phones.
Is my data uploaded to a server?
No. Files are stored in your browser's localStorage and never sent to a server. Export the files yourself to back them up.
Can it open Adobe Illustrator files?
If exported as SVG, yes. Illustmaker also offers .ai-compatible export so you can move between tools.
I want to drive it from AI
Use the MCP API — see the AI agent manual.
I've never used a vector editor
If you've used Illustrator, you'll feel right at home. New users can start in the Quick Start section and export their first shape in five minutes.
Where can I get help?
Reach out at ASI Studio contact form.