Design your first Visual

The

Visual Designer in Visual Radio Assist is a tool for creating visuals that enhance your broadcast experience. This guide walks you through the essentials of designing your first visual.

What is a Visual?

In Visual Radio Assist, a visual is the graphical content your audience sees during a broadcast. This can include animated graphics, text overlays, tickers, or other media elements. A visual consists of layers, which you can stack, position, and configure to achieve your desired effect.

Getting Started with the Visual Designer

The Visual Designer is divided into several panels and tools, each serving a specific function:

1. Left Panel: Layers

Purpose: Manage your layers and base layers.

Key Features:

Add a New Layer: Click the “+ Add Layer” button to start building your visual.
Reorder Layers: Drag and drop layers to adjust their stacking order.
Base Layers: These are global layers that persist across multiple visuals, ideal for items like station logos or watermarks. Can be configured in the Output Settings.

2. Right Panel: Visual and Settings

Purpose: Configure the properties of the selected visual or layer.

Key Features:

Visual Name: Every visual requires a name to save it. This helps in organizing and identifying visuals easily.
Transition Settings: Customize how the visual or layers transition in and out. Modes include:

Default: Standard transitions.
Layer-Based: Each layer has its own transition.
Visual-Based: A single transition applies to the entire visual.
Visual Fixed: No transitions.

3. Toolbar

Purpose: Access essential design tools.

Key Features:

Custom CSS and JS: Add custom styling or interactivity to your visual.
Preview Animations: Test your design before finalizing.
Grid Toggle: Enable a grid to align elements precisely.
Fullscreen Mode: View your design without distractions.
Undo/Redo: Navigate changes quickly.
Save: Save your visual (a name is mandatory).

Creating Your First Visual: Step-by-Step

Step 1: Add Your First Layer

Click “+ Add Layer” in the left panel.

Choose a layer type from the Layer Catalog. Options may include:

Text: Add dynamic or static text.
Image: Include logos, backgrounds, or other images.
Video: Play pre-recorded or live video content.

Layers are transparent by default, allowing you to stack them creatively.

Step 2: Arrange Layers

Use the left panel to drag and reorder layers.

The order determines how layers are stacked visually. For example, a background layer should always be at the bottom.

Step 3: Configure Layer Settings

Select a layer to open the Layer Editor in the right panel.

Modify properties such as:

Position: Set precise coordinates for the layer.
Size: Adjust width and height.
Transitions: Define how the layer enters and exits.

Step 4: Name Your Visual

Enter a name in the Visual Name field (right panel). You cannot save your visual without a name.

Step 5: Save and Preview

Use the Save button in the toolbar to save your progress.

Preview your visual using the Play button to ensure everything looks as intended.

More information about all the Layer types can be found in

Visual Designer