Tutorial 4 of 7
Arrange a spatial moodboard
Intermediate 7 min
Place reference cards, notes, color swatches and images freely on a canvas, move them with mouse or keyboard and export a PNG.
The board is a list; the moodboard is a table you can spread things out on. Open the Moodboard tab at the top. The moodboard belongs to the board: it autosaves, works with Undo, and travels with project files and Drive saves.
1. Add cards
The tool row above the canvas offers four kinds of cards:
- Reference + Add reference card – pick a reference of your board; the card shows its screenshot (or accent color) and title. When you remove the reference from the board, its moodboard cards go too.
- Add note – a sticky note for a thought or a rule ("one accent color only").
- Add color swatch – a color with a name.
- Add image… – an extra picture that is not a reference, such as a texture or a photo you took. It is compressed like screenshots.
New cards land in the first free spot. A moodboard holds up to 80 cards.
2. Move and arrange
Drag any card with the mouse, a pen or a finger. With Snap to grid on, cards align to a 20-pixel grid; switch it off for free placement.
With the keyboard, Tab to a card and use the arrow keys (20 pixels per press with snapping, 5 without; hold Shift for five times larger steps). Delete removes the focused card. Every move is announced and can be undone.
Zoom out, Zoom in and Fit change the view; Fit shows all cards at once.
3. Edit the selected card
Click a card (or press Enter on it) to select it. The panel next to the canvas lists every card and shows the Selected card:
- Caption, Note text or Swatch name, and Note color / Swatch color.
- X position, Y position, Width and Height for exact placement – also the keyboard way to resize a card.
- Bring forward and Send backward change which card lies on top.
- Duplicate and Remove card.
The card list doubles as a text overview of the canvas for screen readers.
4. Export the moodboard
Export… → Moodboard PNG creates an image of all cards, cropped to their area and at double resolution for sharp text. Long text is shortened with "…" to fit its card. If another usefulweb.site app accepts images, Moodboard image in another app… hands the PNG over in the browser – for example to a photo editor.
When you export only a filtered selection of the board, the moodboard keeps just the reference cards of the selected references; notes, swatches and images are left out because they may be private.
Ready to try it?