WrapStudio Design — vector wrap design, from concept to cut file

Who it's for

Designers live here: it is a full vector design application in the browser, purpose-built for wrap production. Owners and managers use it to keep design in-house instead of paying for Illustrator seats and template subscriptions, and to move a design straight onto the job's quote and proof without exporting anything.

Where it fits

WrapStudio Design opens from the Studio hub → the design app (/studio/design). It sits between winning the job and printing it: design the wrap, get the customer's sign-off through the proof link, price the material on the quote, then hand production the print PDF and cut files. See workflow-map.md.

Overview

The design app is a layered vector editor working at true physical scale — a van-side artboard knows it is 220 real inches wide (drawn at 1:10), so every export, panel, and quote line is dimensionally honest. Everything a wrap design needs lives in one surface: drawing tools, typography with warps, print-grade export, panelization, AI generation, and the job loop.

The canvas — artboards with rulers, guides, snap lines, zoom/pan. Multiple artboards per design (vehicle views: sides, rear, hood).
Toolbar — Select, Distort, Rectangle/Ellipse/Line/Polygon, Text, Pen, Pencil, Node editor, Eyedropper, Scissors, Measure.
Left panel — Layers list and the Brand kit (fonts).
Right panel — properties for the selection: paints, strokes, typography, effects, transforms, Pathfinder, panels.
Top bar — design name, AI, Find & replace, History (versions), Export, undo/redo, zoom.

Capabilities

Templates & import

Import .svg, .ai, and .pdf files as editable artwork, or start from a straight-on vehicle photo (below).
Layered TIFF templates (Bad Wrap, SAi, and other vendor packs) open with every layer separated — and hidden vendor layers ("turn on for dark designs," alternate colorways) are imported and revealed instead of silently dropped.
Template-from-Photo — turn a straight-on vehicle photo into a locked, traceable template without a subscription template pack:
1. Upload the photo.
2. Remove background (1 credit) — required before outline tracing is offered; on a cluttered photo, skip it and you still get the photo-plus-calibrate path below.
3. Wraptor tries to identify the vehicle (year/make/model) from the photo to pre-fill the design's name; low-confidence guesses are skipped gracefully.
4. Trace outline (1 credit, only offered after background removal) — an AI redraw of the body outline, door seams, and window shapes, landing as editable layers above the locked photo. Trace is honest about its limits: glass reflections tend to trace as stray interior scribble and wheels trace as near-solid shapes — clean those up in the layer panel before you finalize, or skip tracing and draw over the photo by hand.
5. Calibrate the scale — pick the Calibrate tool and click both ends of a known dimension (the wheelbase is easiest), then type its real inches.
6. Finalize: the photo (and any traced outline) locks, with an editable Design layer on top ready for your artwork. A credit-charging step that fails leaves the wizard resumable at the prior step — no orphaned charge; a failed trace is refunded automatically.

Drawing & editing

Pen tool with bezier handles; Pencil freehand (auto-smoothed); node editing (corner/smooth, broken handles); Scissors to cut paths open; Simplify; Round corners; Offset path; Outline stroke.
Curvature tool (⇧`) — click to place points and the path smooths itself through them, no handle-dragging: ⌥-click drops a corner point, click your first point to close, Enter commits an open path, Esc cancels.
Lasso select (Q) — draw a freehand loop and everything whose geometry sits inside it selects (⇧ adds to the selection); a loop drawn wholly inside one big shape selects nothing, so you can lasso details sitting on a background.
Brush cleanup: the Eraser (⇧E) drags a round brush (with a circle preview at the brush size) that erases inside closed shapes and trims open strokes wherever it crosses them; Smooth (⇧S) brushes along a selected path to relax the anchors it touches (replacing their custom handles); Path eraser removes exactly the stretch of a selected path you brush along.
Stroke controls: numeric dash pattern editor (up to 8 values) with dash offset, miter limit, and start/end arrowheads (triangle, bar, or circle, scaled to the stroke width) — all of it renders identically on canvas and in PNG, SVG, and print PDF exports.
Anchor cleanup in the node editor: select two or more anchors and Average them horizontally, vertically, or both (⌥⌘J); select exactly two open end anchors and Join (⌘J) fuses or bridges those specific ends — closing a subpath, bridging two subpaths, or merging two layers.
Pathfinder: Unite, Minus, Intersect, Exclude, plus Divide (split into faces — per-color plot pieces), Minus Back, and Crop. Make/Release compound path for donut shapes.
Flip horizontal/vertical, numeric Scale with fit-to-artboard, Step & repeat grids (sticker sheets), align/distribute with key-object alignment, group/ungroup with isolation mode for groups, clipping masks and opacity masks.
Custom pivot — toggle it on, drag the crosshair on canvas or type X/Y, and rotate/reflect/scale/shear all use it; numeric shear H/V (shapes convert to paths; "Shear copy" + ⌘D chains stepped slants); scale with copy, and ⌘D repeats a scale about the same fixed center just like rotate-copy chains; distribute accepts a typed gap (blank = classic equal spacing within the span). A 9-point pivot grid arms the custom pivot at any corner, edge midpoint, or center of the selection bounds with one click.
Arbitrary-angle reflect — type a Mirror ° in the Transform section and hit Reflect or + Copy to mirror across a line at any angle (shapes and text stay live, not flattened to paths); ⌘D repeats the same reflection.
Live repeats — the Repeat (live) panel section puts real repetition on any layer: Radial rings 2–24 copies around a center you place, Mirror reflects across a movable ↔/↕ line. Copies render as locked ghosts on every surface including print and cut — a repeated sticker cuts that many times — and moving the source moves the whole construct. Repeats sit inert on clip/mask sources and on layers inside a group that already repeats (the panel says why and offers Remove repeat).
Make Guides from selection (⌘5, also in the right-click menu) — turns the selection's edges into artboard guides in one step; it never removes guides you already have (guides cap at 32 per axis).

Typography

14 curated font families plus your uploaded brand fonts; per-word styled spans; letter spacing, baseline shift, justify.
Warps: Arc, Wave, Flag, Rise (the truck-lettering looks) and text on a path.
Area text: fixed frames with vertical alignment and an overflow badge. Convert to outlines for cut work.
Gradient text — linear and radial gradient fills render as real gradients on text (the chrome/fade truck-lettering look), continuous across all glyphs even through warps, letter spacing, and text-on-path.

Color & paints

Solid, linear/radial gradients, pattern fills with an AI seamless-pattern generator, ~165 real 3M 2080 and Avery SW900 film swatches, named spot colors that export as separations, document swatches.
Gradient and pattern swatches with color groups — the "+" in any fill editor saves the current paint as a global swatch, gradients and patterns included (not just solids), linked to the layer as it saves; give swatches a Group name in the swatch edit row and the chips render under group headers. Recoloring a swatch updates every linked layer in one step — but never your manual per-object alpha — and manually editing a linked fill detaches it from the swatch.
On-canvas gradient stops — the gradient annotator shows stop chips right on the gradient axis: drag a chip to move a stop, double-click the axis to add one (up to 8), Alt-click a chip to remove (min 2), and the selected chip highlights the matching row in the panel.
In-app color picker — color swatches (fills, stroke paint, gradient stops, effect colors, artboard background) open a picker popover (saturation/value square + hue strip) with hex, R/G/B numeric entry, and alpha; a screen eyedropper button appears on Chromium browsers. Two niche spots still use the OS dialog: the per-span color chip in the span editor and the swatch-list recolor well.
Eyedropper copies styles between layers or samples a pixel color from any photo.
Production Color Mode — a toggle in the top bar that swaps the canvas to a print-intent CMYK preview: solid fills render through a CMYK simulation instead of their raw screen hex. Colors that will shift noticeably in print get an out-of-gamut badge on their fill control; open Nearest vinyl on any fill to see the top-3 closest 3M 2080 / Avery SW900 films with their ΔE (color-difference) distance, and apply one with a click to tag the fill with that film. Every CMYK/ΔE/gamut number on this surface is labeled a screen approximation — verify the real color on a physical deck before committing a job to it, the same caveat that applies to the swatch library generally. Toggling the mode is a view-only preview; it doesn't touch your saved design or undo history.

Print PDFs in CMYK When Production Color Mode informs your color choices, the Print PDF export writes solid fills as true CMYK color operations (not just an RGB-to-CMYK guess baked into a raster) — vector exports for non-print use (PNG, editable SVG) are unaffected.

Production output

Print PDF — vector output with true CutContour spot separations (RIPs auto-detect), vector gradients, named spots, per-side bleed, trim/bleed boxes, auto-scale for oversize boards.
Panelization — auto-split to your media roll width with draggable seams, overlap bands, a labeled install map page, per-panel print pages at panel-local resolution, and lap lines printed exactly where the neighboring panel's edge lands.
Cut files — SVG and EPS with the CutContour custom color, per-panel when panelized.
Roll nesting — select your cut shapes, right-click → Nest onto roll: the parts pack onto a new roll-width artboard so plot jobs waste less vinyl.
Production pack — one ZIP: print PDF, panels PDF, cut files, preview, README.
Preflight — automatic checks before export: image resolution at print size, open cut paths, missing bleed, panels over media, raster fallbacks.
Body-line & recess overlays — mark door handles, seams, and recesses (a whole selection at once) as orange hazard guides that never print, cut, or raster; preflight warns when text or a logo crosses one, so distortion gets planned instead of discovered on the vehicle.
Also: PNG at chosen PPI, TIFF, editable SVG, a client Proof PDF (one labeled page per artboard), and Fleet series (a {N} token becomes numbered unit pages).
Fleet Data Merge — a different kind of fleet export: upload a CSV (one row per vehicle) and map its columns onto the design's text layers by name — Wraptor auto-guesses the mapping from matching column/layer names, and you can adjust it. Preview any record before running. Exporting produces one vector print PDF per row, each with that row's text swapped in (unit numbers, names, phone numbers — whatever your columns hold), zipped together with filenames from a column you choose. Unlike Fleet series' raster unit pages, Data Merge output is full print-grade vector PDF per vehicle.

Full design composer — describe the design and get an editable layered layout (shapes, gradients, real text), never a flat image.
Prompt-to-vector generation with auto-trace; trace any photo/logo to editable paths; whole-design AI recolor (cut lines never change); AI restyle and background removal on image layers, in place; photorealistic photo mockups on the customer's own vehicle.
Start from vehicle photo — a straight-on side shot becomes a locked, scale-calibrated design template. No template subscription required.

The job loop

Link a design to a job, then from the export dialog: attach renders to the job's files, create a proof (the customer approval link is copied for you), and add a quote line priced from the design's square footage. Material deducts from inventory rolls. Version history with restore.

Step-by-step tasks

Design a van side from the customer's photo
1. New design → Start from vehicle photo → upload a straight-on side shot.
2. Remove background (1 credit) if you want the option to trace an outline; skip it to go straight to calibrate.
3. Optionally Trace outline (1 credit) — clean up any glass/wheel scribble in the layer panel.
4. Artboard settings → Calibrate scale → click both ends of the wheelbase, type its real inches.
5. Design over the locked photo; use film swatches and brand fonts.
6. Export → Photo mockup to show the customer; Create proof for sign-off.
Take a design to production
1. Select the art → Create cut line from selection (one united CutContour path).
2. Artboard settings → Panels → media width + overlap → Auto-panelize; drag seams if needed.
3. Export → check Preflight, then Production pack (ZIP).
Let AI draft the layout
1. AI button → check Full design → brief it like a client ("plumbing company, FLOW PROS, 555-0100, navy + lime, bold").
2. The layout lands as editable layers — recolor, re-warp, rearrange, then export as usual.
Batch-export a fleet from a CSV
1. Finish a design with the text layers you want to vary (unit number, name, phone) named clearly.
2. Export → Data merge (CSV) → upload your spreadsheet.
3. Check the auto-guessed column-to-layer mapping (adjust any that guessed wrong), pick a filename column, and flip through the record preview.
4. Run it — Wraptor produces one vector print PDF per row, zipped together.
Check a design for print-color risk
1. Toggle Production Color Mode in the top bar.
2. Look for the out-of-gamut badge on any fill — it flags colors that will shift when separated to CMYK.
3. Open Nearest vinyl on a flagged fill to see close 3M/Avery matches with their ΔE distance, and apply one if it's a good fit.
4. Remember every number here is a screen approximation — confirm on a physical deck before committing.

Limits worth knowing

Pattern fills, opacity masks, drop shadows, and brand-font text print via high-resolution raster inside the PDF (everything else stays vector). Spanned text edits in the inspector rather than on-canvas. EPS files can't be imported directly — use the .ai or .pdf from the same template download.

Gradient text prints as vector shading when the font can outline and every stop shares one alpha; per-span styled, path-warped, and brand-font gradient text rasterizes in the print PDF like the other raster fallbacks. Gradient text is fills only — text strokes and per-span color overrides stay solid, and pattern fills aren't offered on text. On gradient strokes, arrowheads flatten to the first stop's color.

Live repeat copies aren't counted by preflight, material estimates, or roll nesting (those see the source only — budget vinyl accordingly), and smart guides don't snap to repeat ghosts; rotating, reflecting, or scaling a repeated source leaves its repeat center where it was (move the source and the whole construct travels). The Eraser and Smooth brushes work on paths and shapes only — text and images don't erase (convert text to outlines first).

Template-from-Photo's outline trace only works well on a background-isolated vehicle — on a cluttered photo, skip tracing and use the photo + calibrate path instead (Wraptor won't offer the trace step until background removal has run). Even on a clean cutout, glass reflections and wheels are known trace artifacts; the traced layers land editable so you can delete the stray marks before locking. Production Color Mode's CMYK/gamut/ΔE numbers are a screen approximation, not an ICC-accurate proof — always verify on a physical deck before a job goes to print. Fleet Data Merge maps CSV columns onto text layers only (no image/logo swapping per row).