{"id":31608,"date":"2023-03-10T15:22:36","date_gmt":"2023-03-10T14:22:36","guid":{"rendered":"https:\/\/mimolive.com\/?post_type=user-manual&#038;p=31608"},"modified":"2025-06-14T12:03:29","modified_gmt":"2025-06-14T10:03:29","slug":"plantilla-generadora-de-graficos-superpuestos","status":"publish","type":"user-manual","link":"https:\/\/mimolive.com\/es\/user-manual\/quick-start-projects-templates\/quick-start\/overlay-graphics-generator-template\/","title":{"rendered":"Plantilla generadora de gr\u00e1ficos superpuestos"},"content":{"rendered":"<h2 class=\"wp-block-heading\">About the Overlay Graphics Generator Template<\/h2>\n\n\n\n<p>The&nbsp;<strong>Overlay Graphics Generator Template<\/strong>&nbsp;is purpose-built for creating and playing out graphic elements\u2014such as lower-thirds, logos, and animations\u2014on a transparent background. This allows the resulting video signal to be&nbsp;<strong>superimposed<\/strong>&nbsp;over other video feeds in external&nbsp;<strong>hardware switchers<\/strong>&nbsp;or&nbsp;<strong>video editing software<\/strong>&nbsp;like&nbsp;<em>Final Cut Pro<\/em>&nbsp;or&nbsp;<em>Adobe Premiere Pro<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1000\" height=\"563\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204755403.jpeg\" alt=\"Overlay Graphics Generator\" class=\"wp-image-31610\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204755403.jpeg 1000w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204755403-300x169.jpeg 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204755403-768x432.jpeg 768w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204755403-18x10.jpeg 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>With this template, you can:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Export rendered graphics to a video file<\/strong>&nbsp;with an alpha channel by using the&nbsp;<strong>Apple ProRes 4444<\/strong>&nbsp;codec\u2014ideal for use in post-production environments.<\/li>\n\n\n\n<li><strong>Output key\/fill signals<\/strong>&nbsp;via a compatible&nbsp;<strong>Blackmagic Design device<\/strong>&nbsp;to an external broadcast switcher.<\/li>\n\n\n\n<li><strong>Transmit the graphics over the network<\/strong>&nbsp;using&nbsp;<strong>NDI\u00ae (Network Device Interface)<\/strong>&nbsp;for seamless integration into IP-based video workflows.<\/li>\n<\/ul>\n\n\n\n<p>This template is especially useful for broadcast environments or any production workflow that requires professional-grade overlay graphics with transparency support.<\/p>\n\n\n<section class=\"boinx_section\">\n    <div class=\"main_div\">\n        <div class=\"left_div_icon\">\n                <i class=\"icon_highlight\">*<\/i>\n        <\/div>\n\n        <div class=\"right_div_text\">\n                <div><p class=\"text_highlight_headline\">Use Transparent Media Files in Slides and Overlays<\/p><\/div>\n                <div><p class=\"text_highlight\">When playing out with SDI key\/fill or NDI, mimoLive preserves transparency. You can use transparent PNGs or video files in ProRes4444 as backgrounds or other media that support transparency. For an example on how to create transparent ProRes4444 with Adobe After Effects for use with mimoLive, read <a href=\"https:\/\/mimolive.com\/user-manual\/creating-animated-lower-thirds-with-after-effects\">Creating Animated Lower Thirds With Adobe After Effects.<\/a><\/p><\/div>\n        <\/div>    \n    <\/div>\n<\/section>\n\n\t\t<style>.boinx_section {\n    margin:30px 0;\n    padding:10px;\n    background-color:rgb(217,237,248);\n    border-radius: 8px;\n  \n}\n\n.icon_highlight {\n    display:block;\n    padding:5px;\n    font-size:80px;\n    color:rgb(58,134,172);\n    line-height:60px;\n}\n\n.text_highlight {\n    color:rgb(58,134,172);\n}\n\n.text_highlight_headline{\n    font-weight:bold;\n    color:rgb(58,134,172);\n}\n\n.main_div\n{\n    display:flex !IMPORTANT;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content : flex-start;\n    align-items : flex-start\n    align-content : flex-start;\n}\n.left_div_icon{\n    display:flex !IMPORTANT;\n    width:40px;\n    padding:0;\n    margin:10px 20px 10px 10px;\n    \n}\n.right_div_text{\n    display:flex !IMPORTANT;\n    flex-direction: column;\n    flex-grow: 1;\n    padding:10px;\n    margin:0;\n    width:200px;\n    }<\/style>\n\t\t\n\n\n<h2 class=\"wp-block-heading\">Template Elements<\/h2>\n\n\n\n<p>This template includes a curated selection of mimoLive\u2019s most commonly used graphic layers, allowing you to quickly test your setup and begin integrating dynamic overlays into your production workflow.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Layers<\/h3>\n\n\n<ul class=\"bx-user-manual-page-list\"><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/time\/analog-clock\/\">Analog Clock Layer<\/a><br>The Analog Clock layer in mimoLive provides a simple yet elegant solution to display the current time during live broadcasts. With a variety of customization options, including the ability to change the clock face and hand styles, the Analog Clock layer can be seamlessly integrated into any live video production.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/data-viz\/graph-3d-layer\/\">Graph 3D Layer<\/a><br>The Graph 3D layer in mimoLive allows you to present data visually in three-dimensional space. This layer supports different graph types and customizable appearance options to suit various presentation needs.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/text-layers\/news-crawler\/\">News Crawl Layer<\/a><br>Whether you\u2019re using it to share breaking news or additional information about your show, the News Crawler Layer is an essential element for any news or live production. With the ability to pull information from the internet, a local file, or text you type directly into your mimoLive document, you can easily customize your news crawler to fit your specific needs.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/layout\/overshoulder-insert\/\">Overshoulder Insert (OTS) Layer<\/a><br>Within mimoLive, the OTS layer provides an efficient and user-friendly method to integrate this effect into your live broadcasts or recordings.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/weather\/weather-forecast\/\">Weather Forecast Layer<\/a><br>Use clear and intuitive weather icons to ensure easy understanding. Limit the forecast to 3-5 days to maintain clarity and avoid overwhelming the audience. Set smooth animation timing for a polished, professional broadcast. The Weather Forecast layer helps you deliver a concise, visually engaging weather segment, tailored to the needs of your audience.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/quick-start-projects-templates\/layer-designs\/stingers-outros\/\">Stingers and Outros<\/a><br>In mimoLive 6 you will find a set of pre-designed stingers and outros which are free to use. We have designed a set of animations and they come for free with a mimoLive subscription.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/sports\/sports-graphics-overview\/sports-graphic-layers\/sports-player-table\/\">Sports Player Table Layer<\/a><br>With the Sports Player Table, you can show up to 12 players of a team in a chart. Configuring the content In the Content parameter group of the layer, you can specify how many players should be visible. with the Titles text field, you define how many columns you want to show. Use a comma [&hellip;]<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/lower-third-2\/lower-third\/\">Lower Third Layer<\/a><br>The Lower Third layer lets you create, animate and control all kinds of lower thirds. Usually, it\u2019s used to introduce a person with their name and a description such as a job title or position. Often a lower third contains a combination of a company logo, name, and title.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/layout\/station-logo\/\">Station Logo Layer<\/a><br>The Station Logo layer displays a branding image, such as a network or channel logo, on top of your video output. This ensures consistent branding throughout your show. The layer can be easily positioned, scaled, and faded in or out using various transitions.<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/live-editing\/layers\/graphics\/made-with-mimolive-layer\/\">Made with mimoLive Layer<\/a><br>The Made with mimoLive layer is a simple way to add a &quot;Made with mimoLive&quot; badge to your live broadcasts, showcasing the software used for production.<\/li><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<ul class=\"wp-block-list\"><\/ul>\n\n\n\n<p>There are also a lot more things to explore, from complex <a href=\"https:\/\/mimolive.com\/user-manual\/sports-graphics-overview\">sports graphics<\/a> to <a href=\"https:\/\/mimolive.com\/user-manual\/automation\">automation<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Output Destinations<\/h3>\n\n\n<ul class=\"bx-user-manual-page-list\"><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/playout-output-destinations\/sdi-playout\/\">Blackmagic Design SDI Playout<\/a><br>Play out to SDI or HDMI. mimoLive implements the Blackmagic Design API for playing out to SDI or HDMI via Blackmagic Design hardware like Blackmagic Design DeckLink series . Adding an Blackmagic Design Output Destination Add a new Blackmagic Design Playout Output Destination to your Output Destination list by clicking the + button on top [&hellip;]<\/li><li><a href=\"https:\/\/mimolive.com\/es\/user-manual\/playout-output-destinations\/nditm-playout\/\">NDI\u00ae Output<\/a><br>The NDI\u00ae Output Destination sends video data to any NDI\u00ae receiver on your local network. NDI\u00ae also transports the alpha channel which gives you the opportunity to use mimoLive as a graphics generator in NDI\u00ae enabled environments. Adding a NDI\u00ae Output Destination Add a new NDI\u00ae Output Destination to your Output Destination list by clicking [&hellip;]<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Adapting the Overlay Graphics Template to Your Needs<\/h2>\n\n\n\n<p>To play out with a Blackmagic Design device, simply install the Blackmagic Desktop Video software, connect the device and select the proper settings in the <a href=\"https:\/\/mimolive.com\/user-manual\/sdi-playout\">Blackmagic Design Output Destination<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/blackmagic-design-output-destination.png\"><img decoding=\"async\" width=\"1000\" height=\"647\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/blackmagic-design-output-destination.png\" alt=\"\" class=\"wp-image-32907\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/blackmagic-design-output-destination.png 1000w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/blackmagic-design-output-destination-300x194.png 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/blackmagic-design-output-destination-768x497.png 768w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/blackmagic-design-output-destination-18x12.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Starting the Playout<\/h2>\n\n\n<section class=\"boinx_exclamation\">\n    <div class=\"main_div_exclamation\">\n        <div class=\"left_div_icon_exclamation\">\n                <i class=\"icon_exclamation\">&#10071;<\/i>\n        <\/div>\n\n        <div class=\"right_div_text_exclamation\">\n                <div><p class=\"text_exclamation_headline\">Don\u2019t Forget to Activate the Output Destination!<\/p><\/div>\n                <div><p class=\"text_exclamation\">Make sure to click the \u201cLive\u201d button in the top-right corner of the Output Destination to start playout.<\/p><\/div>\n        <\/div>    \n    <\/div>\n<\/section>\n\n\t\t<style>.boinx_exclamation {\n    margin:30px 0;\n    padding:10px;\n    background-color:rgb(242,222,222);\n    border-radius: 8px;\n}\n.icon_exclamation {\n    display:block;\n    padding:5px;\n    font-size:80px;\n    color:rgb(184,74,72);\n    line-height:60px;\n}\n.text_exclamation {\n    color:rgb(184,74,72);\n}\n\n.text_exclamation_headline{\n    font-weight:bold;\n    color:rgb(184,74,72);\n}\n\n\n.main_div_exclamation\n{\n    display:flex !IMPORTANT;\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content : flex-start;\n    align-items : flex-start\n    align-content : flex-start;\n    \n}\n\n.left_div_icon_exclamation{\n    display:flex !IMPORTANT;\n    width:80px;\n    padding:10px;\n    margin:20px 20px 20px 0;\n    height:40px;\n}\n.right_div_text_exclamation{\n    display:flex !IMPORTANT;\n    flex-direction: column;\n    flex-grow: 1;\n    width:200px;\n    padding:10px;\n    margin:0;\n}<\/style>\n\t\t\n\n\n<p>Click the\u00a0<strong>\u201cLive\u201d<\/strong>\u00a0button located in the top-right corner of the Output Destination panel.<br><br>Check the Status:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Red Button<\/strong>: The output is actively running.<\/li>\n\n\n\n<li><strong>Green Button<\/strong>: The output destination is correctly configured and ready to go live.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"250\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/switch-output-live.png\" alt=\"Overlay Graphics Generator\" class=\"wp-image-32906\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/switch-output-live.png 1000w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/switch-output-live-300x75.png 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/switch-output-live-768x192.png 768w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/switch-output-live-18x5.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>To make your transparent output stream available on the local network via <span class=\"caps\">NDI<\/span>, simply click on the live button in the <strong>NDI\u00ae<\/strong> Output Destination.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1000\" height=\"289\" src=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204509312.png\" alt=\"\" class=\"wp-image-31612\" srcset=\"https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204509312.png 1000w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204509312-300x87.png 300w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204509312-768x222.png 768w,  https:\/\/mimolive.com\/wp-content\/uploads\/2023\/03\/file-e1678204509312-18x5.png 18w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Explore the Layers<\/h2>\n\n\n\n<p>To understand what each layer can do for your production:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Try activating them\u00a0<strong>one by one<\/strong>.<\/li>\n\n\n\n<li>Experiment with their\u00a0<strong>settings<\/strong>\u00a0to see how they affect your scene.<\/li>\n<\/ul>\n\n\n\n<p>This hands-on approach is the best way to discover the creative possibilities mimoLive has to offer.<\/p>","protected":false},"excerpt":{"rendered":"<p>Utilice esta plantilla para dar salida a superposiciones gr\u00e1ficas mediante key\/fill (Blackmagic), NDI\u00ae o exportaci\u00f3n de archivos con canal alfa. Incluye capas de muestra para pruebas y una configuraci\u00f3n r\u00e1pida.<\/p>","protected":false},"author":3,"featured_media":0,"parent":31606,"menu_order":1,"template":"","meta":{"_acf_changed":false,"_angie_page":false,"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"categories":[258],"tags":[],"class_list":["post-31608","user-manual","type-user-manual","status-publish","hentry","category-manual"],"acf":[],"_links":{"self":[{"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/user-manual\/31608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/user-manual"}],"about":[{"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/types\/user-manual"}],"author":[{"embeddable":true,"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/users\/3"}],"version-history":[{"count":5,"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/user-manual\/31608\/revisions"}],"predecessor-version":[{"id":40773,"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/user-manual\/31608\/revisions\/40773"}],"up":[{"embeddable":true,"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/user-manual\/31606"}],"wp:attachment":[{"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/media?parent=31608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/categories?post=31608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mimolive.com\/es\/wp-json\/wp\/v2\/tags?post=31608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}