Graphics 101

With Tagboard's graphics engine, you unlock complete control to build a pre-designed, customizable framework that matches the look and feel of your production. Plus the ability to edit and produce with those graphics on the fly. Each Tagboard Custom Graphic serves a template, so one Custom Graphic can actually be thousands of graphics as you edit the content, add data points through our app marketplace, and update the styling. If you're just getting started, review Creating a Custom Graphic before diving in here.

First, in the top left corner, give your Custom Graphic a title. This is important so it's easy to identify which Custom Graphic you're selecting when adding the Custom Graphic to a production in Tagboard Producer.

Canvas Settings 

After you title your template, work your way down the left side of the builder until you get to canvas settings. Before you start building it's important to have the canvas match the pixel width and height of the screen you're going to display your Custom Graphic on. The default is 1920X1080 (standard TV screen ratio). 

• Safe Area
  • You can check this box to display a safe area on your canvas. This will help visualize areas on the screen you want your graphic to avoid. You can adjust width and height by percentage between 0-100%.

• Rulers and Guides
  • Checking this box will make rulers appear. If you click into the ruler area and drag out from there, then a guide will appear. After you've dropped the ruler, you can re-click it and drag to reposition. 
  • Once guides are set, you can uncheck the "Rulers and Guides" box to hide them. Checking again will have the rulers and guides reappear.

Adding Elements

Now that your template has a title and the canvas is set, let's start building. You will build your template by adding different elements. 

Basic Elements:

• Text
• Image
• Video
• Shapes
• Date/Time
• Timer 

Tagboard Apps

• QR Code 
• Social Graphic (This allows you to add a templatized Social layout directly to your Custom Graphic!)
• Poll Graphic 
• Shoppable
• Slideshow
• Ticker

Data

• Social Post
• Google Sheets
• Live sports stats, powered by Sportradar

Partner Apps

• Marketplace partner apps, including ScoreStream, Sqwad, Momento, Cue, and Adventr

As you click to add elements, they automatically create a new layer and appear on your canvas. You can drag and drop individual layers to reposition the order in which they appear. 

Each layer has its own list of customization options that appear on the right sidebar of the builder when the layer is selected. Select an element above to see how to setup and customize each one.

Size & Placement

• Position: Everything on your canvas works with a drag and drop workflow, or in the upper right corner you can set an exact X and Y axis.

• Size: Click to select the element and drag the corners to adjust the size, or set exact width and height.

• Snap To: Use this feature to snap your element to one of nine exact locations on the canvas (center, center-top, center-bottom, center-left, center-right, bottom-left, bottom-right, top-left, top-right)

• Align: You need to have at least two layers selected to use align. Align all selected layers (Left, Center, Right, Top, Middle, Bottom).

• Distribute: You need to have at least three layers selected to use distribute. This will allow you to make the horizontal or vertical spacing between selected layers even. Best practice of this is to first align the layers, and then distribute the spacing. 

Animation

• Animate In: Select from the dropdown menu how you want your text to animate onto the screen. The duration (set in milliseconds) determines how long your animation will last. The delay determines how long after selecting this Custom Graphic, the individual layer will begin to animate. Easing will allow you to change the acceleration of the animation, to be smoother or more natural. select from the dropdown to make a smoother and more realistic animation. The two most common easing options are "ease in", meaning the animation will start slowly and accelerate, and "ease out", where the motion will start quickly and decelerate.

• Animate Out: Select from the dropdown menu how you want your element to animate off the screen, followed by same customizable options as above.

• Looping Animation: If you check this box you can set a layer of the Custom Graphic to continue animating a certain way while the Custom Graphic is displayed on screen. 

Working in Layers 

Once you add an element to your Custom Graphic, it will appear in a list of layers. The top layers appear on the graphic above the layers below them. You can sort and customize each of these.

 

Naming/Sorting

It is important to name your layers as you build your template, so they are easy to identify when building a Custom Graphic in Tagboard Producer. To name your layer, double click on the name. In addition to naming your layers, you can click and drag them to set the order from top to bottom. 

Grouping

When you have multiple layers of your Custom Graphic that you want to operate as a single layer, you have the option to group them together. Group your layers by holding down the shift key, selecting the layers you want to group, and then hitting (Command or CTRL + G). You can then rename your group. To ungroup your layer you can use the hotkey (Command or CTRL + Shift + G) or click the three vertical dots and select the option to ungroup.

The lock icon (seen in the image above) is how you can lock or unlock a specific layer while building your Custom Graphic. Locked layers cannot be changed.

Editable/Rename/Duplicate/Delete

Clicking the three vertical dots right of the lock icon will open a modal with some additional options for each layer. Checking the editable box will make it so this layer of your Custom Graphic can be edited when customizing your graphic in Producer. Working your way down the modal you will see another way you can rename your layer, an option to duplicate your layer, and the ability to delete a layer.

Other Tools

Save

Your can toggle on auto-save in the upper right corner of the builder. Otherwise, be sure to press save periodically.

Hot Keys

In the upper left corner of your template builder you will see a keyboard icon that you can click to see different keyboard shortcuts that can be used to streamline your template building process. 

Animation Preview

Once you have given layers of your Custom Graphic animations, this is where you can click to preview the animation. 

There is also a box you can check if you have an animation you want to loop while the Custom Graphic is being displayed.

Tags

Be sure to add tags to your Custom Graphic so they're easier to track down when selecting a template in Tagboard Producer. Think of these as folders. Everything with the same tag will essentially be in the same folder. 

​Displaying Tagboard

For a quick overview, Tagboard is a web-based application that we recommend using via Chrome (for its security, speed, and ability to go fullscreen without controls or toolbars in view). There are several ways you can use Tagboard to visualize your story:

1. Laptop-to-screen via appropriate cable connection (HDMI, DVI, or VGA),
2. Signal conversion via scan converter, mixer, or scaler, or
3. direct URL input to production software

With these methods in mind, visit the Producer Workspace to get started on displaying Tagboard. Consult Getting Started with Tagboard Producer to set up your production(s) and learn how-to navigate Producer... Tagboard's emmy award winning cloud-based production platform

Please utilize these resources, below, for a deeper dive into displaying Tagboard via Producer. 

• Producing with Custom Graphics
• Create & Manage Live Display Outputs
• Live Display Requirements