This article walks you through the three main areas of the Templified editor — the canvas, the layer panel, and the properties panel — and explains the five layer types you'll work with in every template and design.
The editor at a glance
When you open a template or a design, the editor is laid out in three areas:
- Canvas (center) — a live preview of your output. What you see here is what renders, at the template's real dimensions.
- Layer panel (left) — the list of every layer in the design, labeled Layers, with a count badge. Layers higher in the list sit on top of layers below them.
- Properties panel (right) — the controls for whatever is currently selected. When you're editing a design in Studio, this panel also has a Send To tab for staging renders to print and other destinations.
A badge in the header tells you what you're editing: Template means changes affect the master layout, while Studio means you're editing one customer design. See Templates vs. designs for why that distinction matters.
Canvas vs. layer panel
The canvas and the layer panel are two views of the same thing. The canvas shows layers visually, stacked in order; the layer panel shows them as a list you can scan, rename, reorder, and organize into folders. Use whichever is faster for the job:
- Click a layer on the canvas when you can see it and want to move or restyle it.
- Click its row in the layer panel when it's hidden behind other layers, locked, or hard to hit precisely.
Each row in the layer panel also has two quick toggles that appear on hover: an eye icon to hide or show the layer on the canvas, and a lock icon to lock it so stray clicks can't move it. Hidden layers still exist — they're just not drawn.
Selecting a layer
Click a layer on the canvas or click its row in the layer panel. The selected layer gets resize and rotate handles on the canvas, and the properties panel switches to that layer's controls.
Canvas selection is pixel-accurate: clicks only register on a layer's visible pixels, so you can click through the transparent parts of an upper layer to select what's underneath. Until you select something, the properties panel shows "Select a layer to edit its properties."
You can also select several layers at once and edit them as a group — see Working with layers: select, multi-select, copy and paste.
Layer types
Every layer is one of five types. You add new ones from the buttons at the left end of the editor toolbar:
| Toolbar button | Layer type | What it's for |
|---|---|---|
| Text | Text | Names, numbers, headlines. Can be static or a dynamic value filled in per design. |
| Dynamic Image | Photo | A photo slot that holds a different photo in every design — the layer you fill with each athlete's or customer's photo. |
| Graphic | Static graphic | Fixed artwork that's part of the template: backgrounds, logos, frames. The same in every design. |
| Shape | Shape | Rectangle, Circle, Ellipse, Triangle, or Line — color blocks, dividers, accents. |
| QR Code | QR code | A scannable code whose content can be fixed or filled in per design. |
The distinction that matters most day to day is photo layers vs. static graphics: photo layers change with every design, static graphics don't. For how to fill photo layers, see Adding photos to a design.
The properties panel
The properties panel always reflects the current selection:
- One layer selected — you get that layer type's full controls: text formatting for text layers, fit mode and image adjustments for photo layers, fill and stroke for shapes, and so on.
- Several layers selected — the panel shows a summary of the selection. Bulk editing is available when all selected layers are photo layers.
- Nothing selected — the panel prompts you to select a layer.
Common controls like position, size, and rotation appear for every layer type, with type-specific sections below them.
Comments
0 comments
Article is closed for comments.