Skip to main content

Storyboard

Plan a film, an animation or an ad frame by frame. Each frame has its own canvas to draw on, with pictures, video and 3D where you need them, and its shot details beside it, and you can play the whole storyboard back with its timing and transitions.

Adding A Storyboard​

  1. Click on the project page where you want the Storyboard to be added, and type / to open the element menu
  2. Search for Storyboard
  3. Select it to add it to the page

Adding A Frame's Details​

Beside each frame's canvas, add its shot details: Date, Title, Page, Scene, Shot, Duration (seconds), Shot Description, Action, Dialogue, Audio, Location, Lighting, Props and Clothing, Special Effects, Camera Movement, Transition, Focal Length & Perspective and Notes.

Drawing​

Select a tool in the toolbar, or press its key while the Storyboard is selected.

ToolWhat it does
Select (V)Select, move and resize
Draw (D)Draw freehand, with the brush type, style, size, opacity and smoothing you set beside it
Eraser (E)Erase what you've drawn
Line (L), Rectangle (R) and Circle (C)Draw a shape
Text (T)Click to add text
Colour picker (I)Pick a colour from the frame

Set the Stroke colour, Fill colour and Frame background colour in the toolbar.

Layers, Grid And Onion Skin​

Everything in a frame is on a layer of its own: a drawing, a picture, text, a video, a 3D model, a camera or a light. In the Layers tab beside the frame, drag the layers into order, and hide, lock, rename, duplicate or delete them, or set a layer's blend mode.

In the Grid tab, show a square grid or the rule of thirds, and snap to the grid to line things up. For animation, turn on the onion skin in the Onion Skin tab to see the frame before or after behind the one you're drawing.

To place something exactly, select it and fit it to the frame, its width or its height, flip it, line it up with an edge or the centre, or reset its rotation. The keys are under Keyboard Shortcuts.

Adding Pictures, Files And 3D​

Drag files onto a frame, or hover + and select Import file to upload pictures, PDF, Illustrator and Photoshop files, or 3D models. You can also select Pick from inventory to add a file you've already uploaded, and Add from museum or Add from stock images.

On Studio and Pro, a frame can have 3D models, cameras and lights:

  • 3D models: GLTF, GLB, OBJ, FBX, DAE, 3DS, PLY, 3DM and STL files. Files from 3ds Max, Maya, Cinema 4D, SketchUp and Blender can't be opened in the browser, so export them as GLB or one of the other formats first
  • Cameras: With a field of view, rotation and focal length
  • Lights: With a type, colour and intensity

To go back to the 3D view you started with, press ⌘ / Ctrl + ⌥ / Alt + R.

Playing It Back​

Press Space to play or pause, ← and → to step backward or forward, and ⌥ / Alt + L to loop. Each frame plays for its duration, with its transitions, animations and parallax. The frames play in their order on the storyboard, so drag a frame to move it.

Transitions, Animation And Parallax​

Bring the storyboard to life before it plays, frame by frame:

  • Transitions: Under Transition in a frame's details, select how the frame moves on to the next one, Cut, Fade, Crossfade, Slide or Wipe, and how many seconds it takes. The transition plays over the end of the frame, so the storyboard doesn't get longer
  • Animation: To move something in a frame, select it and click the wand. Add an animation, like Fade in, Fade out, Slide in, Scale, Rotate or Bounce, and set when it starts, how long it takes and its easing. Something can have more than one animation
  • Parallax: For a sense of depth, click the stacked cubes and turn on parallax. While each frame plays, its layers slide sideways at different speeds, the ones in front further than the ones behind, like a camera moving past. Select a preset (Cinematic, Floating, Dynamic or Dramatic), or set the speed and the number of layers yourself. How many layers you can have depends on your plan

Adding A Data Source​

Hover + and select Connect data source to bring in another Storyboard, a Table, Moodboard, Whiteboard, Video, Mindmap or, on Studio and Pro, a floor of a Blueprint. It's added to the selected frame and updates when the source does. A Table adds the frames' details from its rows, like a shot list.

Using A Storyboard As A Data Source​

A Moodboard, Whiteboard, Video, Table or another Storyboard can show its frames, and a To Do List, To Do Kanban, Content Calendar or Timeline can add a frame to a task. Hover + on the storyboard and select Copy connection ID to find it quickly in their list. They update when the storyboard changes.

Client Approval​

When you send the page to a client in a client revision, they can approve the storyboard.

Export Your Storyboard​

Click the export icon in the storyboard's toolbar. The formats are:

  • PDF
  • JSON
  • Photoshop (PSD)
  • PNG
  • JPEG
  • WebP
  • SVG
  • TIFF
  • Animated PNG
  • Animated GIF
  • MP4
  • WebM
  • MOV
  • GLB, glTF and OBJ, on Studio and Pro

Before you export, select the page size, orientation and image quality, and for a video or an animation, the frames per second. You need an internet connection to export a PSD.

Keyboard Shortcuts​

These shortcuts work when the Storyboard is selected:

ActionShortcut
Add a frame⌥ / Alt + N
Duplicate the selected objects, or the frame when nothing is selected⌥ / Alt + D
Delete the frame⌥ / Alt + Delete
Go to the previous or next frameShift + ← or Shift + →
Play or pauseSpace
Step backward or forward← or →
Loop⌥ / Alt + L
Show the grid⌥ / Alt + G
Show the rule of thirds⌥ / Alt + 3
Snap to the grid⌥ / Alt + S
Onion skin⌥ / Alt + O
Show the previous frame behind this one⌥ / Alt + Shift + P
Show the next frame behind this one⌥ / Alt + Shift + N
Show the layers⌘ / Ctrl + Shift + L
Bring the selection forward⌥ / Alt + ↑
Send the selection backward⌥ / Alt + ↓
Bring the selection to the front⌥ / Alt + Shift + ↑
Send the selection to the back⌥ / Alt + Shift + ↓
Fit the selection to the frame⌥ / Alt + F
Fit to the frame's width or height⌥ / Alt + W or ⌥ / Alt + H
Flip horizontally or vertically⌥ / Alt + X or ⌥ / Alt + Y
Reset the rotation⌥ / Alt + R
Line up left, centre or right⌥ / Alt + Shift + L, C or R
Line up top, middle or bottom⌥ / Alt + Shift + T, M or B
Reset the 3D view⌘ / Ctrl + ⌥ / Alt + R
Export⌥ / Alt + E

The drawing tool shortcuts are in the table under Drawing.