asset-size-matrix

Un maestro, cada espacio, nada importante recortado, y un recibo por cada archivo.

Qué es esta habilidad

Un lanzamiento rara vez necesita una sola imagen. Necesita una vista previa de enlace, una miniatura de video, una publicación cuadrada, una publicación vertical, una portada 3:4, una historia vertical, un banner de perfil, un icono de aplicación, una vista previa de repositorio, quizás un video vertical. Cada uno tiene su propio tamaño en píxeles, sus propias reglas de archivo y su propia superposición de interfaz: la columna de "me gusta" a la derecha de un feed vertical, la insignia de duración en la esquina de una miniatura, el avatar que se superpone a un banner, la máscara redondeada de un icono.

Normalmente la gente maneja esto arrastrando un cuadro de recorte una docena de veces. Los resultados son conocidos: un titular partido por la mitad en la versión 9:16, un logotipo oculto bajo el avatar, texto que era legible en el maestro 4K y mide tres píxeles en el feed, una miniatura rechazada por pesar 2.3 MB, un short que suena 8 dB más bajo que todo lo que lo rodea.

Esta habilidad convierte el trabajo en una tabla. Cada destino se convierte en una tarjeta de espacio con números y una fecha. El maestro se marca una vez: qué elementos deben sobrevivir. Un pequeño planificador calcula, para cada espacio, el recorte más amplio que mantiene esos elementos dentro del área segura de ese espacio, y dice claramente cuando ningún recorte funciona. Luego, cada archivo exportado se verifica contra su tarjeta.

El problema que resuelve

Los recortes se deciden a ojo, uno a uno, por lo que son inconsistentes y nadie puede decir por qué se eligió un recorte dado.
Las áreas seguras se olvidan hasta que la publicación está activa y la llamada a la acción queda bajo un botón.
"Solo recórtalo" se aplica a espacios donde el recorte no puede funcionar (un diseño ancho comprimido en 9:16), por lo que el resultado se recorta o se encoge hasta ser ilegible.
El tamaño del texto se juzga en el maestro, no en el tamaño en que el espacio se muestra realmente.
Las reglas de archivo (formato, peso, códec, velocidad de fotogramas, sonoridad) se descubren mediante errores de subida.
Los números de la plataforma se copian de publicaciones de blog antiguas sin fecha ni fuente.

Cuándo usarla

Úsala cuando:

un diseño debe entregarse en varios tamaños o para varias plataformas;
alguien pide un "kit de lanzamiento", "paquete social", "todos los tamaños", "conjunto de banners";
una portada o miniatura se sigue recortando o viendo borrosa después de subirla;
un video corto también debe existir como versión vertical, cuadrada y ancha;
estás a punto de exportar un lote y quieres una prueba de que cada archivo cumple con su especificación.

No la uses para crear el diseño desde cero (primero haz el maestro), para editar contenido de video (cortes, subtítulos, color) ni para publicar. Puede decirte que un espacio necesita un nuevo diseño; el nuevo diseño es una tarea de diseño.

Lo que necesitas

El maestro: idealmente la fuente editable (archivo Figma/PSD/HTML/SVG/de proyecto) más una exportación plana al tamaño más grande disponible. Los píxeles solos son suficientes para espacios solo de recorte.
La lista de destinos, o el objetivo ("lanzando en X, Instagram y nuestro blog").
Para espacios de video: el archivo de video, y ffmpeg/ffprobe instalados si quieres verificaciones automáticas.
Python 3.8+ para el script auxiliar scripts/matrix.py (solo biblioteca estándar).

Paso a paso

1. Analiza el maestro

Registra en master.json (ver examples/master.json):

ancho y alto en píxeles, y si es imagen fija o video;
si existe una fuente editable (esto decide lo costoso que es un REFLOW);
la versión más grande disponible. Nunca planifiques a partir de una copia reducida que alguien pegó en un chat.

Si el maestro es más pequeño que el espacio más grande, dilo ahora; aparecerá como UPSCALE más tarde.

2. Escribe la lista de espacios, con fechas

Crea slots.json (empieza desde examples/slots.json). Una tarjeta por espacio:

campo	significado
`id`	raíz del nombre de archivo de exportación, ej. `video-thumb` -> `video-thumb.jpg`
`w`, `h`	tamaño de píxel entregado; `exact: false` significa "al menos esto, misma relación de aspecto"
`safe`	márgenes superior, derecho, inferior, izquierdo en píxeles del espacio que cubre la interfaz de la plataforma
`drop`	elementos nombrados que no deben aparecer en este espacio (ej. titular en un icono)
`fit`	`wide` (por defecto, mantener tanto contexto como sea posible) o `tight` (llenar el área segura)
`display_w`	ancho real con el que se muestra el espacio, en píxeles CSS, ej. una miniatura en una cuadrícula
`min_text_px`	altura de mayúscula más pequeña que aún es legible a `display_w`
`formats`, `max_kb`	tipos de archivo permitidos y límite de peso
campos de video	`video_codec`, `audio_codec`, `pix_fmt`, rango de `fps`, `min_s`/`max_s`, `sample_rate`, `lufs` (+`lufs_tol`), `true_peak_max`
`source`	de dónde provienen los números

Reglas para la lista:

Pon as_of (la fecha de hoy) al principio. Los tamaños y las superposiciones cambian; una tarjeta sin fecha es un rumor.
Verifica cada tarjeta contra la página de ayuda actual de la propia plataforma o su plantilla descargable. Si no puedes verificar un número, mantenlo pero escribe "source": "unverified" y dilo en la entrega.
Pregunta sobre espacios solo cuando el destino no esté claro. Una pregunta agrupada es mejor que cinco: "Haré tarjeta de enlace, miniatura, cuadrado, historia 9:16 y banner. ¿Añadir o eliminar alguno?"

3. Marca el maestro

Todavía en master.json, lista los cuadros como [x, y, w, h] en píxeles del maestro:

keep: lo que debe ser visible en cada espacio que no lo descarte (producto, rostro, arte clave);
text: cada bloque de texto con su cap_px (altura de una letra mayúscula en el maestro);
logo: la marca;
focus: un punto para centrar cuando no hay nada marcado.

Obtén los cuadros midiendo en la herramienta de diseño, leyendo los límites de la capa del archivo fuente, o abriendo la imagen y estimando cuidadosamente. Añade un pequeño margen a cada cuadro; un cuadro que abrace un rostro cortará la barbilla en la práctica.

4. Planifica cada espacio

python3 scripts/matrix.py plan --master master.json --slots slots.json

Para cada espacio obtienes un veredicto:

CROP: un recorte + escalado mantiene todo lo requerido dentro del área segura. La fila incluye el rectángulo de recorte y un filtro ffmpeg listo (crop=w:h:x:y,scale=W:H).
UPSCALE: un recorte funciona pero amplía el maestro. La fila indica qué tamaño de maestro se necesita. Pide una exportación más grande o un logotipo vectorial en lugar de enviar una imagen blanda.
REFLOW: ningún recorte puede funcionar, o el texto sería ilegible al tamaño de visualización. Si la fila incluye art_only, el arte aún se recorta limpiamente y solo el texto/logotipo listado necesita re-colocarse para esta forma. De lo contrario, la composición en sí debe cambiar.

Muestra la tabla al usuario antes de exportar nada. Es el momento más barato para cambiar de opinión.

5. Resuelve cada REFLOW

Elige la solución más ligera que funcione, en este orden:

Re-colocar el tipo: recorta el arte con el rectángulo art_only, luego coloca el titular y el logotipo de nuevo dentro del área segura del espacio, a un tamaño que pase min_text_px.
Re-apilar: los diseños anchos (texto a la izquierda, arte a la derecha) se convierten en altos (arte arriba, texto debajo), desde la fuente editable, manteniendo las mismas fuentes, colores y proporciones de espaciado.
Extender el lienzo: amplía el fondo en el archivo fuente (o con un color de marca sólido) para que el arte encaje en el área segura, en lugar de encoger el arte.
Acortar para espacios pequeños: los iconos y avatares llevan solo la marca; una portada 3:4 en una cuadrícula de dos columnas puede necesitar un titular más corto. Nunca reescribas el texto tú mismo; propón la línea más corta y deja que el propietario la apruebe.

Vuelve a ejecutar plan después de cada cambio hasta que cada espacio sea CROP o una excepción deliberada y explicada.

6. Exporta

Espacios solo de recorte: aplica el filtro planificado, tanto para imágenes fijas como para video: ffmpeg -i master.png -vf "crop=...,scale=..." link-card.png.
Espacios REFLOW: exporta desde la fuente editable al tamaño exacto del espacio.
Nombra cada archivo <id del espacio>.<ext> en una carpeta, para que el verificador pueda encontrarlo.
Imágenes fijas: sRGB, sin transparencia donde la plataforma la aplana sobre un color desconocido, calidad reducida paso a paso solo hasta que se cumpla max_kb.
Video: ancho y alto pares, yuv420p, la velocidad de fotogramas de la fuente a menos que la tarjeta diga lo contrario, sonoridad normalizada al objetivo de la tarjeta. Para un límite de tamaño, calcula la tasa de bits: python3 scripts/matrix.py budget --seconds 58 --max-mb 50.
Más recetas en references/export-recipes.md.

7. Verifica cada archivo

python3 scripts/matrix.py check --slots slots.json --dir out/ --loudness

Cada espacio devuelve PASS, FAIL, CHECK (algo no pudo medirse) o MISSING. Corrige libremente los fallos mecánicos (tamaño, formato, peso, formato de píxel, frecuencia de muestreo incorrectos). Los fallos que cambian el contenido (menor duración, un recorte más ajustado, audio más fuerte que levanta ruido de fondo) necesitan la elección del propietario: indica la opción y su coste.

8. Míralo, a tamaño real

El verificador no puede ver. Construye una hoja de contacto que muestre cada espacio a su display_w, con el área segura delineada, y ábrela:

python3 scripts/matrix.py sheet --slots slots.json --dir out/   # escribe out/contact-sheet.html

Busca: texto que cruza la línea segura, rostros cortados en las articulaciones (barbilla, parte superior de la cabeza, manos), el logotipo sobre un fondo recargado, dos espacios que parecen de marcas diferentes.

9. Entrega

Entrega la carpeta más un pequeño manifiesto:

Kit: Lanzamiento Tidepool, espacios a fecha 2026-10-24 (2 tarjetas no verificadas: note-cover, article-cover)
link-card.png       1200x630   184 KB  PASS  crop
video-thumb.jpg     1280x720   402 KB  PASS  reflow: titular re-colocado a 96 px de altura de mayúscula
story-vertical.png  1080x1920  1.1 MB  PASS  reflow: re-apilado, lienzo extendido
app-icon.png        1024x1024   61 KB  PASS  desde logotipo vectorial (raster era 1.6x demasiado pequeño)
vertical-video.mp4  1080x1920  21 MB   PASS  -14.2 LUFS, -1.3 dBTP, 30 fps, 41.0 s
Mira: contact-sheet.html (todos los espacios a tamaño de visualización)

Ejemplos

"Haz que este banner de lanzamiento funcione en todas partes." Maestro 4000x2250, titular a la izquierda, maqueta de teléfono a la derecha. Plan: tarjeta de enlace y vista previa de repositorio CROP; miniatura REFLOW (titular solo 13.5 px de alto al tamaño de cuadrícula, necesita 14); cuadrado, vertical y 3:4 REFLOW con un recorte art_only (re-colocar titular bajo el teléfono); 9:16 REFLOW sin art-only (la maqueta es demasiado ancha para la columna segura, así que extiende el lienzo y re-apila); icono de aplicación UPSCALE (usa el logotipo vectorial). Ver examples/plan.output.md.

"YouTube sigue rechazando mi miniatura." Un espacio. La verificación muestra 2.4 MB contra un límite de 2 MB y 1280x721. Re-exporta a 1280x720, calidad JPEG reducida de 95 a 88: 1.3 MB, PASS.

"El mismo short para Reels, Shorts y un corte ancho de YouTube." Tres espacios de video. Los espacios verticales CROP desde el maestro 16:9 solo porque el orador está centrado; el corte ancho es el maestro. La verificación encuentra audio de 44.1 kHz (WARN) y -21.9 LUFS (FAIL contra -14); normaliza, re-exporta, re-verifica. Ver examples/check.output.txt.

Consejos

Marca el maestro una vez y guarda master.json con el archivo de diseño; la próxima campaña lo reutiliza.
Cuando dos plataformas comparten una forma, aún dales tarjetas separadas si sus superposiciones difieren.
Prefiere un cuadro seguro conservador para video vertical si una exportación debe servir para varios feeds.
Un recorte que pasa los números pero corta a través de una articulación de una persona sigue fallando; confía en el paso de inspección visual.
fit: tight es para marcas e iconos; todo lo demás debe mantener contexto (wide).
Mantén los números no verificados visibles en el manifiesto en lugar de confiar en ellos silenciosamente.
Re-verifica después de cada re-exportación, no solo el archivo que cambiaste: las herramientas por lotes sobrescriben archivos vecinos.

fangdididi/matriz-de-tamaños-de-activos

¿Qué es matriz-de-tamaños-de-activos?

Preguntar en tu IA favorita

Documentación