> ## Documentation Index
> Fetch the complete documentation index at: https://docs.customei.com/llms.txt
> Use this file to discover all available pages before exploring further.
# The mockup designer
> Mark out where artwork belongs on a product photo, and check it with a real design before you publish.
The mockup designer is where a product photo becomes usable: you mark the patch that gets printed, shape it to the product, and try a sample design on it.
Open it from **Assets → Mockup**, click a library, then click the mockup you want to work on.
## A tour of the screen
**The left panel** lists everything on this mockup: the clip masks you've drawn, the design areas you've added, and the product photo itself (labelled *Base mockup*). A fresh mockup says *No clip masks yet* and *No design areas yet*, which tells you exactly what there is to do.
**The bottom toolbar** holds the tools:
| Tool | Shortcut | What it does |
| ----------- | ------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- |
| Arrow | V | Move and reshape whatever you select |
| Eye | | Preview: see the mockup as a shopper would, with nothing selected |
| Brush | P | Draw a clip mask. See [Warp and realism](/mockups/warp-and-realism#hide-artwork-that-spills-over). |
| Undo / Redo | ⌘ Z / ⌘ ⇧ Z | Step back and forward |
| − % + | | Zoom out and in. Click the percentage to fit the mockup to the screen. |
Nothing you do is kept until you click **Save changes** in the top right. **Close** walks away, and warns you first if you'd lose work.
## Design areas
A **design area** is the rectangle where artwork lands. Until a mockup has one, artwork covers the entire photo and hides the product.
**Area ID** is a short name for this patch of the product. Use something plain that describes the position, such as `front`, `back`, `sleeve` or `handle`, because you'll be choosing it from a list later.
**Width** and **Height** are the size of the artwork this area accepts, in pixels. Match the print size you design at, so what you see is what gets printed.
The area appears on the photo as a box with handles. Drag the middle to move it, drag a corner to resize, and use the handle above it to rotate. Line the box up with the printable patch of the product.
The left panel now lists the area with its size, a rotation box, and **Flip 180°** for a product photographed upside down.
If the surface curves, drag the grid points inside the box so the grid follows the product. See [Warp and realism](/mockups/warp-and-realism).
Click **Save changes**. Every design template that uses this mockup picks up the new print area.
### More than one area
Add an area per printable surface: the front and back of a shirt, both sides of a mug, the inside of a card. The **Active area** dropdown under **Add design area** chooses which one you're working on, and the grid handles and effects always apply to the active area.
Name areas by where they are on the product, not by what you plan to print there. `back` still makes sense next year; `christmas-logo` won't.
## Try a real design on it
Guessing whether a print area is right is a waste of time. Upload something and look.
Click **Choose artwork from device** and pick any image. It drops into the active design area, scaled to fit, so you can check the placement, the warp, and the blending against something realistic.
The sample is only for your eyes while you work here. It isn't saved with the mockup and no customer ever sees it.
Preview with your busiest design, the one with edge-to-edge colour and fine lettering. A pale, sparse design flatters a mockup that isn't actually lined up.
## Where to next
Mesh, displacement, blending, and clip masks.
Where mockups live and how to add them.
Use this mockup in a design template.
Per-frame settings inside the editor.