When you customize graphics in the Designer, you can use the style settings to control the look and feel of 2D and 3D objects with attributes such as fonts, alignment, kerning, colors, transparencies, bevels, extrusions, and more.
- In Titler Live's playout interface, select a graphic layer from the Layers workspace, then click the Edit Graphic button in the Preview panel.
- In the Designer, select an object or group of objects in the workspace or timeline.
Tips
- To add text to a graphic, see Add and modify text layers.
- To add shapes to a graphic, see Add and modify shapes layers.
- To apply predesigned style presets from the library, complete the following steps.
- Open the Library panel.
- Select Styles from the drop-down list at the top of the Library panel.
- Double-click a collection to view style designs in that collection.
- To preview a style on the selected layer or group, hover the pointer over a graphic.
- To apply a style preset to the selected layer or group, double-click a style preset.
- To customize style presets, click the Properties > Layers > Style tab.
- See the following sections to add styles.
Add and customize 3D and 2D style layers
- Add 3D and 2D style elements
- Add color
- Add gradients
- Add images and pre-recorded videos
- Trim videos
- Set transparency
- Offset a style element
- Set depth (z position)
- Set width
- Extrude a style element (3D styles only)
- Add shine (3D styles only)
- Map images or videos to sides (3D styles only)
- Create a reflective surface (3D styles only)
- Bevel an object (3D styles only)
- Add texture
- Set blur (2D styles only)
- Add an effect (2D styles only)
Customize text
You can change a character or paragraph's font, size, weight, alignment, kerning, position in its bounding box, and more.
Set common text options such as font, size, alignment, and more
To customize text from within the Properties > Layer > Style tab, select a character or paragraph in the workspace, then select an option in the Style tab's formatting toolbar.
To scale text from within the Designer's workspace, select a character or string of characters in the workspace, then click and drag the text box to the desired size.
Set kerning
You can adjust the amount of horizontal and vertical space between individual characters, lines of text, and objects. Complete one of the following steps.
To adjust kerning from within the Properties > Layer > Style tab, select a character or string of characters in the workspace or timeline, then enter new values in the Style tab’s kerning adjustment 
fields.
To adjust the kerning between characters from within in the Designer's workspace, double-click a text layer, select one character or a string of characters, and either move the borders of the blue bounding box or press ALT + up or down arrow keys.
Fit text
You can choose how text behaves in relation to its bounding box, which can help you create reusable designs that have a consistent appearance.
Select a text layer in the Designer's workspace or timeline, then select one of the following options from the Style tab's Fit Mode 
drop-down list.
- Fit Box to Text: The bounding box's size changes as the font size increases or decreases.
- Fit Text to Box: Text scales to fit inside the bounding box. You can increase the box size to allow text to expand.
- Fit Text to Box Width: Text scales to fit the width of the bounding box. This is useful for lists and credit rolls.
- Cut Text to Box: Text is limited to the size of the bounding box. This option ensures text fits within the intended design.
Add and customize 3D and 2D style elements
You can add 2D or 3D style elements to layers and apply colors, gradients, and other properties. You can also extrude and bevel 3D style elements or add shadows, blurs, and outlines to 2D style elements.
Add 3D and 2D style elements
Select a layer in the Designer's workspace or timeline, then select one of the following options from the Style Element 
drop-down list in the Properties > Layer > Style tab.
- 3D Outline: Creates an outline around text with 3D properties like extrusion and beveling.
- 3D Face: Creates a new 3D face of text with 3D properties like extrusion and beveling.
- 3D Gloss Face: Creates a new 3D face with a preset gloss gradient and 3D properties like extrusion and beveling.
- 2D Shadow: Creates a 2D shadow on text with 2D properties like color, gradient, and opacity.
- 2D Outline Glow: Creates a 2D glow around text with 2D properties like color, gradient, and opacity.
- 2D Blurred Face: Creates a colored 2D blur on text with 2D properties like color, gradient, and opacity.
When you add a 3D style layer, the new settings appear in two sections of the Style tab.
- 3D Outline, 3D Face, or 3D Gloss Face section — One of these sections appears, depending on the type of layer you select, and is where you can change colors and gradients, map videos, enable variables (as described in Create variables in graphics), control transparency, offset style element, set style element depth, and set width.
- 3D Controls section — This section is where you can set depth, bevels, and shine which allow you to transform graphics into 3D.
Many 2D settings are the same as 3D settings, but some settings are exclusive to 3D or 2D style elements. For example, you can't extrude 2D elements like you can 3D elements.
Add color
Use the Color style to change the color of design layers.
- Select the Color option in a style element section of the Properties > Layer > Style tab.
- Click the color swatch.
- In 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.
Tip: Want to allow an operator or data source to customize the color from the playout interface? Create a color variable. See Create variables in graphics for details.
Add gradients
Use the Gradient style to customize text or objects with gradients based on multiple colors.
- Select the Gradient option in a style layer section of the Attributes > Object > Style tab.
- 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 list.
- 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.
Tip: Want to allow an operator or data source to customize the gradient from the playout interface? Create a gradient variable. See Create variables in graphics for details.
Add images and videos
Use the Image/Video setting to add an image or video, such as a texture, or a pre-recorded video to a design layer.
- Select the Image/Video option in the Style Settings section of the Properties > Layer > Style tab.
- In the dialog that opens, select an image or video from your computer and click Open. The image appears in the layer or, if applicable, on each character in a text layer.
- To map the whole image or video across the entire text layer (as opposed to repeating the image in each character of a paragraph), mark the Stretch to Paragraph checkbox.
Tip: Want to allow an operator or data source to customize the image or video from the playout interface? Create a live video variable. See Create variables in graphics for details.
Trim videos
Use the Video Trimmer to select and play a specific portion of a video in your graphic.
- Add a pre-recorded video as described in the previous section, if you haven't already done so.
- Right-click (Windows) or Control + click (Mac) on the video swatch in the Style Settings section of the Properties > Layer > Style tab and choose Trim Video.
- In the Video Trimmer, slide the playhead to the where you want to video to start, then click the Mark In
button.
- Slide the playhead to the where you want to video to end, then click the Mark Out
button. - If you want the video to loop, mark the Loop Video checkbox.
- Click OK.
Set transparency
Use the Opacity setting to determine if or how much you can see through a layer.
Click the Opacity slider or arrows in a Style Settings section of the Properties > Layer > Style tab, or double-click the value and enter a new value.
Offset (x and y position) a style element
Use the Offset setting to adjust a style element's center axis.
Click the Offset slider or arrows in a Style Settings section of the Properties > Layer > Style tab, or double-click the value and enter a new value.
Set depth (z position)
Use the Z setting to adjust the depth of a layer in relation to its position in 3D space.
Click the Z slider or arrows in a Style Settings section of the Properties > Layer > Style tab, or double-click the value and enter a new value.
Set width
Use the Width setting to adjust the width of a layer.
Click the Width slider or arrows in a Style Settings section of the Properties > Layer > Style tab, or double-click the value and enter a new value.
Extrude a style element (3D styles only)
Use the Extrusion setting to add depth to an object and make it appear three dimensional.
Click the Extrusion slider or arrows in a Style Settings section of the Properties > Layer > Style tab, or double-click the value and enter a new value.
Add shine (3D styles only)
Use the Shininess setting to change the amount of a layer’s reflection as it interacts with a light source.
Click the Shininess slider or arrows in the 3D Controls section of a Style Settings section of the Properties > Layer > Style tab, or double-click the value and enter a new value.
Map images or videos to sides (3D styles only)
Use the Map to Sides setting to map the selected image or video to the side of an extruded style element.
Click the Map to Sides checkbox in the 3D Controls section of a Style Settings section of the Properties > Layer > Style tab.
Create a reflective surface (3D styles only)
Use the Environment Map setting to create a reflective surface on a style element that reflects the selected image or video.
Click the Environment Map checkbox in the 3D Controls section of a Style Settings section of the Properties > Layer > Style tab.
Bevel an object (3D styles only)
Use these beveling settings to create 3D effects.
Adjust any of the following settings in the 3D Controls section of a Style Settings section of the Properties > Layer > Style tab.
- Click the Bevel Size slider or arrows, or double-click the value and enter a new value, to adjust the amount of beveling.
- Click a Bevel tile or click and drag the points in the bevel grid to customize the beveling.
- Click the Include Back Side checkbox to bevel a style element's backside.
Add texture
Use the Normal Map Surface setting to add texture that reacts to light.
Click the Normal Map Surface button in a 2D Style Settings section or the 3D Controls section of a 3D style layer, in the Properties > Layer > Style tab, then double-click a texture in the window.
Tip: Hover the pointer over a texture in the library to preview the texture on the style element.
Set blur (2D styles only)
Use the Blur setting to adjust the focus of an object. A blur value of 0 is sharp and crisp, and a value of 100 is soft and out of focus.
Click the Blur slider or arrows in a 2D Style Settings section of the Properties > Layer > Style tab, or double-click the value and enter a new value.
Add an effect (2D styles only)
Use the Add Effect setting to apply animations, filters, and other 2D effects to a style element.
Click the Add Effect button in a 2D Style Settings section of the Properties > Layer > Style tab, then double-click an effect from the Effects library. Additional settings appear for the selected effect.
Tip: Hover the pointer over an effect in the library to preview the effect on the style element.