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 Graphic serves a template, so one 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 Graphic before diving in here.

First, in the top left corner, give your template a title. This is important so it's easy to identify which template you're selecting when adding the 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 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. There are 5 basic elements [text, image, video, shape, and QR Code]. There are also several "Advanced Elements"  options. As you click to add elements, you will see that they automatically appear in your canvas as well as create a new layer. You can simply drag and drop individual layers to reposition the order in which they appear. 

Each layer will have its own robust list of customizations that appear on the right sidebar of the builder when the layer is selected. 

• Text Element
• Image Element
• Video Element
• Shapes Element
• QR Code Element
• Size, Placement and Animation

Text Element

When you add the text element, it will populate a text box in your graphic builder that you will be able to move freely around the graphic as well as make a new menu appear on the right sidebar where you can adjust color, font style, font size, animations, and more. 

Text and Text Box Resizing

When creating a text box in a graphic template, you will see the following options.

• Autosize Text Box: The width and height of the text box would grow to fit the text within.

• Fixed Size Text Box: The width and the height of the text box that is defined is fixed and would only change if done so manually in the canvas.

Under Text Layout, you will see the following options. 

• No-Wrap: You can set so the text does not wrap when it overflows.

• Wrap Text: You can set so the text does wrap when it overflows.

• Autosize Text: The text increases or decreases in size to fit the text box.

• Max Text Size: This option is only available when the Autosize Text is selected. If you define a max text size, the text size will not exceed the specified size and only get smaller.

  • If a max text size is defined, then the text will behave the same as the current ‘shrink to fit’ as more text is added.

You can also define how you would want the text box to behave, or the text, or a combination of both.

For example, if you want a fixed text box where the text wraps when it overflows, then you would select the options Fixed Text Box and Wrap.

Or, if you want a fixed text box where the text scales to size, then you would select the options Fixed Text Box and Scale.

Style

• Opacity: On a scale of 0-100% set the transparency of your text layer. 0% will be completely transparent, 100% will be completely solid.

• Font: Start by selecting which font you want to use from the dropdown menu. At the bottom of the menu, you'll see a "Manage Fonts" button where you can add custom fonts. Any fonts you add will then appear in the dropdown menu. You can adjust the size, kerning (space between letters), and color of your font.

• Text Styles: Options to make your font bold or italicized.

• Text Options: Options to underline or strikethrough your text, or stylize your text with uppercase or lowercase only.

• Background Color: By default your text background is transparent, but you can select this box to give your text a solid or gradient background. If gradient option is selected you can set the degree you want the gradient change to happen (180 is top to bottom, 90 is left to right).

Image Element

Once you click to add the image element, it will open your media library within your builder. From here, you can (1) select an image you've already uploaded to your media library, (2) upload a new one, or (3) search for a GIF. You would select the single image or GIF you'd like to create within this new layer and it would populate in your graphic template builder. Selecting the image in your builder will make a new menu appear on the right sidebar where you can adjust the position, size, and many other attributes.

Style

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 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 text 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 graphic to continue animating a certain way while the graphic is displayed on screen. 

Working in Layers 

Once you add an element to your 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 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 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 GIF above) is how you can lock or unlock a specific layer while building your template. 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 template 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 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 graphic is being displayed.

Tags

Be sure to add tags to your graphics 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 Graphics
• Create & Manage Live Display Outputs
• Live Display Requirements