Was macht asset-size-matrix?
Ein Master, jede Größe, nichts Wichtiges abgeschnitten und eine Quittung für jede Datei.
Was diese Fähigkeit ist
Ein Launch benötigt selten nur ein Bild. Er braucht eine Link-Vorschau, ein Video-Thumbnail, einen quadratischen Beitrag, einen Hochformat-Beitrag, ein 3:4-Cover, eine vertikale Story, ein Profilbanner, ein App-Icon, eine Repo-Vorschau, vielleicht ein vertikales Video. Jedes hat seine eigene Pixelgröße, seine eigenen Dateiregeln und seine eigene Oberflächenüberlagerung: die Like-Spalte rechts in einem vertikalen Feed, der Dauer-Badge in der Ecke eines Thumbnails, der Avatar, der auf einem Banner sitzt, die runde Maske auf einem Icon.
Normalerweise erledigen Leute das, indem sie ein Dutzend Mal ein Zuschnittsrechteck herumziehen. Die Ergebnisse sind bekannt: eine Überschrift, die bei der 9:16-Version halbiert ist, ein Logo, das unter dem Avatar versteckt ist, Text, der auf dem 4K-Master lesbar war und im Feed drei Pixel hoch ist, ein Thumbnail, das wegen 2,3 MB abgelehnt wird, ein Short, der 8 dB leiser ist als alles andere.
Diese Fähigkeit macht die Aufgabe zu einer Tabelle. Jedes Ziel wird zu einer Slot-Karte mit Zahlen und einem Datum. Der Master wird einmal markiert: Welche Boxen müssen überleben. Ein kleiner Planer berechnet für jeden Slot den breitesten Zuschnitt, der diese Boxen innerhalb des sicheren Bereichs des Slots behält, und sagt deutlich, wenn kein Zuschnitt funktioniert. Dann wird jede exportierte Datei überprüft gegen ihre Karte.
Das Problem, das es löst
- Zuschnitte werden nach Augenmaß entschieden, eines nach dem anderen, daher sind sie inkonsistent und niemand kann sagen, warum ein bestimmter Zuschnitt gewählt wurde.
- Sichere Bereiche werden vergessen, bis der Beitrag live ist und der Call-to-Action unter einem Button sitzt.
- „Einfach zuschneiden“ wird auf Slots angewendet, bei denen Zuschnitt nicht funktionieren kann (ein breites Layout in 9:16 gequetscht), daher wird das Ergebnis entweder abgeschnitten oder auf Unlesbarkeit verkleinert.
- Die Textgröße wird auf dem Master beurteilt, nicht in der Größe, in der der Slot tatsächlich angezeigt wird.
- Dateiregeln (Format, Gewicht, Codec, Framerate, Lautstärke) werden durch Upload-Fehler entdeckt.
- Plattformzahlen werden aus alten Blogbeiträgen ohne Datum und Quelle kopiert.
Wann verwenden
Verwenden Sie es, wenn:
- ein Design in mehreren Größen oder für mehrere Plattformen ausgeliefert werden muss;
- jemand nach einem „Launch-Kit“, „Social-Pack“, „allen Größen“, „Banner-Set“ fragt;
- ein Cover oder Thumbnail nach dem Upload ständig abgeschnitten oder unscharf wird;
- ein kurzes Video auch als vertikale, quadratische und breite Version existieren muss;
- Sie kurz davor sind, einen Batch zu exportieren, und einen Nachweis möchten, dass jede Datei ihrer Spezifikation entspricht.
Verwenden Sie es nicht, um das Design aus dem Nichts zu erstellen (machen Sie zuerst den Master), um Videoinhalte zu bearbeiten (Schnitt, Untertitel, Farbe) oder um zu veröffentlichen. Es kann Ihnen sagen, dass ein Slot ein neues Layout benötigt; das neue Layout ist eine Designaufgabe.
Was Sie brauchen
- Den Master: idealerweise die bearbeitbare Quelle (Figma/PSD/HTML/SVG/Projektdatei) plus einen flachen Export in der größten verfügbaren Größe. Pixel allein sind für reine Zuschnitt-Slots in Ordnung.
- Die Liste der Ziele oder das Ziel („Launch auf X, Instagram und unserem Blog“).
- Für Video-Slots: die Videodatei und
ffmpeg/ffprobeinstalliert, wenn Sie automatische Prüfungen wünschen. - Python 3.8+ für das Hilfsskript
scripts/matrix.py(nur Standardbibliothek).
Schritt für Schritt
1. Bestandsaufnahme des Masters
Notieren Sie in master.json (siehe examples/master.json):
- Pixelbreite und -höhe und ob es sich um ein Standbild oder ein Video handelt;
- ob eine bearbeitbare Quelle existiert (dies entscheidet, wie teuer ein REFLOW ist);
- die größte verfügbare Version. Planen Sie niemals von einer verkleinerten Kopie, die jemand im Chat eingefügt hat.
Wenn der Master kleiner als der größte Slot ist, sagen Sie dies jetzt; es wird später als UPSCALE angezeigt.
2. Schreiben Sie die Slot-Liste mit Daten
Erstellen Sie slots.json (beginnen Sie mit examples/slots.json). Eine Karte pro Slot:
| Feld | Bedeutung |
|---|---|
id | Dateinamensstamm des Exports, z.B. video-thumb -> video-thumb.jpg |
w, h | Ausgelieferte Pixelgröße; exact: false bedeutet „mindestens dies, gleiches Seitenverhältnis“ |
safe | top, right, bottom, left Insets in Slot-Pixeln, die die Plattform-UI bedeckt |
drop | Benannte Boxen, die in diesem Slot nicht erscheinen sollen (z.B. Überschrift auf einem Icon) |
fit | wide (Standard, so viel Kontext wie möglich behalten) oder tight (den sicheren Bereich füllen) |
display_w | Wie breit der Slot tatsächlich angezeigt wird, in CSS-px, z.B. ein Thumbnail in einem Raster |
min_text_px | Kleinste Versalhöhe, die bei display_w noch lesbar ist |
formats, max_kb | Erlaubte Dateitypen und Gewichtsgrenze |
| Video-Felder | video_codec, audio_codec, pix_fmt, fps-Bereich, min_s/max_s, sample_rate, lufs (+lufs_tol), true_peak_max |
source | Woher die Zahlen stammen |
Regeln für die Liste:
- Setzen Sie
as_of(das heutige Datum) an den Anfang. Größen und Überlagerungen ändern sich; eine Karte ohne Datum ist ein Gerücht. - Überprüfen Sie jede Karte anhand der aktuellen Hilfe-Seite der Plattform oder der herunterladbaren Vorlage.
Wenn Sie eine Zahl nicht überprüfen können, behalten Sie sie, aber schreiben Sie
"source": "unverified"und sagen Sie dies bei der Übergabe. - Fragen Sie nur nach Slots, wenn das Ziel unklar ist. Eine gebündelte Frage ist besser als fünf: „Ich erstelle Link-Karte, Thumbnail, Quadrat, 9:16-Story und Banner. Hinzufügen oder entfernen?“
3. Markieren Sie den Master
Weiterhin in master.json listen Sie Boxen als [x, y, w, h] in Master-Pixeln:
keep: Was in jedem Slot sichtbar sein muss, der es nicht fallen lässt (Produkt, Gesicht, Key-Art);text: Jeder Textblock mit seinercap_px(Höhe eines Großbuchstabens auf dem Master);logo: Die Marke;focus: Ein Punkt, auf den zentriert wird, wenn nichts markiert ist.
Ermitteln Sie Boxen durch Messen im Designtool, Lesen der Ebenengrenzen aus der Quelldatei, oder durch Öffnen des Bildes und sorgfältiges Schätzen. Polstern Sie jede Box um ein paar Prozent; eine Box, die ein Gesicht umschließt, schneidet in der Praxis das Kinn ab.
4. Planen Sie jeden Slot
python3 scripts/matrix.py plan --master master.json --slots slots.json
Für jeden Slot erhalten Sie ein Urteil:
- CROP: Ein Zuschnitt + Skalierung hält alles Erforderliche innerhalb des sicheren Bereichs. Die Zeile enthält
das Zuschnittsrechteck und einen fertigen
ffmpeg-Filter (crop=w:h:x:y,scale=W:H). - UPSCALE: Ein Zuschnitt funktioniert, vergrößert aber den Master. Die Zeile sagt, welche Master-Größe benötigt wird. Fragen Sie nach einem größeren Export oder einem Vektor-Logo, anstatt ein weiches Bild auszuliefern.
- REFLOW: Kein Zuschnitt kann funktionieren, oder Text wäre in der Anzeigegröße unlesbar. Wenn die Zeile
art_onlyenthält, lässt sich das Bildmaterial noch sauber zuschneiden und nur der aufgelistete Text/das Logo muss für diese Form neu gesetzt werden. Andernfalls muss die Komposition selbst geändert werden.
Zeigen Sie dem Benutzer die Tabelle, bevor Sie etwas exportieren. Es ist der günstigste Moment, um Ihre Meinung zu ändern.
5. Lösen Sie jedes REFLOW
Wählen Sie die leichteste Lösung, die funktioniert, in dieser Reihenfolge:
- Typ neu setzen: Bildmaterial mit dem
art_only-Rechteck zuschneiden, dann die Überschrift und das Logo erneut innerhalb des sicheren Bereichs des Slots platzieren, in einer Größe, diemin_text_pxbesteht. - Neu stapeln: Breite Layouts (Text links, Bild rechts) werden zu hohen (Bild oben, Text unten), aus der bearbeitbaren Quelle, unter Beibehaltung derselben Schriftarten, Farben und Abstandsverhältnisse.
- Leinwand erweitern: Den Hintergrund in der Quelldatei verbreitern (oder mit einer einfachen Markenfarbe), damit das Bildmaterial in den sicheren Bereich passt, anstatt das Bildmaterial zu verkleinern.
- Für kleine Slots kürzen: Icons und Avatare tragen nur die Marke; ein 3:4-Cover in einem zweispaltigen Raster benötigt möglicherweise eine kürzere Überschrift. Schreiben Sie niemals selbst den Text um; schlagen Sie die kürzere Zeile vor und lassen Sie sie vom Eigentümer genehmigen lassen.
Führen Sie plan nach jeder Änderung erneut aus, bis jeder Slot CROP oder eine bewusste, erklärte Ausnahme ist.
6. Exportieren
- Reine Zuschnitt-Slots: Den geplanten Filter anwenden, sowohl für Standbilder als auch für Videos:
ffmpeg -i master.png -vf "crop=...,scale=..." link-card.png. - REFLOW-Slots: Aus der bearbeitbaren Quelle in der genauen Slot-Größe exportieren.
- Benennen Sie jede Datei
<slot id>.<ext>in einem Ordner, damit der Prüfer sie finden kann. - Standbilder: sRGB, keine Transparenz, wo die Plattform es auf eine unbekannte Farbe flacht,
Qualität schrittweise nur so weit senken, bis
max_kberreicht ist. - Video: Gerade Breite und Höhe,
yuv420p, die Framerate der Quelle, es sei denn, die Karte sagt etwas anderes, Lautstärke auf das Ziel der Karte normalisiert. Für eine Größenbegrenzung die Bitrate berechnen:python3 scripts/matrix.py budget --seconds 58 --max-mb 50. - Weitere Rezepte in
references/export-recipes.md.
7. Überprüfen Sie jede Datei
python3 scripts/matrix.py check --slots slots.json --dir out/ --loudness
Jeder Slot gibt PASS, FAIL, CHECK (etwas konnte nicht gemessen werden) oder MISSING zurück. Beheben Sie mechanische Fehler frei (falsche Größe, Format, Gewicht, Pixelformat, Abtastrate). Fehler, die den Inhalt ändern (kürzere Dauer, engerer Zuschnitt, lauteres Audio, das Hintergrundgeräusche anhebt), benötigen die Wahl des Eigentümers: Geben Sie die Option und ihre Kosten an.
8. Betrachten Sie es in Originalgröße
Der Prüfer kann nicht sehen. Erstellen Sie ein Kontaktblatt, das jeden Slot in seiner display_w zeigt, mit
markiertem sicheren Bereich, und öffnen Sie es:
python3 scripts/matrix.py sheet --slots slots.json --dir out/ # schreibt out/contact-sheet.html
Achten Sie auf: Text, der die sichere Linie kreuzt, Gesichter, die an den Gelenken abgeschnitten sind (Kinn, Oberkopf, Hände), das Logo auf einem unruhigen Hintergrund, zwei Slots, die wie verschiedene Marken aussehen.
9. Übergeben
Liefern Sie den Ordner plus ein kurzes Manifest:
Kit: Tidepool Launch, Slots as_of 2026-10-24 (2 Karten ungeprüft: note-cover, article-cover)
link-card.png 1200x630 184 KB PASS crop
video-thumb.jpg 1280x720 402 KB PASS reflow: Überschrift neu gesetzt mit 96 px Versalhöhe
story-vertical.png 1080x1920 1.1 MB PASS reflow: neu gestapelt, Leinwand erweitert
app-icon.png 1024x1024 61 KB PASS aus Vektor-Logo (Raster war 1,6x zu klein)
vertical-video.mp4 1080x1920 21 MB PASS -14,2 LUFS, -1,3 dBTP, 30 fps, 41,0 s
Ansicht: contact-sheet.html (alle Slots in Anzeigegröße)
Beispiele
„Mach dieses Launch-Banner überall nutzbar.“
Master 4000x2250, Überschrift links, Telefon-Mockup rechts. Plan: Link-Karte und Repo-Vorschau CROP;
Thumbnail REFLOW (Überschrift nur 13,5 px hoch in Rastergröße, benötigt 14); Quadrat, Hochformat und 3:4
REFLOW mit einem art_only-Zuschnitt (Überschrift unter dem Telefon neu setzen); 9:16 REFLOW ohne art-only
(Das Mockup ist zu breit für die sichere Spalte, also Leinwand erweitern und neu stapeln); App-Icon
UPSCALE (Vektor-Logo verwenden). Siehe examples/plan.output.md.
„YouTube lehnt mein Thumbnail immer wieder ab.“ Ein Slot. Die Prüfung zeigt 2,4 MB gegen ein 2 MB Limit und 1280x721. Neu exportieren bei 1280x720, JPEG-Qualität von 95 auf 88 gesenkt: 1,3 MB, PASS.
„Derselbe Short für Reels, Shorts und einen breiten YouTube-Ausschnitt.“
Drei Video-Slots. Vertikale Slots CROP vom 16:9-Master nur, weil der Sprecher zentriert ist;
der breite Ausschnitt ist der Master. Die Prüfung findet 44,1 kHz Audio (WARN) und -21,9 LUFS
(FAIL gegen -14); normalisieren, neu exportieren, neu prüfen. Siehe examples/check.output.txt.
Tipps
- Markieren Sie den Master einmal und behalten Sie
master.jsonbei der Designdatei; die nächste Kampagne verwendet es wieder. - Wenn zwei Plattformen dieselbe Form teilen, geben Sie ihnen dennoch separate Karten, wenn sich ihre Überlagerungen unterscheiden.
- Bevorzugen Sie eine konservative sichere Box für vertikale Videos, wenn ein Export mehrere Feeds bedienen muss.
- Ein Zuschnitt, der die Zahlen besteht, aber durch ein Gelenk einer Person schneidet, besteht trotzdem nicht; vertrauen Sie dem Schritt der Betrachtung.
fit: tightist für Marken und Icons; alles andere sollte Kontext behalten (wide).- Halten Sie ungeprüfte Zahlen im Manifest sichtbar, anstatt ihnen stillschweigend zu vertrauen.
- Überprüfen Sie nach jedem erneuten Export erneut, nicht nur die Datei, die Sie geändert haben: Batch-Tools überschreiben Nachbarn.