Designs in Titler Live's library, and designs you may have created, include variables for common elements which you can customize to create unique graphics based on the same design. Variables include text and content such as names, subtitles, and live data from Facebook and other sources, as well as styles that affect a design's look and feel, such as colors, gradients, images, and videos.
This article describes how to update variables in graphics from within Titler Live's playout interface.
- In Titler Live's playout interface, open a project (if a project isn't already open) and select a graphic in the playlist.
Tip: Want to create a new graphic? Open the Library panel and drag a design from the library to the playlist, or choose File > New Design.
The Attributes panel opens, which includes all variables that are available for the selected graphic. For example, the following illustration includes variables for an image, two paragraphs of text, and a color.
- If you want to connect the graphic to a data source and automatically drive data to variables in the graphic, see an article in the Connect data to designs section of our help center.
- If you want to manually update the default values in variables or connect a camera to a live video variable, see the following sections in this article. When you change a variable's default setting, the graphic starts rendering in the playlist and displays the change when it is fully rendered.
Note: You can change the names of variables when you create variables in the Title Designer (which is available in all Titler Live products except Express); therefore, the names of variables in your designs may be different from the names shown in this article's illustrations.
Text such as names and subtitles
Enter new text in a text field, such as Name or Subtitle, then press TAB or ENTER to update the graphic.
Colors
Click a color swatch and complete any of the following steps to select a color in the Pick Color dialog.
- Click a color on the wheel.
- Click Hex or Dec, then enter the desired Hex or Dec values.
- Click the color picker
, then click a color on your screen. (Press ESC to cancel the color picker.) - Click and drag the horizontal sliders to adjust the selected color's hue and opacity.
Gradients
Use the Gradient style to customize text or objects with gradients based on multiple colors.
- Click the color swatch.
- In the Color section of the Pick Color dialog, complete any of the following steps to select a color.
- Click a color on the wheel.
- Click Hex or Dec, then enter the desired Hex or Dec values.
- Click the color picker
, then click a color on your screen. (Press ESC to cancel the color picker.) - Click and drag the horizontal sliders to adjust the selected color's hue and opacity.
- In the Gradient section, select the number of colors to include in the gradient and the type of gradient from the two drop-down lists.
- In the gradient color wheel, click and drag each large circle to adjust the gradient's color range, then click and drag the small circles to adjust the transition point between colors.
Images and pre-recorded videos
To replace a default image or video, click an image or video thumbnail, then locate and select a new image or video.
To customize how an image or video fits within the available space for that object, select one of the following fit modes from the Set To... drop-down list next to an image or video variable.
- Set To Fill: The image or video fills all of the available space in the bounding box's dimensions while maintaining its proportions.
- Set To Fit: The image or video fits inside the object's bounding box without cropping and retains its aspect ratio, which means the image may not fill the entire variable area.
- Set To Conform: The entire image or video resizes to fit in the entire variable area, but may not maintain its aspect ratio.
Live videos
You can stream video from a webcam or NDI-enabled camera.
- Connect a webcam or NDI-enabled camera to your computer.
- Select a video source from the video drop-down list on the left.
- To customize the appearance of the live video, select an effect from the drop-down list in the middle, and then select one of the effect presets from the drop-down list on the right.
Note: If the object's dimensions don't match the aspect ratio of the video source, the live video will be resized to fit within the object, which may distort the video. If necessary, and if licensed, resize the object in the Title Designer, which is available in most Titler Live products except Express.
Data graphs
Use data graph variables with text or shape objects to show a percentage or quantity that changes dynamically based on incoming data.
To update the value of a data graph variable, double-click the value and enter a number between 1 and 100, which will be represented as a percentage.
Tip: You can automatically drive data from Facebook comment polls and reaction polls to data graph variables. For details, see Connect social media data to a design and complete the steps to connect the design to Facebook Live.