Diseñar overlays (Editor)

Editor con el lienzo, capas, propiedades y línea de tiempo

Herramientas

Herramienta	Nombre	Para qué sirve
	Seleccionar	Mueve, redimensiona, gira e inclina elementos.
	Rectángulo	Fondos, barras y cajas. Con Esquinas se convierte en trapecio.
	Elipse	Círculos y óvalos.
	Triángulo	Flechas y detalles.
	Línea	Separadores y subrayados.
	Texto	Nombres, títulos, cargos. Se puede marcar como campo variable.
	Temporizador	Reloj para deportes (uno por overlay).
	Imagen	Logos y fotos. Se puede marcar como campo variable.
	Código QR	Un código QR que la app dibuja sola a partir de un enlace o texto. Se puede marcar como campo variable.

A la izquierda: seleccionar, rectángulo, elipse, triángulo, línea, texto, temporizador (para deportes), código QR e imagen. Arrastra en el lienzo para crear; con seleccionar mueves, redimensionas, giras e inclinas (y mueves las esquinas de un rectángulo para formar un trapecio), con imanes y guías.

La barra superior del Editor

Barra superior del Editor con guardar, deshacer, rehacer, los menús Elemento y Alinear, el zoom, imanes, esquinas y el fondo

Botón	Qué hace
	Guarda el overlay (`Ctrl`+`S`). Se pone rojo cuando hay cambios sin guardar y cian unos segundos al guardar.
	Deshace y rehace cambios (`Ctrl`+`Z` / `Ctrl`+`Y`).
Elemento ▾	Copiar, cortar, pegar, duplicar, eliminar, seleccionar todo, cambiar de capa y voltear.
Alinear ▾	Alinea y distribuye los elementos seleccionados.
Deslizador, Ajustar y 100 %	Zoom del lienzo; Ajustar lo encaja en la ventana (`Ctrl`+`0`) y 100 % lo muestra a tamaño real (`Ctrl`+`1`).
	Pega los elementos a los bordes y centros del lienzo y de otros elementos. Mantén `Alt` mientras arrastras para desactivarlo un momento.
	Con un rectángulo seleccionado, te deja mover sus esquinas para formar un trapecio.
Lista de fondo	Cambia el fondo sobre el que ves el lienzo (solo en el Editor; no se guarda).

Capas y propiedades

Botones de capas: Subir, Bajar, Frente, Fondo, Duplicar y Eliminar — Los botones de capas: Subir, Bajar, Frente, Fondo, Duplicar y Eliminar.

El panel de Capas lista los elementos del overlay (reordenar, duplicar, eliminar). Al seleccionar uno, Propiedades muestra sus datos organizados por categorías: posición y tamaño, apariencia, y las propias de cada tipo (texto, imagen, figura o temporizador).

Panel de propiedades del Editor con el nombre del overlay y el tamaño del lienzo — El panel de propiedades, a la derecha: nombre, lienzo y las propiedades del elemento seleccionado.

Campos variables

Un texto, una imagen o un código QR se puede marcar como campo variable: su valor se llena después, por slot, desde la pestaña Control, en el orden que definas aquí.

Códigos QR

El Editor dibuja el código QR por ti: no necesitas generarlo en otra página ni guardarlo como imagen.

Editor con la tarjeta de esquina de código QR abierta y el elemento Código QR seleccionado — El elemento Código QR en el Editor (a la izquierda, su herramienta).

Elige la herramienta Código QR y haz clic en el lienzo, o arrastra para marcar su tamaño (siempre queda cuadrado).
En Propiedades → Código QR escribe el enlace o texto: una dirección web (https://…), un correo (mailto:…), un teléfono (tel:…) o cualquier texto.
Ajusta, si quieres, el color del código, el fondo, el margen (cuadritos en blanco alrededor), las esquinas redondas y la corrección de errores.
Para que el QR cambie en cada slot, marca Se llena en la pestaña Control: el enlace de arriba queda como valor por defecto.

Ajuste	Qué hace
Color del código y fondo	Pon el código más oscuro que el fondo. Un QR claro sobre fondo oscuro no lo leen muchos celulares. Puedes usar un fondo con transparencia, pero uno claro lo hace más fácil de leer.
Margen	El borde en blanco que necesitan los lectores. Déjalo en 2 o más; con 0 algunos celulares no lo reconocen.
Corrección de errores	Cuánto del código se puede dañar o tapar y aun así leerse. Media (15 %) sirve casi siempre; Alta o Máxima si pondrás algo encima, a costa de un código más denso (cuadritos más pequeños).
Tamaño	Hazlo cuadrado y de unos 200 px o más; mientras más texto lleve el enlace, más grande debe verse.

Antes de salir al aire, escanéalo con tu celular desde la pantalla o desde OBS. Si no lo lee, aumenta el tamaño, sube el contraste o acorta el enlace (un enlace corto da un código más simple y fácil de leer). Si el texto no cabe en un QR con esa corrección, el Editor te lo avisa debajo de las opciones.

Temporizador

Un overlay admite un temporizador (reloj de pared, no se atrasa). Trae preajustes por deporte (fútbol, basquetbol, fútbol americano, reloj de jugada, carrera, cuenta regresiva…) con periodos y valores rápidos; se controla desde Control, no desde Actualizar.

Animaciones y línea de tiempo

Línea de tiempo con los botones Entrada, Salida, Probar entrada, Probar salida, Probar todo, Detener y Ocultar

Cada elemento tiene una animación de entrada y una de salida (tipo, retardo y duración), ajustables arrastrando sus barras en la línea de tiempo. Los botones Probar entrada/salida/todo las reproducen sin salir del Editor.

Ejemplo: un rótulo con nombre y cargo

En la pestaña Overlays pulsa Nuevo overlay; se abre el Editor con un lienzo en blanco.
En Propiedades → Lienzo pon el tamaño, por ejemplo 1280 × 200.
Dibuja un rectángulo de fondo y dale color en sus propiedades.
Con la herramienta texto crea dos textos: uno para el nombre y otro para el cargo, y márcalos como campo variable (con su longitud máxima).
Elige para cada elemento una animación de entrada y otra de salida en la línea de tiempo y pruébalas con Probar todo.
Guarda (Ctrl+S). En Control agrégalo a tu Workspace y crea un slot por cada persona.

Guardar

Guardar genera también la miniatura que se ve en la biblioteca (pestaña Overlays). Si la app se cierra de golpe, al reabrir se ofrece recuperar el borrador.