Designing Title-Safe Templates

Newer TVs don’t have the same degree of “title-safe” problems as older SD sets, but even an HD signal will sometimes cut off the outer edges of a full 1920 x 1080 screen display.

In this case it is prudent to design your InfoVue templates within what is called a “safe zone”, so that even if the display is cropped, the message will be fully readable.

A general rule of thumb to stay within the safe zone is to keep your content inside an invisible border that is 5% from each edge of the screen. So if you are designing a 1920 x 1080 template, you would start your design 54 px down and 96 px in from each side.

But doing the math every time you create a template can be a pain. So we have created several tools to make it easier to design title-safe templates in InfoVue.

1.Copy/Paste Title-safe templates from the InfoVue Library.

There are separate folders for “Title-safe HD” and “Title-safe SD” templates. Make sure you DO NOT work directly in these templates. To use a template from the InfoVue Library, first right-click on the thumbnail, and then Copy/Paste it into your own org’s Media Library, where you can edit it at will.

2. Download the “InfoVue Safe Guides” from the InfoVue Library.

The safe guides are graphics with guidelines to help you position your content within the safe zones. After you are done designing the template or ticker, remove the guidelines. Here is a brief list of available “safe guides”, and how to use them:

a. InfoVueSafeArea background images

The InfoVueSafeArea jpgs are meant to be used as a temporary background images, and include labelled guidelines explaining each area. There is an HD and an SD version.

To use these:

  1. Copy/Paste the InfoVueSafeArea template to your Media Library
  2. The HD safe area will keep your content visible on HD TVs.
    • If your channel is simulcast in SD, and letterboxed to fit a 4:3 screen, you can ignore the SD safe zone
    • If your channel is simulcast in SD and the edges are cropped, then you should design within the SD safe zone.
  3. The two horizontal dotted guidelines at the bottom indicate the edge of a 270px and 200px ticker. If you are going to display a ticker over this template, keep your template design above the appropriate dotted line.
  4. Note that you can design a background to “bleed” to the very edges, but keep your text and image fields within the safe zone.
  5. The InfoVueSafeArea is actually just another background image. When you are done with your design, replace it either by (1) choosing a new background color, or (2) selecting a new background image from your background image library.

b. png title-safe guides for Tickers

The ticker png title-safe guides show the title-safe area for ticker design.

  1. In the InfoVue Library, go to the Content Pane → Ticker → Not Published folder
  2. Copy/Paste the appropriate title-safe guide into the Ticker folder in your own InfoVue account
  3. Keep your content within the title-safe guidelines. Note that you can design a background to “bleed” to the very edges, but keep your text and image fields within the safe zone.
  4. The title-safe guide is actually a “ticker image” png which you will be able to access from any other ticker designer. When you are satisfied with your design, slide the title-safe png down and to the left so that you can see the delete “x” on the top right. Click on the grey “x” to remove the guidelines from this ticker.

c. Transparent pngs with guide lines

The HDGuide and SDGuide images are “top layer” transparent pngs, designed to help you position content within either a J-bar or L-bar formation.

If using a ticker, design above the horizontal lines (270px or 200px for HD, and 140px for SD). The two vertical lines denote J-bar and L-bar borders, assuming you want to use a 9:16 weather in the tall section, and anything else in the wider area. (There is also a title-safe frame in this graphic.) To use these guidelines:

  1. Drag the HD or SD Guide to your template designer from the “Top Layer” library at the top right of your template designer
  2. Position the png so that it fills the entire template (x=0 and y=0)
  3. Right-click on the png and “Send to back”
  4. Design any other text, images, shapes on top of the guidelines.
  5. The Guides are actually “top layer images” which you will be able to access from any other template designer. When you are satisfied with your design, slide the png down and to the left so that you can see the delete “x” on the top right. Click on the grey “x” to remove the guidelines from this template.
in IV FAQs

Related Articles