Skip to main content
The Visual Designer is where you build the graphics your outputs show: lower thirds, tickers, title screens, a station logo. A visual is made of layers, linked to live data like the track on air, and styled with your station branding. Save it and every output that shows it updates right away. There is no export step. Open the Visual Designer from Visuals → Designer, or open any visual from Visuals → Overview.

​
How the Visual Designer works

  1. Set up your branding at Settings → Outputs → Branding: colors, fonts, logo and text styles
  2. Start a visual from scratch, from a standard template, from a Photoshop file or with the generator
  3. Add layers and insert live data, like the program on air or the current track
  4. Animate the layers in and out on the timeline
  5. Save the visual and use it in your rundowns, scenes and outputs

​
Key concepts

Visual - A graphic made of layers on a 1280 by 720 canvas for 16:9. Visuals render as HTML, so they scale to any 16:9 output, Full HD or 4K. Layer - One element of a visual, like a text, a shape, an image or a video. Containers and stacks group layers. Branding - The colors, fonts, logo and text styles of a station. Standard templates and generated graphics use it. Brand color - A named station color. A layer that uses one is linked to it, so changing the color in branding changes every linked layer. Text style - A saved look for text, like Heading 1, applied by name. Editing the style changes every layer that uses it. Live data - Station data that updates on air, like the current track or the presenter. Text layers show it as a chip. Animation - How a layer moves when the visual goes on air (In) and comes off air (Out). Each animation is a bar on the timeline.

Set up your branding

Import colors, fonts and logo from your website, or enter them yourself.

Design your first visual

Create a visual, add layers, position them and save.

Insert live data

Show the track, program or presenter on air in a layer.

Animations

Animate layers in and out on the timeline.

Visual templates

Start from a standard template in your branding, or save your own.

Generate a graphic

Let VRA build an editable first version from your branding or an image.

Import from Photoshop

Turn a layered PSD into editable layers.

Bodymovin / Lottie animation layer

Play After Effects animations as a layer.

Layer types

Every layer type and its settings.

Designer controls and shortcuts

The header, the canvas toolbar, guides and every keyboard shortcut.
Something not looking right on air? See Troubleshoot the Visual Designer.

​
Limitations of the Visual Designer

  • The Visual Designer does not export visuals as video or image files. Visuals play on your outputs.
  • The website import reads your site as it is today. Old colors on the site mean old colors in the import.
  • Parts of a Photoshop file that can’t become editable layers come in as images.
  • The animations timeline shows only the parts of hand-written animation code it can read.
  • The generator creates at most 10 graphics per station per day.