FrameOPS / Cairons Tutorial

De una hoja de cálculo a cairons listos para el mezclador

Pegas una lista de nombres y cargos, eliges un estilo y descargas un PNG con fondo transparente por persona. Esta guía te lleva paso a paso; en 5 minutos tienes los primeros.

Abrir la app Descargar CSV de ejemplo
Nada que instalarFunciona en el navegador del ordenador: Chrome, Edge, Safari o Firefox.
Tus datos no salen de tu equipoLa app no sube nada a ningún servidor.
PNG 16:9 con canal alfaA 720p, 1080p o 4K, para ATEM, vMix, OBS o edición.
1

Prepara la lista

Haz una tabla en Excel, Numbers o Google Sheets: una fila por persona y la primera fila con los títulos de las columnas. Los títulos pueden ser los que quieras.

nombrecargoempresa
Marta SolerDirectora de producciónEstudio Norte
Jordi VilaPresentadorEstudio Norte

Expórtala como CSV:

  • Excel: Archivo → Guardar como → CSV UTF-8 (delimitado por comas).
  • Numbers: Archivo → Exportar a → CSV → codificación Unicode (UTF-8).
  • Google Sheets: Archivo → Descargar → Valores separados por comas (.csv).
Si las tildes salen raras (é, ñ…)El archivo no está en UTF-8. Vuelve a exportarlo eligiendo «CSV UTF-8».

Da igual si el separador es punto y coma, coma o tabulador: la app lo detecta sola. Si un texto lleva el propio separador dentro, ponlo entre comillas: "Invitada; diseñadora".

2

Carga los datos

Abre la app. En el bloque 1 · Datos (CSV) tienes tres opciones:

  • Pulsar Abrir archivo CSV… y elegir tu archivo.
  • Copiar celdas directamente desde la hoja de cálculo y pegarlas en el cuadro de texto (se pegan separadas por tabuladores, y funciona igual).
  • Pulsar Ejemplo para probar con datos inventados.

También puedes escribir o corregir texto en el cuadro: la previsualización se actualiza al momento.

nombre;cargo;empresa
Marta Soler;Directora de producción;Estudio Norte
Jordi Vila;Presentador;Estudio Norte
3

Elige qué va en cada línea

En 2 · Columnas le dices a la app qué columna va en cada línea del cairon:

CampoQué hace
Línea 1 (grande)El texto principal, normalmente el nombre.
Línea 2Texto secundario, normalmente el cargo. Puede quedar en «ninguna».
Línea 3Opcional, más pequeña: empresa, ciudad, @usuario…
Nombre del archivoColumna con la que se nombran los PNG. En «automático» usa la Línea 1.

Si una persona tiene una celda vacía, esa línea simplemente no aparece en su cairon.

4

Ajusta el estilo

En 3 · Estilo eliges uno de los tres diseños:

Marta Soler
Directora de producción
Barra con acentoCaja con franja de color a la izquierda.
Marta Soler
Directora de producción
Dos cajasNombre arriba; cargo en una caja del color de acento.
Marta Soler
Directora de producción
MinimalSolo texto con sombra y una línea de acento.

Y luego ajustas el resto:

  • Resolución: la misma que el formato de vídeo de tu mezclador o proyecto (1080p, 4K o 720p).
  • Posición: abajo o arriba, a la izquierda, al centro o a la derecha.
  • Tamaño y márgenes lateral y vertical (en píxeles sobre 1080p).
  • Colores: fondo de la caja, acento y texto, y la opacidad del fondo.
  • Línea 1 en MAYÚSCULAS, si lo prefieres así.
Los nombres largos no se cortanSi un texto no cabe dentro de los márgenes, la app reduce ese cairon lo justo para que quepa.
Ojo con las tipografíasLa app usa las fuentes instaladas en tu ordenador. Avenir Next, Futura, Gill Sans y San Francisco vienen en Mac; en Windows puede salir otra fuente parecida. Comprueba la previsualización antes de exportar.
5

Revisa uno a uno

  • Pasa de una persona a otra con ← → o con las flechas del teclado. Arriba ves «3 / 12 · nombre».
  • El botón Fondo alterna entre el damero (para ver la transparencia) y un fondo tipo vídeo (para ver cómo queda en pantalla).
La app recuerda tu trabajoLos datos y el estilo se guardan solos en este navegador: si cierras la pestaña y vuelves, sigue todo ahí. En otro navegador u otro ordenador no estará.
6

Descarga los PNG

  • Descargar este PNG: solo el que estás viendo.
  • Descargar todos (ZIP): uno por fila, en un archivo cairons.zip.

Los archivos salen numerados en el orden de la lista: 01_marta-soler.png, 02_jordi-vila.png… Sin tildes ni espacios, para que ningún programa dé problemas.

7

Úsalos en el mezclador

Todos los PNG llevan canal alfa: lo que no es cairon es transparente.

  • ATEM: arrastra los PNG al Media Pool en ATEM Software Control y cárgalos en un Media Player. En el Downstream Key (o en un Upstream Key de tipo Luma) pon como relleno Media Player 1 y como clave Media Player 1 Key, con Pre Multiplied Key activado. La resolución del PNG debe coincidir con el formato de vídeo del ATEM.
  • vMix: añádelos como entrada de imagen y ponlos en un Overlay.
  • OBS: fuente «Imagen» dentro de la escena, por encima del vídeo.
  • Premiere, DaVinci o Final Cut: importa los PNG y ponlos en una pista por encima del vídeo.

8 · Cuéntame qué te parece

La app está en pruebas y lo que me digáis decide cómo sigue. Me interesa sobre todo:

Probar la app ahora