How to use CMC Design Studio

Video Walkthrough

Sorry for the audio quality, not sure what happened. Not my best work. I'll fix it sometime later…

Overview

Build a hat proof: add hat styles, choose colors, place logos, fill in the customer details, then export a PDF proof. Your work saves automatically in this browser as you go.

Toolbar buttons

Add Template — opens the picker. Check one or more hat styles and click Add; each becomes its own panel below.
New Proof — clears everything and starts fresh (new Proof ID and today's date).
Save Proof — downloads a .save file capturing the entire proof (hats, colors, logos, and details) so you can reopen it later.
Load Proof — reopen a .save file to keep editing.
Export PDF — generates the printable proof: a cover page followed by one page per hat.
? — this help.

Proof Details (the cover page)

The panel at the top is your cover page. Type the Customer Name, Sales Contact, Date, and Notes directly onto it. The Proof ID is generated automatically. These print on page 1 of the PDF and are used in the file name (Customer_ProofID.pdf).

Adding & managing hats

Each hat has a preview on the left and a Configuration column on the right. Use Duplicate to copy a hat (keeping its colors) or Remove to delete it. You can add as many hats as the order needs.

Selecting colors

In a hat's Configuration column, every colorable part — Panel, Bill, Rope, and so on — has a row of color swatches. Click a swatch to recolor that part on the hat. Each hat is colored independently, and the Order Details list updates with the color names.

Adding logos

Each hat has one or more logo zones (e.g. Front and Side). Drag an image onto a zone, or click Browse Files. Once placed, drag the logo to reposition it and use the corner handles to resize. Select a logo and press Delete to remove it.

How logos are converted: your image is automatically resized to a web-friendly size. If it already has a transparent background (most brand logos do), it's placed as-is. If it has a solid background, the background is automatically removed so the logo sits cleanly on the hat.

Copying a logo to other locations

Click a placed logo to select it, then click the ⧉ Copy to… button that appears above it. A list shows every other logo location across all your hats — check the ones you want and click Copy to drop the same logo into each (at that spot's position).

Exporting & saving

Export PDF builds the proof (cover + one page per hat) and downloads it.
Save Proof / Load Proof let you store an editable .save file and pick up where you left off.
Auto-recovery: your current work is saved in this browser automatically — if you refresh or accidentally close the tab, it comes back when you return. Use New Proof to start over.

Adding a New Hat Template (CMC team)

Step 1 — Prepare the artwork in Illustrator (starting from the template PDF):

Mark the color groups with spot colors. Create a spot color per controllable group and fill every shape in that group with it: Panel (00FF00), Bill (FF0000), Rope (0000FF). Spot colors make it easy to color all of a group's objects consistently — one solid color per group; the grey shading stays as-is. Claude finds the objects by their spot-color fill and names them to their color control group during conversion.
Mark the logo zones. Draw a rectangle over each logo placement and name it with "Logo" in the name. Each box becomes its own Add Logo section in the designer — so two boxes named Front Logo and Side Logo produce two logo configuration sections, one per spot (templates currently use 1 or 2). The box also sets the default placement: an uploaded logo drops in scaled to fill the drawn box as fully as possible while keeping its proportions (it is never stretched or distorted), and the user can then drag or resize it from there. So draw each box at the position and maximum size a logo should normally occupy. Layer order and visibility don't matter — the box is removed during conversion and never appears in the final artwork or PDF.
Save as PDF with Preserve Illustrator Editing Capabilities checked (that's where the logo-box names travel). Default settings otherwise.

Step 2 — Upload it on the Templates page and review the result. Click Add Template, give it a name, and pick the PDF. Generation takes a minute or two — the tool (Claude behind the scenes):

Finds each color region by its spot-color fill and wires it to a color control (the spot-color values it looks for are set on the Settings page).
Reads each named logo box's position and size, then removes the box from the artwork.
Reads the sheet's swatch chart to set the template's color options (standard palette if there's no chart) — every group, including Rope, gets the full set.
When it finishes, a Review import window shows what was found — color groups with element counts, the color options, and the logo locations. Check it against the artwork: Yes keeps the template (it appears in the designer's picker immediately), No removes it so you can fix the artwork and re-upload.

Step 3 — Manage templates on the same page. Edit changes the display name, replaces the artwork (re-runs generation), or edits the control file directly for fine-tuning. Delete moves a template to the Archived list, where Restore brings it back. PDF-sourced templates keep their original PDF (shown with a gold PDF badge). Build and test templates on the dev site — the live site's templates are replaced from dev on each release.