Example #2: Design a Simple Template

We’ll start with the simplest template, using only a few of the more static elements available, such as text and shapes. Dynamic elements will be added in later examples.

  1. Open the Template Designer
  2. Name your template
  3. Choose a Background​ by clicking on the Background toolbar at the bottom of the stack of grey design toolbars on the left.
    1. You have a choice of single-colored, or image background. If you choose Color, there is a color picker.
    2. If you choose Image, it opens up the Background Image library as a scrollable list of thumbnails. To upload a background image, right-click in an empty spot in that library, and upload a jpg from your computer. Make sure the aspect ratio of the image is the same as your template dimensions, or it will distort. Once uploaded, double-click on the thumbnail to make that the new Template background.
  4. Add Text
  • Click on the Add Text icon to create a text box in the middle of your staging area.
  • This will automatically open up the Zone and Text toolbars on the left.
  • Choose text font, size, and color.
  • Resize and place your text zone by dragging the edges and corners in the staging area. You can also type dimensions and coordinates in the Zone toolbar if you prefer.
  • If you ever want to delete an element from the staging area, select the elements, and Right-click → Remove.

There are 2 ways to enter text:

  1. Type your text in the “Enter your text here!” space provided in the Text toolbar.
    Double-click in the text zone in the template staging area:
    When you do, the border of the text zone will show up red in the template designer.
  2. Type your message directly in there.
    To save your text, mouse over to the top right of the text zone, and click on the Close Edit Icon .
    When the border of the text zone changes to light blue, you have exited edit mode and will be able to move and resize the text zone.

5. Add Shape​. Shapes can be used as decorative elements on a template, such as a frame around your text, an oval or round call-out, a full-screen shaded overlay, or even a straight line. Shapes can have colored borders, rectangles can have rounded corners, and you can define the opacity of the fill area of a shape. Let’s create a frame around our text:

  • Click on the Shape icon to create a new Shape in the center of your staging area.
  • This automatically opens up the Zone and Shape toolbars on the left.
  • Let’s choose a Rectangle shape from the form pulldown.
  • A colored border of 5 pixels, and a rounded corner of 15 pixels.
  • The next pulldown gives you a choice between Plain or Gradient fill, with color picker and opacity slider for each end of the gradient.
  • Resize and place your shape zone to frame the text we created in Step 4.
  • Since we created the Text zone first, it is sitting behind the Shape. To send the Shape to the back, right-click on that zone and Send to Back.

6. Branding (​Top Layers​). Finally, we want to add a Top Layer image to this template.
Top Layers are a good way to add a transparent png to your template, as a logo or some other type of branding. Note that the Top Layer image library exists separately from the Background or Media libraries. (Please read the TelVue Knowledgebase article on “​Understand the Media Upload Process​” for a more detailed explanation of where to upload images, based on how you plan to use them.)

  • Click on the grey Top Layers toolbar at the right of the staging area to open the library.
  • Right-click in the library to upload a new image.
  • Select an image from your computer and upload.
  • To add this image to your template, drag and drop the thumbnail from the Top Layer library to the staging area.
  • To resize and place the image, you can either grab the edges and move them around, or manually enter the dimensions and coordinates in the Zone toolbar.

7. SAVE​ your changes, and you now have a Template to add to a Playlist that you can Schedule, and then Publish.

8. If you want to make a copy of this Template, right-click on the template thumbnail, select Copy. Then right-click anywhere else in media library, and Paste. You may then edit the Copy.

in InfoVue 2.0 Beginner’s Guide

Related Articles